I have the following three angularjs scripts:
/config.js
/authentication/LoginCtrl.js
/authentication/loginFactoyr.js
App ristoreApp is defined in config.js.
//config.js
angular.module('ristoreApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider, $httpProvider) {
// $httpProvider.responseInterceptors.push('httpInterceptor');
$routeProvider
.when('/login', {
templateUrl: 'authentication/login.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'home.html',
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode(true);
});
My controller calls the app by "angular.module":
angular.module('ristoreApp', [])
.controller('LoginCtrl', ['$scope', '$location', 'loginFactory', function($scope, $location, loginFactory){
$scope.authenticate = function() {
loginFactory.login($scope.username, $scope.password)
.then(function(response) {
console.log(response);
$location.path('/home');
}, function errorCallBack(response) {
console.log(response);
$location.path('login');
});
}
}]);
Got the error "Error: ng:areq Bad Argument"
Argument 'LoginCtrl' is not a function, got undefined
Why does it say my controller is not a function? What did I do wrong?
Try this. Remove the quotes on LoginCtrl.
controller: LoginCtrl
Then, define the controller as:
var LoginCtrl = app.controller("LoginCtrl", ["$scope", function($scope) { /* etc... */}]);
I am trying to have two different templates. One that is the landing page for logged out users describing about the business and the other dashboard page for if a user is logged in.
I read on this other stack on how to do this with UI-router. I would like to know the best practice to do something similar like this using ngRoute?
The way it is setup below, is that "/frontdesk" is the dashboard and "/" is the landing page for logged out users. BUT! I want the URL to be the same for whether the user is on the dashboard or is logged out and sent to the landing page! I do not want "/frontdesk", I want "/" for IndexController and FrontdeskController.
Here is my routing JS.
(function () {
'use strict';
angular
.module('resonanceinn.routes')
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/', { // This is the landing Page
controller: 'IndexController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/layout/index.html'
})
.when('/frontdesk', { //This is logged in user that I want to become '/' as well
controller: 'FrontdeskController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/frontdesk/frontdesk.html'
})
.when('/register', {
controller: 'RegisterController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/authentication/register.html'
})
.when('/login', {
controller: 'LoginController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/authentication/login.html '
})
.when('/:username', {
controller: 'ProfileController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/profiles/profile.html'
})
.when('/:username/settings', {
controller: 'ProfileSettingsController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/profiles/settings.html'
}).otherwise('/');
}
})();
Solution!
Thank you everyone for your answers.
Thanks to #ThibaudL for the better solution.
This is how I ended up doing it:
In Routes.js
.when('/', {
controller: 'MainController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/layout/Main.html'
Main.html
<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div>
<div ng-include="" src="'/static/javascripts/frontdesk/frontdesk.html'" ng-if="!auth"></div>
MainController.js
(function () {
'use strict';
angular
.module('resonanceinn.layout.controllers')
.controller('StartController', StartController);
StartController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];
function StartController($scope, $route, $routeParams, $location, Authentication) {
$scope.auth = Authentication.isAuthenticated();
}
})();
So now if the user is Authenticated, it just switches the templates to the users dashboard.
I added a new div with ng-controller to each template so that each template has their separate controllers.
Add another property, like this isGuest: true
.when('/', {
controller: 'IndexController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/layout/index.html',
isGuest: true
})
.... ...............
and
app.run(function($rootScope, $state, Session) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
if (toState.isGuest == true && Session.isAuthenticated()) {
// User isn’t authenticated
// do redirection to guest user
event.preventDefault();
}
if (toState.authentication == true && !Session.isAuthenticated()) {
// do redirection to loggedin user
event.preventDefault();
}
});
});
You can write your own service Session,
Session.isAuthenticated() // returns true or false,based on whether user is guest or loggedin
You can use resolve property to check if user is logged in.
$routeProvider
.when('/somepage' ,{
templateUrl: "templates/template.html",
resolve:{
"check":function($location){
if('Your Condition'){
//Do something
}else{
$location.path('/'); //redirect user to home.
alert("You don't have access here");
}
}
}
})
Inject $locationProvider with your $routeProvider
config.$inject = ['$locationProvider'];
then
function config($routeProvider, $locationProvider ) {
$routeProvider
.when('/', {
controller: 'IndexController',
controllerAs: 'vm',
template: " "
})
...
note its template not templateUrl, also the template is " " note just ""
then in your index controller
.controller('IndexController', function($scope, $route, $routeParams, $location) {
if ($scope.user.loggedIn) $location.path('/:user'); else $location.path('/:visitor');})
note that same path as '/' but /:user for loggedIn users and /:visitor for anonymous
What I would do is :
Main.html
<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div>
MainController.js
(function () {
'use strict';
angular
.module('App.layout.controllers')
.controller('MainController', MainController);
MainController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];
function MainController($scope, $route, $routeParams, $location, Authentication) {
$scope.auth = Authentication;
});
}
})();
there are a couple of things you can do, the simplest being, checking for a logged in status in the beginning of your FrontdeskController and navigate to the homepage if not logged in.
you can also add variables on the route and check for them like in the previous answer.
there are more extreme cases you can do, which I find to be very bad practice, like writing a double state template page, but again, that's not a good thing to do.
I hope this helped
For templateUrl, you can use a function like,
templateUrl : function(parameter) {
if(loggedin) {
return '/static/javascripts/layout/index.html';
} else {
return 'logged out page';
}
}
You can read $routeProvider,
templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
{Array.< Object >} - route parameters extracted from the current $location.path() by applying the current route
Here's a complete solution:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'IndexController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/layout/index.html'
})
.when('/frontdesk', {
controller: 'FrontdeskController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/frontdesk/frontdesk.html',
requireLogin: true
});
});
app.factory('authService', function () {
var service = {
isAuthenticated: false,
loginPageUrl: '/login'
};
return service;
});
app.run(function ($rootScope, $location, authService) {
$rootScope.$on('$routeChangeStart', function (event, next) {
if (angular.isDefined(next) && next !== null && angular.isDefined(next.requireLogin)) {
if (next.requireLogin === true && !authService.isAuthenticated) {
event.preventDefault();
$location.path(authService.loginPageUrl);
}
}
});
});
First Attempt
.
In Routes.js
.when('/', {
controller: 'MainController',
controllerAs: 'vm',
templateUrl: '/static/javascripts/layout/Main.html'
Main.html
<div ng-include="mainTemplate"></div>
MainController.js
(function () {
'use strict';
angular
.module('App.layout.controllers')
.controller('MainController', MainController);
MainController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];
function MainController($scope, $route, $routeParams, $location, Authentication) {
$scope.$watch(function($scope) {
return $scope.mainTemplate = Authentication.isAuthenticated() ? '/static/javascripts/layout/index.html' : '/static/javascripts/frontdesk/frontdesk.html';
});
}
})();
So now if the user is Authenticated, it just switches the templates to the users dashboard.
I added a new div with ng-controller to each template so that each template has their separate controllers.
I've been struggling with using ng-view for my subview of my application. I've followed multiple tutorials and have even checked the routeProvider and locationProvider attributes to ensure that they were pointing to the correct path.
index.html
<html ng-app="elephantApp">
...
<div id="view" ng-view>{{$scope.message}}</div>
...
</html>
application.js
/*
Main AngularJS for Elephant Blog App
*/
var elephantApp = angular.module("elephantApp", ["ngRoute", "ui.bootstrap"]);
elephantApp.config(function ($routeProvider, $locationProvider){
$routeProvider
// Home
.when('/', {
templateUrl: "app/partials/home.html",
controller: "ElephantController"
})
.when('/about', {
templateUrl: 'partials/about.html',
controller: 'PageCtrl'
}) ;
$locationProvider
.html5Mode(true);
});
elephantApp.controller("ElephantController", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.message = {message: "Hi"};
});
elephantApp.controller("PageCtrl", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content';
$scope.model = {message: "Hey!"};
});
/*
function ElephantController($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.model = {message: "Hey"};
}
*/
So I have no idea what's going on at all.
I have even tried to do code like:
// Pages
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
.when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"})
.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
// Blog
.when("/blog", {templateUrl: "partials/blog.html", controller: "BlogCtrl"})
.when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"})
// else 404
.otherwise("/404", {
templateUrl: "partials/404.html",
controller: "PageCtrl"
});
I would like to use the above code as it is what I mainly want to do. Though it isn't working. The ng-includes work but not my ng-views. Am I missing something?
Thanks.
By default, a route in angular is the hash in the URI path after #, for example http://app/#/about. By setting $locationProvider.html5Mode to true how you done, we can write without # http://app/about, but need that server always returning index.html. For this purposes you can use, for example, Express server: http://www.seankenny.me/blog/2013/08/05/angularjs-in-html5-mode-with-expressjs/
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();
}
}
});
}]);
}());
I've tried multiple solutions found on SO but I'm obviously missing something fundamental as no matter what I try I cannot get the particle view to change on submission of a form (or click of a button).
Here's the code:
propertyControllers.controller('HomeCtrl', ['$scope', 'SearchData', '$location',
function($scope, SearchData, $routeParams, $location) {
SearchData.set('postcode', $scope.postcode);
SearchData.set('radius', $scope.radius);
SearchData.set('minBeds', $scope.minBeds);
SearchData.set('minPrice', $scope.minPrice);
$scope.submit = function() {
$location.path('/properties');
}
}]);
And in the home.html partial
<input type="submit" class="topcoat-button--cta" value="Search">
My routing config
var propertyApp = angular.module('propertyApp', [
'ngResource',
'ngRoute',
'propertyControllers'
]);
propertyApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/properties', {
templateUrl: 'partials/property-list.html',
controller: 'PropertyListCtrl'
}).
when('/properties/:propertyId', {
templateUrl: 'partials/property-detail.html',
controller: 'PropertyDetailCtrl'
}).
otherwise({
redirectTo: 'home'
});
}]);
Could someone point me in the right direction? The docs seem overly complex and all the simple examples I've found do what I'm doing...
The parameters in string form and the actual parameters don't match:
controller('HomeCtrl', ['$scope', 'SearchData', '$location',
function($scope, SearchData, $routeParams, $location)
You forgot to add '$routeParams' in the array, before '$location'.