Having a $injector:modulerr error after including ngRoute. Using AngularJS 1.2.26
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {controller: indexController1, templateURL: 'index1.html'});
$routeProvider.when('/view/:id', {controller: indexController2, templateURL: 'index2.html'});
$routeProvider.otherwise({redirectTo: '/'});
});
app.controller('indexController1', function ($scope) { .... }
app.controller('indexController2', function ($scope, $routeParams) { .... }
html template
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="app.js">
</head>
<body>
<div ng-view></div>
</body>
</html>
There are some problems in your code:
The .config
You should use nested .when instead of again define $routeProvider
Name of the controllers between quotes
Missing closing ); in controllers
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index1.html',
controller: 'indexController1'
})
.when('/view/:id', {
templateUrl: 'index2.html',
controller: 'indexController2'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('indexController1', function ($scope) {
});
app.controller('indexController2', function ($scope, $routeParams) {
});
The html
Missing </script> close tag.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="app.js"></script>
Check here a working example ngRoute
Related
I have problem with controller load when I triggered ng-route.
This is my main page:
<!DOCTYPE html>
<html>
<head ng-app="testapp">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>XX</title>
</head>
<body>
<nav ng-controller="defaultnav"></nav>
<div ng-view></div>
</body>
</html>
and this is my app.js file:
var app = angular.module('testapp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/", {
templateUrl: "index.html"
})
.when("/page1", {
templateUrl: "page1.html"
})
})
inside the page1.html I inisiate controller like this:
<div ng-controller="page1">
</div>
<script type="text/javascript">
app.controller('page1', function ($scope) {
// code...
})
</script>
I don't know best practice to handle this. When I code this I got error with [Error, ctrlreg] it says that I have problem about registering controller.
Please give me advice to solve this.
Thanks in advance.
In JS, the app name in line var app = angular.module('enterprise', ['ngRoute']); is enterprise
In HTML, <head ng-app="testapp">, the app name is testapp. Change to <head ng-app="enterprise">
Its best practice to load the java script seperately. so remove js code from html and keep it in seperate file and load it
Click here for working demo in plnkr.
You can use AngularJS ngRoute:
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
})
//otherwise redirect to home
.otherwise({
redirectTo: "/home"
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!!!!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us!.';
});
Below is my code:
Home.html and List.Html
<!DOCTYPE html>
<html ng-app="myApp">
<head >
<title>AngualrJS Controller</title>
</head>
<body >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="HomeController.js"></script>
<script src="AddController.js"></script>
<script src="ListController.js"></script>
<script src="RouteController.js"></script>
List
<div ng-view></div>
</body>
</html>
List.html
<div ng-controller="ListController">List </div>
Below is HomeController.js
var app = angular.module("myApp");
app.controller('myCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
ListController.js
var app = angular.module("myApp");
app.controller('ListController', function ($scope) {
});
Below is routerconfig.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Home.html",
controller: "myCtrl"
})
.when("/list", {
templateUrl: "List.html",
controller: "ListController"
})
});
When I click on List page link is gives below error
"A controller with this name is not registered."
Routing dependency will go only with myApp.
Home Controller ::
var app = angular.module("myApp", ['ngRoute']);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
& routerconfig.js::
angular.module("myApp").
config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Home.html",
controller: "myCtrl"
})
.when("/list", {
templateUrl: "List.html",
controller: "ListController"
})
});
I hope this will work for you.
you wrote 3 times
var app = angular.module("myApp");
remove from ListController.js and from routerconfig.js
write one time into Home Controller in this way:
var app = angular.module("myApp", ["ngRoute"]);
I tried every solution on stackoverflow to make this error go but all to vain..
I am trying to use ngRoute to make SPA.
angular.js:14328 Error: [$controller:ctrlreg] The controller with the name 'loginCtrl' is not registered.
Here is my code
/* route file called controoler.js */
var app = angular.module('mainApp', ['ngRoute']).
config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login/views/loginView.html',
controller: 'loginCtrl'
})
.when('/reward', {
templateUrl: 'rewardManagement/views/reward.html'
})
.otherwise({
redirectTo: '/'
});
}
]);
// loginCtrl in login/controllers/loginCtrl.js
var app = angular.module('mainApp', []);
app.controller('loginCtrl', ['$scope', '$location', function($scope, $http, $location) {
$scope.changeView = function(view) {
$location.path(view); // path not hash
};
}]);
<!-- -------index.html--------- -->
<!DOCTYPE html>
<html lang="en" class="body-full-height" ng-app="mainApp">
<head>
<script src="/controller.js"></script>
<script src="../login/controllers/loginCtrl.js"></script>
</head>
<body>
<div ng-controller="loginCtrl"></div>
<ng-view></ng-view>
</body>
</html>
<!-- -------loginView.html--------- -->
<script src="../login/controllers/loginCtrl.js"></script>
<div ng-controller="loginCtrl">
<button ng-click="changeView('/reward')">Please Bypass this for now</button>
</div>
Please suggest a solution, in my project I will have many links which when clicked should change the ng-view according to the route. And I don't think putting all the .js scripts in index.html is a good idea, shouldn't each partial contain its own .js which also contains the controller?
Here is the working Plunkr
Just did some little changes in your controller code:
app.controller('loginCtrl', ['$scope', '$location', function($scope, $location) {
$scope.changeView = function(view) {
$location.path(view); // path not hash
};
}]);
Also you don't need to add the script again in your loginView.html
I am getting to understand routing and I have a simple application with a couple buttons at the top in the header area. The buttons work well and display the correct information but I've directed that one of the pages (directory.html) use the "myController" controller that I created but instead it continues to give me the curley braces and not the actual scope data. Can someone tell me what I'm doing wrong?
HTML
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Sample app</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>
JS
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
Directory.html
<p>This is my directory page.</p>
<p>{{message}}</p>
Header.html
<div id="menu-bar">
<h1>My Sample App</h1>
<ul>
<li>Home</li>
<li>Directory</li>
</ul>
</div>
Your js file is invalid.
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});
You have placed your controller inside the config module...
In my Javascript file I have the following code:
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
template: ''
})
.when('/user', {
templateUrl: 'pages/user.html'
})
.when('/gallery', {
templateUrl: 'pages/gallery.html'
})
.when('/contacts', {
templateUrl: 'pages/contacts'
})
.otherwise({
redirectTo: '/'
});
}]);
Now, through ng-route I have another page called user.html that is simple this:
<div ng-controller = "Ctrl2">
{{user.name}}
</div>
<script type="text/javascript">
angular.module('allApps').controller('Ctrl2',function($scope){
$scope.user={name:"Jim", lastname:"Smith"};
});
</script>
In my HTML file I have the following code:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src ="js/script.js"></script>
<link href="css/style.css" rel="stylesheet">
But it doesn't work. Error:
Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=Ctrl2&p1=not%20a%20function%2C%20got%20undefined
G/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
qb#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:131
Qa#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:218
Xe/this.$get</<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:80:210
w#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:177
D#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:61:30
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
ngViewFillContentFactory/<.link#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:986:7
ea#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293
D#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
R/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
k#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377
update#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:936:25
lf/this.$get</r.prototype.$broadcast#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:136:157
commitRoute/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:619:15
f/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:119:129
lf/this.$get</r.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:133:309
lf/this.$get</r.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:130:404
lf/this.$get</r.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:134:76
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:87:442
T#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:92:50
Uf/</w.onload#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:93:78
<div class="ng-scope" ng-view="">
What am I doing wrong?
Thanks in advance.
You can't add controllers after angular is already bootstrapped, unless you use some kind of fancy lazy-loading. Therefore, adding a controller from a script block on a view is just not going to work.
You can have multiple controllers in differenct script files. But the script file should copile first before you start rendering the view.
Try binding your controller to the template view in the routes config
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
template: '',
controller: 'Ctrl1'
})
.when('/user', {
templateUrl: 'pages/user.html',
controller: 'Ctrl2'
})
.when('/gallery', {
templateUrl: 'pages/gallery.html',
controller: 'Ctrl3'
})
you are not closing your first function well. It should
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.controller('Ctrl1',[ '$scope', function ($scope){
...
}]);