Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.Firstpage due to:
ReferenceError: loginController is not defined
at routerChange (http://127.0.0.1:1139/www/js/Firstpage/route.js:9:41)
at Object.invoke (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12110:17)
at runInvokeQueue (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12016:35)
at http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12025:11
at forEach (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:8248:20)
at loadModules (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12006:5)
at http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12023:40
at forEach (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:8248:20)
at loadModules (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:12006:5)
at createInjector (http://127.0.0.1:1139/www/lib/ionic/js/ionic.bundle.js:11932:11)
Hello
I am trying to make angular app .But I am getting error that my controller is undefined .could you please tell me where i am doing wrong ? I am getting the above error
here is my code .
https://dl.dropbox.com/s/zipm6g0ewqf7xg4/ionic_web.zip?dl=0
I am trying to load index.html file .Please run index.html file to get error
<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>First app</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- libraray--->
<script src="lib/ionic/js/ionic.bundle.js" type="application/javascript"></script>
<!-- module -->
<script src="js/Firstpage/module.js" type="application/javascript"></script>
<!-- controller -->
<script src="js/Firstpage/controller/firstcontroller.js" type="application/javascript"></script>
<!-- router -->
<script src="js/Firstpage/route.js" type="application/javascript"></script>
<script src="js/app.js" type="application/javascript"></script>
</head>
<body>
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button class="">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
here is my whole code
https://dl.dropbox.com/s/zipm6g0ewqf7xg4/ionic_web.zip?dl=0
Previously :
in Route.js -
(function(){
'use strict';
angular.module('app.Firstpage').config(routerChange);
routerChange.$inject=['$stateProvider', '$urlRouterProvider'];
function routerChange($stateProvider,$urlRouterProvider){
$stateProvider.state('login',{
url:'/login',
templateUrl:"js/Firstpage/template/login.html",
controller:'loginController'
})
$urlRouterProvider.otherwise('/login')
}
})();
Now Route.js :
(function(){
'use strict';
angular.module('app.Firstpage').config(routerChange);
routerChange.$inject=['$stateProvider', '$urlRouterProvider'];
function routerChange($stateProvider,$urlRouterProvider){
$stateProvider.state('login',{
url:'/login',
templateUrl:"js/Firstpage/template/login.html",
controller:'loginController'
})
$urlRouterProvider.otherwise('/login')
}
})();
you missed the single quote.
controller:'loginController'
Output screenshot:
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 know, this topic have but I have similar problem.
My localhost have some datas.
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
Where is my mistake? Please help me. :(
app.js
'use strict';
(function () {
let myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('userController', ['$http', function ($http) {
let vm = this;
$http.get("http://localhost:8080/Market/users").then(function (response) {
vm.usersForm = response.data;
})
}]);
myApp.config('$stateProvider', [ function($stateProvider) {
$stateProvider.state('index', {
url: "http://localhost:63342/demo2/app/",
templateUrl: "index.html",
controller: "userController"
})
}]);
}());
index.html
<html>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular-route.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="userController as vm">
<label>{{vm.usersForm.firstName}}</label>
</div>
</body>
</html>
When I debug my index.html, console screen:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.2.32/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:78:12
at assertArg (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1511:11)
at assertArgFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1521:3)
at annotate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3291:5)
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3945:21)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3886:37
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:325:18)
at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3873:5)
at createInjector (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3813:11)
at doBootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1446:20)
http://errors.angularjs.org/1.2.32/$injector/modulerr?p0=myApp&p1=Error%3A%20%5Bng%3Aareq%5D%20Argument%20'fn'%20is%20not%20a%20function%2C%20got%20string%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.32%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A78%3A12%0A%20%20%20%20at%20assertArg%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A1511%3A11)%0A%20%20%20%20at%20assertArgFn%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A1521%3A3)%0A%20%20%20%20at%20annotate%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3291%3A5)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3945%3A21)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3886%3A37%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A325%3A18)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3873%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3813%3A11)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A1446%3A20)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:78:12
at assertArg (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1511:11)
at assertArgFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1521:3)
at annotate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3291:5)
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3945:21)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3886:37
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:325:18)
at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3873:5)
at createInjector (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3813:11)
at doBootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1446:20)
http://errors.angularjs.org/1.2.32/$injector/modulerr?p0=myApp&p1=Error%3A%20%5Bng%3Aareq%5D%20Argument%20'fn'%20is%20not%20a%20function%2C%20got%20string%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.32%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A78%3A12%0A%20%20%20%20at%20assertArg%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A1511%3A11)%0A%20%20%20%20at%20assertArgFn%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A1521%3A3)%0A%20%20%20%20at%20annotate%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3291%3A5)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3945%3A21)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3886%3A37%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A325%3A18)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3873%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A3813%3A11)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.32%2Fangular.js%3A1446%3A20)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:78:12
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3907:15
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:325:18)
at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3873:5)
at createInjector (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:3813:11)
at doBootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1446:20)
at bootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1461:12)
at angularInit (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:1370:5)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:22192:5
at HTMLDocument.trigger (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js:2575:7)
SOLVED
I added this library:
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
app.js is updated
'use strict';
(function () {
let myApp = angular.module('myApp', ['ui.router']);
myApp.controller('userController', ['$http', function ($http) {
let vm = this;
$http.get("http://localhost:8080/Market/users").then(function (response) {
vm.usersForm = response.data;
})
}]);
myApp.config('$stateProvider', [ function($stateProvider) {
$stateProvider.state('index', {
url: "http://localhost:63342/demo2/app/",
templateUrl: "index.html",
controller: "userController"
})
}]);
}());
index.html is updated
<html>
<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">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-loader/angular-loader.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="userController as vm">
<label>{{vm.usersForm.firstName}}</label>
</div>
</body>
</html>
I am creating an angularJS app, and decided to separate the controllers into multiple files. This is what I have:
For declaring the module, I have one file with the below content:
File: controllers.js
angular.module('starter.controllers', []);
and one of the other controllers I am using is called ConnectionsController:
File: ConnectionsController.js
angular.module('starter').controller('ConnectionsController', ['$scope', '$http', function($scope, $http){
}]);
In the app.js, I have the following:
File: app.js
var app = angular.module('starter', ['ionic', 'starter.controllers', 'ConnectionsController','starter.MoreOptionsController','starter.OrdersController', 'starter.ProfileManagementController', 'starter.UserAccessController', 'starter.services']);
When I run the application, it triggers an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ConnectionsController due to:
Error: [$injector:nomod] Module 'ConnectionsController' 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.
What am I doing wrong in declaring the controllers or linking them to app.js file?
Thanks,
Update: Index.html content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<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/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/ConnectionsController.js"></script>
<script src="js/OrdersController.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
The error is self-explanatory: you don't have module ConnectionsController. Note, that when you declare main application module like
angular.module('starter', [
'ionic',
'starter.controllers',
'ConnectionsController',
// etc ...
]);
it means that module starter depends on several other modules, in your case ionic, starter.controllers, ConnectionsController. However, ConnectionsController is the controller name it's not a module. So you don't have to list it as module dependency.
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>
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.