I am not sure why the routing isnt working. View1.html consists of a simple web page and the same goes with view2.html. Both view1.html and view2.html are in a folder called partials and "angular-route.js" and "angular-route.min.js" are in a folder called node_modules in home folder. I am using ubuntu 14.04.
<script src="scripts/angular.min.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config( function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController' ,
templateUrl: 'partials/view1.html' //
})
.when('/view2',
{
controller: 'SimpleController' ,
templateUrl: 'partials/view2.html'
})
.otherwise({ redirectTo : '/' })
})
demoApp.controller('SimpleController', function ($scope)
{
$scope.customers = [{name:'nihal',city:'hyderabad'},{name:'nihal',city:'mumbai'}, {name:'john',city:'bangalore'}]
$scope.addCustomer = function() {
$scope.customers.push({name: newCustomer.name , city: newCustomer.city })
}
})
</script>
</body>
</html>
You have incorrect syntax in routes, comma is missing after controller property.
Related
AngularJS v1.7.4
I am new to AngularJS and creating a simple app but not sure why one route works (shows the static html from a partial file as well as {{message}} correctly), but the other two routes only show static html and not {{message}} which is being set using $scope.message.
Additionally errors such as
The controller with the name 'ContactController' is not registered.
and
The controller with the name 'AboutController' is not registered.
Are seen in the console when trying to go to 'Contact' and 'About' pages respectively.
For the three routes I have three html files and three controller files. I have made sure to include <body ng-app="gmsApp">.
Files are being loaded as
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/controllers/about.controller.js"></script>
<script src="./js/controllers/contact.controller.js"></script>
<script src="./js/controllers/home.controller.js"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet" />`
Following advise from other posts I am using the 'regular' js files and not 'minified' versions of angular and angular-route.
The code in main html file is:
var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutController'
}).
when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactController'
}).
otherwise({
redirectTo: '/home'
});
}]);
/js/controllers/home.controller.js
angular.module('gmsApp.controllers', [])
.controller('HomeController', function ($scope) {
$scope.message = 'Main page of the app';
});
/js/controllers/about.controller.js
angular.module('gmsApp.controllers', [])
.controller('AboutController', function ($scope) {
$scope.message = 'This is about us page';
});
/js/controllers/contact.controller.js
angular.module('gmsApp.controllers', [])
.controller('ContactController', function ($scope) {
$scope.message = 'Contact Us page ...';
});
/partials/home.html
<div ng-controller="HomeController">
<h3>Home page</h3>
<p>{{message}}</p>
</div>
/partials/about.html
<div ng-controller="AboutController">
<h3>About Us</h3>
<p>{{message}}</p>
</div>
/partials/contact.html
<div ng-controller="ContactController">
<h3>Contact Us</h3>
<p>{{message}}</p>
</div>
The error come from the fact that you are recreating your module in each of your controller. This line should be present in only one of your files (could be your main file):
angular.module('gmsApp.controllers', [])
Then in "/js/controllers/home.controller.js,"/js/controllers/about.controller.js" and "/js/controllers/contact.controller.js", you should use it like this:
angular.module('gmsApp.controllers')
Note that this time you don't use the "[]". The difference between the two is that here you will access the already created module.
From angularjs docs:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
Why "main" is not being displayed in the URL ? Here is the Plunker.
index2.html is the working file. I have modified index2.html to index.html to include routing but it's not working.
app.js has routing configuration
(function() {
var app1 = angular.module('plunker', ["ngRoute"]);
app1.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "ControllerFile.js"
})
.otherwise({
redirectTo: "/main"
})
})
} ());
I have a problem with the function $ locationProvider.html5Mode (true), this is the setting:
var app = angular.module("app", [
"ngRoute",
"ngAnimate"
]);
// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.
when("/archive", {
templateUrl: "archive.php",
controller: "archiveCtrl",
animate: "slide-left"
}).
when("/single", {
templateUrl: "single.php",
controller: "singleCtrl",
animate: "slide-left"
}).
otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
});
In the head tag:
<head>
<base href="/">
</head>
The root of the site is
site.com/main.php
Where main.php contains the div ng-view
Any idea why it does not work?
here is a working example I created on JSFiddle, I removed the templateUrl and use template instead, but it shouldn't matter in this case(you are asking how does html5mode and base work)
html
<div ng-controller="mainCtrl">
single
archive
<div ng-view></div>
</div>
Javascript
var app = angular.module("myApp", [
"ngRoute"
])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/archive", {
template: "<p>archive</p>"
})
.when("/single", {
template: "<p>single</p>"
})
.otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
}])
.controller("mainCtrl", function mainCtrl($scope, $location) {
$scope.$location = $location;
});
JSFiddle
I have created a web api project and after that i am going to create single page application but getting some error so i am posting my code below:
My angularjs code:
var app = angular.module('myApp', ['ngRoute']);
app.config('$routeProvider', function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'tpl/users.html',
controller: 'myController'
})
.when('/addusers', {
templateUrl: 'tpl/addusers.html',
controller: 'addusers'
})
.when('/admin',{
templateUrl: 'tpl/admin.html',
controller: 'admin'
});
});
app.controller('myController', function ($scope) {
$scope.message = 'Home';
});
app.controller('admin', function ($scope) {
$scope.message = 'Admin';
});
app.controller('addusers', function ($scope) {
$scope.message = 'addusers';
});
and my html page:
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="myController">
Home
Admin
Add Users
<br />
<div ng-view> </div>
</body>
</html>
and getting below angularjs error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=%5Bng%3Aareq%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0AD%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A450%0ADb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A106%0AWa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A193%0Asc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A32%3A423%0Ad%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A34%3A398%0Ae%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A386%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A67%0Aoe%2Fc%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A223%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A207%0AEventListener.handleEvent*sb%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A143%3A241%0Aa%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A150%3A402%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A149%3A381%0AS.prototype%5Bc%5D%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A154%3A57%0AS.prototype.ready%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A122%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A447%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A2%0A
Your controller definitions (dependency injection parts) is wrong.
You can follow the john papa's style guide for angular
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/',{
templateUrl: 'tpl/users.html',
controller: 'myController'
}).when('/addusers', {
templateUrl: 'tpl/addusers.html',
controller: 'addusers'
}).when('/admin',{
templateUrl: 'tpl/admin.html',
controller: 'admin'
});
}]);
app.controller('myController', ['$scope', function ($scope) {
$scope.message = 'Home';
}]);
app.controller('admin', ['$scope', function ($scope) {
$scope.message = 'Admin';
}]);
app.controller('addusers', ['$scope', function ($scope) {
$scope.message = 'addusers';
}]);
I am working on a SPA in angular as well and got the same error very recently,
This is something that i found to happen when i was using ngRoute. ngRoute works but it seems very messy to me and kept giving me this error and some other ones.
I was probably just using it wrong, but i recommend you switch to "UI-Router"
It should clean up the way you do routing and make it easier to handle objects throughout your project.
You're using the config wrong. You don't need to use '$routeProvider' as a parameter.
Incorrect
app.config('$routeProvider', function ($routeProvider) {
});
Correct
app.config(function ($routeProvider) {
});
Also, Angular no longer uses ngRoute out of the box. It's a separate file you need to include (note the version):
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js
I have MVC application, I want make routing for the following URL
http://localhost:2668/Home/User/1
I try
.config(function ($routeProvider, $locationProvider) {
//here we will write code for implement routing
$routeProvider
.when('#/Home/User/:userid', {
templateUrl: '/AngularTemplates/User.html',
controller: 'UserController'
})
.otherwise({ // This is when any route not matched
controller: 'ErrorController'
}) })
And then the UserController as below:
.controller('UserController', ['$scope','$routeParams', function ($scope,$routeParams) {
// $routeParams used for get query string value
//var loc = window.location.href;
//var id = loc.slice(loc.lastIndexOf('/'), loc.length).split('/')[1];
$scope.Message = "This is ORDER Page with query string id value =" + $routeParams.userid;
}])
But I always get "undefined" for the para $routeParams.userid
What is wrong in my code? Please help thanks!
Here is a working example:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
user 11
user 12
<div ng-view></div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config([
'$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$routeProvider
.when('/Home/User/:userid', {
template: '<pre>{{ message }}</pre>',
controller: 'UserController'
});
}]);
app.controller('UserController', ['$scope','$routeParams', function ($scope, $routeParams) {
$scope.message = "userid = " + $routeParams.userid;
}]);
</script>
</body>
</html>
JSBin http://output.jsbin.com/geluli
You may read more about default router here (nice examples + tests) https://docs.angularjs.org/api/ngRoute/service/$route