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;
});
});
Related
I have web application where I need to load a template with different parameters like.
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=' + FormID,
controller: 'FormController'
})
I am not able to get the above code working. Can someone tell me how I can fix this issue? I am new to AngularJS and not an expert.
This is the full code.
var app = angular.module('MyApp', ['ui.grid', 'ngSanitize', 'angularTrix', 'ui.codemirror', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'partials/Home.ashx',
controller: 'HomeController'
})
.when('/project/:ProjectID', {
templateUrl: 'partials/Projects.ashx',
controller: 'ProjectController'
})
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=1',
controller: 'FormController'
})
.otherwise({ redirectTo: '/home' });
});
We can use $stateParams and templateProvider to load dynamic templateurl
.state('general', {
url: '/{type}',
//templateUrl: 'pages/home.html',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return $templateRequest(tplName);
}
],
// general controller instead of home
//controller: 'homeController',
controller: 'generalController',
controllerAs: 'ctrl'
I have an ng-click on a button to open a modal. When I try to open it, the design open a modal but with the page where I open it. Why is it possible?
$scope.EditPlayer = function (gid) {
var modalIstance = $uibModal.open({
templateUrl: "/Modal/modalUser.html",
controller: 'UserEditController'
});
}
I think that my routing create some problem...
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', { controller: 'MainController', templateUrl: 'Views/home.html' })
.when('/index', { controller: 'MainController', templateUrl: 'Views/home.html' })
.when('/index.html', { controller: 'MainController', templateUrl: 'Views/home.html' })
.when('/userlist', { controller: 'UserListController', templateUrl: 'Views/userlist.html' })
.when('/useradd', { controller: 'UserAddController', templateUrl: 'Views/useradd.html' })
$locationProvider.html5Mode(true);
})
Anyone can help me? Thanks
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
Is it possible to have a route param in the base url with ngRoute?
<base href="/some/resource/path/:myParameter/" />
together with:
angular.module('myApp', ['ngRoute'])
.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/first', {
templateUrl: 'template.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'template.html',
controller: 'mainController'
})
.when('/third', {
templateUrl: 'template.html',
controller: 'someController'
})
.when('/forth', {
templateUrl: 'template.html',
controller: 'someController'
})
.otherwise({
redirectTo: '/first'
});
$locationProvider.html5Mode(true);
}]);
to get routes of:
/some/resource/path/:myParameter/first
/some/resource/path/:myParameter/second
/some/resource/path/:myParameter/third
/some/resource/path/:myParameter/forth
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();
}
}
});
}]);
}());