I'm building an App that requires authentication and I need to check if the user is authenticated when changing routes before instantiating the route Controller, so I need a function to retrieve the logged user from the server with $http that I need to call in the resolve property of the 'when' and then pass the retrieved user to the controller. How can I declare the function?
This is my app.js
angular.module('MasterToolsApp', ['ui.bootstrap', 'ngRoute', 'ngSanitize', 'ngResource', 'ngAnimate', 'dialogs.main', 'toasty']);
angular.module('MasterToolsApp')
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/login'
})
.when('/login', {
templateUrl : 'dist/templates/login.html',
controller : 'LoginController',
resolve : ?
})
.when('/home', {
templateUrl : 'dist/templates/home.html',
controller : 'HomeController',
resolve : ?
})
.when('/entries', {
templateUrl : 'dist/templates/entries.html',
controller : 'EntriesController',
resolve : ?
})
.otherwise({ redirectTo: '/login' });
}]);
I found the answer in another question: Related Question
The resulting code is this:
angular.module('MasterToolsApp', ['ui.bootstrap', 'ngRoute', 'ngSanitize', 'ngResource', 'ngAnimate', 'dialogs.main', 'toasty']);
var Helpers = {
checkAuthentication: function($http) {
return $http(
{
url : '/auth',
method : 'GET',
headers : {'Content-Type': 'application/x-www-form-urlencoded'},
timeout : 10000
}
);
}
};
angular.module('MasterToolsApp')
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/login'
})
.when('/login', {
templateUrl : 'dist/templates/login.html',
controller : 'LoginController',
resolve : {
user: ['$http', function($http) {
return Helpers.checkAuthentication($http);
}
]
}
})
.when('/home', {
templateUrl : 'dist/templates/home.html',
controller : 'HomeController',
resolve : {
user: ['$http', function($http) {
return Helpers.checkAuthentication($http);
}
]
}
})
.when('/entries', {
templateUrl : 'dist/templates/entries.html',
controller : 'EntriesController',
resolve : {
user: ['$http', function($http) {
return Helpers.checkAuthentication($http);
}
]
}
})
.otherwise({ redirectTo: '/login' });
}]);
Related
In my controller, I have a redirection like this, from the signin page to the index page.
var loginApp = angular.module('angularRestfulAuth', ['ngCookies', 'ngStorage',
'ngRoute',
'angular-loading-bar']);
loginApp
.controller('HomeCtrl', ['$rootScope', '$scope', '$location','$cookies','$window', 'Main', function($rootScope, $scope, $location,$cookies, $window,Main) {
$scope.signin = function() {
var formData = {
username: $scope.username,
password: $scope.password
}
Main.signin(formData, function(res) {
if (res.type == false) {
alert(res.data) ;
} else {
//location.href='/index';
$window.location.assign('/index');
}
}, function() {
$rootScope.error = 'Failed to signin';
})
};
app.js looks like,
angular.module('angularRestfulAuth', [
'ngStorage',
'ngRoute',
'angular-loading-bar'
])
.config(['$routeProvider', '$httpProvider','$cookies','$locationProvider', function ($routeProvider, $httpProvider,$cookies,$locationProvider) {
$routeProvider.
when('/index', {
templateUrl: 'app/partials/index.html',
controller: 'myController'
}).
when('/signin', {
templateUrl: 'app/partials/signin.html',
controller: 'HomeCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
If I use, location.href='/index';
then,
http://localhost:5000/index
Error:Cannot GET /index
If I use, $location.url('/index');
then ,
http://localhost:5000/#/index
But still showing the signin page, instead of index page.
I try to define stateParams in the controller, but it returns me an empty object {}
My app.js:
angular.module('testApp', ['ui.router','ngResource'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'views/header.html'
},
'messages': {
templateUrl : 'views/messages.html',
controller : 'MessageController'
},
'chat': {
templateUrl : 'views/chat.html',
controller : 'ChatController'
},
'footer': {
templateUrl : 'views/footer.html'
}
}
})
.state('app.chat', {
url: ':id'
});
$urlRouterProvider.otherwise('/');
})
My controller.js:
angular.module('testApp')
.controller('IndexController', ['$scope', '$stateParams', function($scope,$stateParams) {
$scope.chosenMessage = $stateParams;
}]);
And my template:
<div ui-view="messages" class="col-xs-6"></div>
<div ui-view="chat" class="col-xs-6"></div>
I need an id from StateParams to define choosen message and chat content for the message.
The solution:
I have defined $state instead of $stateParams, and check for $state.params.id to get current state.
This is how I am doing .Here is my code.
I need to have specific function for each route
var App = angular.module('App', ['ngRoute']);
App .config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'mainController'
});
});
I guess you want to use the 'resolve' function. Try like below
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController',
resolve: {
val: function() {
// do whats needed here
return true;
}
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'mainController',
resolve: {
val: function() {
// do whats needed here
return true;
}
})
Currently I am able to add routing mechanism in AngularJs with the following code :
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/login', {
templateUrl : '/templates/login.html',
controller : 'login'
});
});
What I need is an url in the format like /app/:appname which should fetch template called /template/:appname.html. I know that the appname can be accessed from controller using :
$routeParams.appname;
But how can I render template based on that parameter ?
You could do this:
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/app/:appname', {
templateUrl : '/templates/app-template.html',
controller : 'AppCtrl',
resolve: {
appPath: function ($route) {
return $route.current.params.appname;
}
}
})
});
in AppCtrl,
App.controller('AppCtrl', AppCtrl);
AppCtrl.$inject = [
'$scope'
'appPath'
];
function AppCtrl($scope, appPath) {
$scope.template = appPath + '.html';
}
in app-template.html, use ng-include as such
<div ng-include src="template"></div>
Hope this helps.
templateUrl can be use as function which returns a url.
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/:appname',{
templateUrl: function(params){
return "templates/"+params.appname +".html"
},
controller: 'Ctrl'
});
});
here is my code for route provider
var externalapp = angular.module('Example', [ ]);
externalapp.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/name', {
templateUrl : 'views.html',
controller: viewController'
})
.otherwise({
redirectTo: '/notavailable'
});
} ]);
This is not working,it is not loading my html file. Is there anything wrong?
You should inject "ngRoute".
var externalapp = angular.module('Example', [ "ngRoute" ]);
externalapp.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/name', {
templateUrl : 'views.html',
controller: viewController'
})
.otherwise({
redirectTo: '/notavailable'
});
} ]);
For your Info: always see console log for errors.