Why this code not works?
angular.module('routers', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
console.log('1. routes loaded!');
$routeProvider
.when('/', {
controller: 'HomeController'
})
.when('/about', {
controller: 'AboutController'
});
$locationProvider.html5Mode(true);
}])
.controller('HomeController', function () {
console.log('2. HomeController loaded!');
})
.controller('AboutController', function () {
console.log('3. AboutController loaded!');
});
When the page is loaded, the 1. routes loaded! log appears perfectly but the 2. HomeController... log not.
when I type localhost:8000/about in my browse, I receive the following return:
Cannot GET /about
What does this simple code not works?
Here are the changes,
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'AboutController',
controllerAs: 'AboutCtrl'
});
}])
app.controller('HomeController', function () {
console.log('2. HomeController loaded!');
})
app.controller('AboutController', function () {
console.log('3. AboutController loaded!');
});
DEMO
Related
My AngularJs routing always redirects to the home page and always calls HomeController rather than redirecting to /VechileRegistration/Index, VechileRegistration/VechileInward
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: '/home/home.view.html',
controllerAs: 'vm'
})
.when('/VechileRegistration/Index', {
controller: 'HomeController2',
templateUrl: '/home/home.view2.html',
controllerAs: 'vm'
})
.when('/VechileRegistration/VechileInward', {
controller: 'VehicleInwardController',
templateUrl: '/home/VehicleInward.view.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/login'
});
How can I redirect to the right place and call the appropriate controller?
var app = angular.module('ngRoutingDemo', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/login.html',
controller: 'loginController'
}).when('/student/:username', {
templateUrl: '/student.html',
controller: 'studentController'
}).otherwise({
redirectTo: "/"
});
app.controller("loginController", function ($scope, $location) {
$scope.authenticate = function (username) {
// write authentication code here..
$location.path('/student/' + username)
};
});
app.controller("studentController", function ($scope, $routeParams) {
$scope.username = $routeParams.username;
});
});
var app = angular.module('MyApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Home/EmployeeList",
controller: "listController",
})
.when("/Home1", {
templateUrl: "Home/EmployeeTable",
controller: "tableController",
})
.otherwise({
redirectTo: "/Home/Index"
})
.controller("listController", function ($scope) {
$scope.message = "In list controller";
})
});
why on running code TypeError:routeProvider.when(...).when(...).otherwise(...).controller error shows in cosole.
Move the controller registration call out of the config block. There is no $routeProvider.controller
var app = angular.module('MyApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Home/EmployeeList",
controller: "listController",
})
.when("/Home1", {
templateUrl: "Home/EmployeeTable",
controller: "tableController",
})
.otherwise({
redirectTo: "/Home/Index"
})
});
app.controller("listController", function ($scope) {
$scope.message = "In list controller";
})
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location
I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?
I am looking at building a clientside authentication for my angular app. The routing looks like this:
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/customers', {
controller: 'CustomersController',
templateUrl: 'customers.html',
secure: true
})
.when('/login/:redirect*?', {
controller: 'LoginController',
templateUrl: 'login.html'
})
.when('/testing', {
controller: 'TestController',
templateUrl: 'testing.html' })
.otherwise({ redirectTo: '/customers' });
}]);
When I click on the login link it wont let me go to the login page?
See also this plunkr: http://plnkr.co/edit/TVSnCp8AtBKVfcYdWvN2?p=preview
Please update the app.js
(function () {
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/customers', {
controller: 'CustomersController',
templateUrl: 'customers.html',
secure: false
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'login.html'
})
.when('/testing', {
controller: 'TestController',
templateUrl: 'testing.html' })
.otherwise({ redirectTo: '/customers' });
}]);
app.run([ '$rootScope', '$location', 'authService',
function ( $rootScope, $location, authService) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (next && next.$$route && next.$$route.secure) {
if (!authService.user.isAuthenticated) {
authService.redirectToLogin();
}
}
});
}]);
}());