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";
})
Related
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
I'm using uglify to minify my angular files. Where do I use the $inject method in my app.js file?
(function(){
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'HotelsController',
templateUrl: 'js/views/hotels.html'
})
.when('/hotel/:hotelId',
{
controller: 'HotelController',
templateUrl: 'js/views/hotel.html'
})
.otherwise({ redirectTo: '/' });
})
})();
I think you mean how to remain injectables in minification using $inject?
If yes, then:
(function(){
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(configFunction);
function configFunction ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'HotelsController',
templateUrl: 'js/views/hotels.html'
})
.when('/hotel/:hotelId',
{
controller: 'HotelController',
templateUrl: 'js/views/hotel.html'
})
.otherwise({ redirectTo: '/' });
}
configFunction.$inject = ['$routeProvider'];
})();
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'm new to angular and I'm trying to modularlize my app.
My main module gets some other module and I want to use the controller of the injected module in my route definition.
Some simple example would be very helpful!
This does not work:
var app = angular.module('Contacting_App', ['LeadLookup']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main',
{controller: 'MainCtrl',
templateUrl: 'apex/f42_Contacting_Main'}
).
when('/lead',
{module: 'LeadLookup',
controller: 'LeadLkpCtrl',
templateUrl: 'apex/f42_Lead_Lookup'}
).
otherwise(
{redirectTo: '/main'}
);
}]);
This tutorial page may point you in the correct direction docs.angularjs.org/tutorial/step_07
The main things you should look at are:
Module
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
routeProvider
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Controllers
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
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();
}
}
});
}]);
}());