I am using a seed project for Angular apps. There is no bower to manage the dependencies. The angular.js file is currently in the below location. Here is the index.html content:
<!doctype html>
<html lang="en" ng-app="AngularSpringApp">
<head>
<meta charset="utf-8">
<title>Service App</title>
<link rel="stylesheet" href="resources/css/app.css"/>
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div id="wrapper">
<ul class="menu">
<li>Cars</li>
<li>Trains</li>
<li>Railway Station</li>
<li>Kits</li>
</ul>
<hr class="" />
<div ng-view></div>
</div>
<script src="resources/js/lib/angular/angular.js"></script>
<script src="resources/js/app.js"></script>
<script src="resources/js/dirPagination.js"></script>
<script src="resources/js/services.js"></script>
<script src="resources/js/controllers/RailwayStationController.js"></script>
<script src="resources/js/controllers/CarController.js"></script>
<script src="resources/js/controllers/TrainController.js"></script>
<script src="resources/js/controllers/KitController.js"></script>
<script src="resources/js/filters.js"></script>
<script src="resources/js/directives.js"></script>
</body>
</html>
And here is the beginning of the app.js file:
var AngularSpringApp = angular.module('AngularSpringApp', ['angularUtils.directives.dirPagination']);
// Declare app level module which depends on filters, and services
AngularSpringApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when ...
As you can see, ngRoute module is not injected, but the the routing is working properly!
Now, I am trying to change the current angular file with new angular.js file which I downloaded from the Angular website. When replacing the angular.js file, I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module AngularSpringApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.28/$injector/unpr?p0=%24routeProvider
at http://localhost:8084/app/resources/js/lib/angular/angular.js:78:12
at http://localhost:8084/app/resources/js/lib/angular/angular.js:3801:19
at getService (http://localhost:8084/app/resources/js/lib/angular/angular.js:3929:39)
at Object.invoke (http://localhost:8084/app/resources/js/lib/angular/angular.js:3956:13)
at http://localhost:8084/app/resources/js/lib/angular/angular.js:3884:37
at forEach (http://localhost:8084/app/resources/js/lib/angular/angular.js:325:18)
at loadModules (http://localhost:8084/app/resources/js/lib/angular/angular.js:3871:5)
at createInjector (http://localhost:8084/app/resources/js/lib/angular/angular.js:3811:11)
at doBootstrap (http://localhost:8084/app/resources/js/lib/angular/angular.js:1444:20)
at bootstrap (http://localhost:8084/app/resources/js/lib/angular/angular.js:1459:12)
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=AngularSpringApp&p…ost%3A8084%2Fapp%2Fresources%2Fjs%2Flib%2Fangular%2Fangular.js%3A1459%3A12)
You likely also need to download and include the angular-route module after your angular.js include:
<script src="resources/js/lib/angular/angular-route.js"></script>
Related
I want to use routing and AngularJS in Ionic V1.
when I compile my program it prints out this error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ionic due to:
[$injector:modulerr] Failed to instantiate module ngSanitize due to:
[$injector:unpr] Unknown provider: $filterProvider
http://errors.angularjs.org/1.2.10/$injector/unpr?p0=%24filterProvider
minErr/<#http://localhost:8100/js/angular/angular.js:78:12
createInjector/providerCache.$injector<#http://localhost:8100/js/angular/angular.js:3544:19
getService#http://localhost:8100/js/angular/angular.js:3671:39
loadModules/<#http://localhost:8100/js/angular/angular.js:3625:45
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
as well as:
Uncaught TypeError: angular.module(...).info is not a function
The project can be found under: codesandbox.io/s/stupefied-pine-px3iq
my index.html:
<!DOCTYPE html >
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<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>
<!-- your app's js -->
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular-mocks.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="js/angular/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/app_module.js"></script>
<script src="js/controller/SensorCtrl.js"></script>
<script src="js/controller/StartCtrl.js"></script>
<script src="js/service/state_route.js"></script>
<script src="js/service/draw.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
</html>
my app module:
var app = angular.module('app', ['ionic']);
my roting config:
app.config(function ($stateProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'template_startseite.html'
})
.state('sensoren',{
url:'/sensoren',
templateUrl: 'template_sensorwerte.html'
});
});
when I try the routing, then it only shows http://localhost:8100/ but not http://localhost:8100/index.html
so maybe this is why the routing doesn't work. But the error message shows that ionic isn't instantiated, do you have any ideas what I can do?
edit:
here is a picture of what the app shows on screen
edit2:
tmhao2005 pointed out that <script src="lib/ionic/js/ionic.bundle.js"></script> was missing, it now works perfectly.
For all who might encounter the same problem:
The problem seems to have been the 'ionic' in my app modue var app = angular.module('app', ['ionic']);
So I switched from the <ion-nav-view></ion-nav-view> to <div ng-view></div>
And from $stateProvider.state to $routeProvider.when
now it seems to work again, the routing function works too.
Would be nice to know why the 'ionic' didn't work though.
I am using webpack to the run the AngularJS application. My project is first built using webserver, gulp and livereload. Now while trying to build the project using webpack, I'm facing the below error in the console.
Error: Unknown provider: $locationProvider
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#25abb7">
<!-- font awesome from BootstrapCDN -->
<link href="assets/fa/font-awesome.min.css" rel="stylesheet">
<!-- compiled JS -->
<script type="text/javascript" src="assets/lib/keycloak/keycloak.js"></script>
<script type="text/javascript" src="../js/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<div>
<div ui-view="header"></div>
<div ui-view="main"></div>
<div ui-view="footer"></div>
</div>
Check if your dependency Injection is done right.
Maybe it cannot find the provider because it is minified?
Can you copy your js code ?
Here is an example of how you inject it:
app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
//Do something with the locationProvider
}]);
I think this link might solve your issue How do I access the $locationProvider to configure it?
I`m new in AngularJS
I`m getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
this is index.html file:
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-controller="FirstCtrl">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">{{first.greeting}}</div>
<script src="angular.js"></script>
<script src="app/app.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is app.js file:
var app = angular.module("app", ["ui.router"]).controller("FirstCtrl", function FirstCtrl(){
var first = this;
first.greeting = "First";
});
Please help me to solve this issue
You're not loading in the ui-router script, I don't know if you have it locally or using a cdn, you just need to add it in your index.html there
for example, by adding-
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
in your index.html (this is a cdn link)
Fixed by following steps:
Installed angular-ui-router via npm
npm install angular-ui-router#0.2.18 --save
Then load the script in index.html (angular 1.5.0)
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="angular.js"></script>
This is just the core angular library, you need to either download and host the latest angular ui router library or pull it in from a CDN
see here for more details: https://github.com/angular-ui/ui-router
Can be installed via nuget
PM > Install-Package Angular.UI.UI-Router
I've completed a course on AngularJs through codecademy. I followed the angular-seed steps to set up my own local environment to make my first app, but it appears angular is not initializing on my site. I cant even evaluate a simple expression such as {{3+2}} let alone pull scope values from the controller.
my first steps:
1. clone angular seed from git
2. npm install into directory
3. npm start
my code:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
and here is my module:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
controller:
myApp.controller('MainController', function($scope) {
}
];
});
Any help is greatly appreciated.
thanks
my console errors in chrome are :
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)
http://localhost:8000/app/js/app.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/MainController.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/listinginfo.js Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp
at http://localhost:8000/app/bower_components/angular/angular.js:63:12
at http://localhost:8000/app/bower_components/angular/angular.js:1774:17
at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1698:38)
at module (http://localhost:8000/app/bower_components/angular/angular.js:1772:14)
at http://localhost:8000/app/bower_components/angular/angular.js:4115:22
at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20)
at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4099:5)
at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4025:11)
at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1452:20)
at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1473:12)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1473%3A12)
i figured cloning angular-seed and running npm install would setup everything correctly
It would be hard to tell without checking what errors are being thrown. Have you defined your controller though? Try adding a controller in your module like:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}])
and remove
<!-- Controllers -->
<script src="js/MainController.js"></script>
EDIT:
I tried to run your application without much overhead and it works. My files look something like this:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css"> -->
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<!-- <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
app.js
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
MainController.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
}])
I hope this helps.
Your web server may not have access to read the js files inside your bower_components/angular folder. This has happened to me when one time.
Also like the above comment look at your browser console to see what kind of errors you see. Is MainController defined?
Hey i've started learning angularJS and i'm quite new to it so i gues my best bet is to ask someone.
So my $routeProvider is not routing me to anything really when i run it it wont load any partials.
The current code i'm using.
angular.module("list" , ['ngRoute' ])
config(function ($routeProvider) {
$routeprovide.
when("/", {templateUrl:"/partials/list.html"})
})
My index.html
<!doctype html>
<html ng-app="list">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Angular Routing!</title>
</head>
<body>
<div ng-controller="AppCtrl" class="container">
<a href="#lijst">
<h2>The List!</h2>
</a>
<div ng-view> </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Edit: I run it by using a USBWebserver app
Console Errors:
> Failed to load resource: the server responded with a status of 404 (Not Found)
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
Uncaught ReferenceError: config is not defined main.js:2
Uncaught Error: Bootstrap requires jQuery bootstrap.js:7
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=list&p1=Error%3A%20…20at%20e%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular.min.js%3A29%3A115) angular.min.js:30
First of all, your angular-route.js must be included after angular itself
Second, you are using some routeprovide, and $routeProvider is injected
You should do this:
angular.module("list" , ['ngRoute' ]).
config(function ($routeProvider) {
$routeProvider.
when("/", {templateUrl:"/partials/list.html"})
});
You also forgot point before config method.
And this:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
And, it seems, your Bootstrap.js requires jQuery to be included before it.