I have installed angular-ui-router by doing npm install angular-ui-router --save-dev but i am getting errors
Index.html:
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
I have added the script tag in index.html and have also injected in app.js
app.js
angular
.module('news1App', ['ui.router'])
But still getting the error. Any help would be appreciated.
As I can see you must be having different version of angular API loaded and bounded together. Ideally you should refer the angular API library with same version.
I'd suggest you to have all angular API version same as 1.5.8. This could solve your problem.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
DEMO
Related
I am trying to load the highstocks files on my webserver, and when i use
<script src="https://code.highcharts.com/stock/highstock.js"></script>
It works completely fine, but on my server I try to load
<script src="highstocks/code/js/highstock.js"></script>
And it dosent work, when I inspect the site (which you can look at: weather.wesleyweisenberger.com) the link points to the correct file, yet it does not load highcharts.
I have used chown -R and chmod -R 755 on the highstocks folder, yet I cannot load the file into the website. I have had similar issues with trying to load materialize or jQuery.
Help would be Appreaciated.
The order of imports matter in your case. You need to add the highstock import line before the export js lines, like below
<!-- Import highcharts -->
<script src="highstocks/code/js/highstock.js"></script>
<!-- <script src="https://code.highcharts.com/stock/highstock.js"></script> -->
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
Because exporting.js requires highstock.js, and the order is incorrect only when you add from local like below,
<!-- Import highcharts -->
<!-- <script src="https://code.highcharts.com/stock/highstock.js"></script> -->
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="highstocks/code/js/highstock.js"></script> <!-- wrong order -->
I begin to use Bootstrap. And I add js/bootstrap.min.css
to my index.html and all works.
But, when I add bootstrap.min.js to index.html ,my, for example, dropdown menu doesn't work.
But, when I add http://code.jquery.com/jquery-latest.js - my dropdown menu works.
I want to work with menu without connecting to Internet.
Why?
you should download the script at your local system and put the script at in your project JS OR Script folder and call it from there.
like that:
<script type="text/javascript" src="/Scripts/jquery-latest.js"></script>
hopefully it works :)
Thanks
Bootstrap:
http://getbootstrap.com/getting-started/
JQuery:
http://www.w3schools.com/jquery/jquery_get_started.asp
Download and link the files correctly via relative paths.
Bootstrap uses jquery, since your need to use it without internet download the jquery file and put it inside JS folder and serve it to index.html
Here we go:
1) You are using jQuery library but not bootstrap
2) if you want to download bootstrap library to local, you will get from here : enter link description here
Instead of using cdn path in your index.html like this
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
try using relative path after downloading the required files as below:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="js/jquery.js"></script>
In your case jquery-latest.js must be downloaded from given link and included in index.html using relative path.
I try install angularjs and he give me this error:
ReferenceError: System is not defined
and this is my sources import:
<script src="assets/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- CORE ANGULARJS SCRIPTS -->
<script src="assets/js/angular2.min.js"></script>
I think is because missing js but I don't know what.
Can anyone help me with this
I am trying to port an existing angularjs app to ionic. The ionic project was created with;
$ ionic start myApp tabs
Then, I combined the links from my angularjs app and ionic app together.
<!--ionic links-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel=" stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<link rel="stylesheet" href="../../bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="../../bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" href="css/app.css"/>
<!--<div ng-include src="'partials/header.html'"></div>-->
</head>
<body>
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../../bower_components/angular-material/angular-material.min.js"></script>
<script src="../../bower_components/angular-route/angular-route.min.js"></script>
<script src="../../bower_components/angular-moment/angular-moment.min.js"></script>
<script src="../../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../../bower_components/angular-google-chart/ng-google-chart.js"></script>
<script src="../../bower_components/ng-table/dist/ng-table.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers-func.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
I launched Chrome browser and load the URL http://127.0.0.1/ionicapp/www/
The error encountered is
Uncaught Error: [$injector:unpr] Unknown provider:
$$forceReflowProvider <- $$forceReflow <- $$animateQueue <- $animate
<- $compile <- $$animateQueue
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
This error comes from ionic.bundle.js: 8900
I suspect the problem lies with some conflicts in the links. ionic.bundle.js may already contains some angularjs code. If yes, how should the links conflict be reconciled?
The hint can be found in this documentation
http://ionicframework.com/docs/guide/starting.html
Ionic comes with ngAnimate and ngSanitize bundled in, but to use other
Angular modules you’ll need to include them from the lib/js/angular
directory.
ionic.bundle.js already comes bundled with animate module. So, your html file creates conflict when you link in the angularjs animate module.
In your html file, comment away the following lines. This should be enough to solve your problem.
<!--<script src="../../bower_components/angular/angular.min.js"></script>-->
<!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>-->
Please note that your other js modules need to be placed in lib/js. They can be placed in sub-folders in lib/js. Otherwise, it will work well when testing on desktop browser but fail to work on the smartphone.
I'm working with the Yeoman webapp generator (https://github.com/yeoman/generator-webapp) and I've added the Bower package GMAPS (https://github.com/hpneo/gmaps).
After adding Gmaps to my project I add the Google Api link in the top of my project like this
<!-- build:css(.tmp) styles/main.css -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
Problem is, when I use the Grunt Servecommand that I see my Gmaps appearing on my website that runs on my localhost. If I Grunt and build my project it always gives me an error that in my main.js file it cannot find the variable Gmaps (that is used to trigger the Gmaps-plugin).
So my question: How do I add API's to a project that is build with Grunt?
You need to copy google api link outsite the generators tags in the index.html. For example:
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- build:js(.) scripts/vendor.js -->
</script>
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
</script>
<!-- endbower -->