Can anyone point me in the right direction on how to make a "404 - page not found" tutorial for a Single page app in angularJS.
Or even better explain how this can be achieved.
There doesn't seem to be much on the internet regarding this.
In an Angular SPA using the native router, if a route is not found it will hit the $routeProvider.otherwise() method thus loading a view for a route that would have typically 404'ed if delivered from a server.
angular.app('application', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
// If route is not configured go to 404 route
$routeProvider.otherwise('/404');
$routeProvider.when('404', { /* route configuration */ });
});
The only disadvantage here is that the URL pushstate is also changed, however that would have typically happened anyway if redirected to a custom 404 by a server.
I would not look at it as 404 page.
In your SPA (Single page app) you could make multiple API calls that independtly update widgets on a dashboard, which 9 out of 10 are successful (200's) and one fails (404), in that case you do not want to redirect users.
As David Barker said you have a otherwise that is a catch-all page.
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.template.html',
controller: 'LoginController'
}).
when('/', {
templateUrl: 'dashboard.template.html',
controller: 'DashboardController'
}).
otherwise({
redirectTo: '/'
});
}]);
So if a user enters a incorrect route then go to the dashboard, the only problem is feedback:
1: You need a messaging service to feedback that the actual API 404 has had an error response and that can be managed using a interceptor, directive and model.
2: You can feedback a error message by using a run method and the same directive and model that look for $routeChangeError then adds a error message
I hope that helps.
Related
Struggling to work something out when using Angular to connect to the Office 365 API.
I am writing a back end application to extract email attachments from a specific user mailbox and then upload the attachment into a third party tool.
This works perfectly and I am having no problems with this, however at the moment, it requires the user to keep a browser open on the site to allow this to work as the user is required to login to create the OAuth token.
I want to automate this process by storing the OAuth token from an initial login and I am not sure how I would go about doing this.
I am assuming the following would need to be changed but I am not sure to what:
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController',
controllerAs: 'home',
requireADLogin: true
})
.otherwise({
redirectTo: '/'
});
Let me know what else you may need to know
I have purchases an Angular JS theme and started developing our application. The $routeProvider of that app looks like this:
$routeProvider
.when('/', {
redirectTo: '/dashboard'
})
.when('/:page', {
templateUrl: function($routeParams) {
return 'views/'+ $routeParams.page +'.html';
},
controller: 'PageViewController'
})
.when('/:page/:child*', {
templateUrl: function($routeParams) {
return 'views/'+ $routeParams.page + '/' + $routeParams.child + '.html';
},
controller: 'PageViewController'
})
.otherwise({
redirectTo: '/dashboard'
});
It is a single page Application
Now I need to integrate login authentication module to it. I'm relatively new to AngularJS. I searched and got lot of articles about login, authentication modules for AngularJS application (few good answers in stack overflow as well) , which I could understand how it works.
But I'm not knowing how to make login work together with the existing application. Either having by having 2 different apps (one for login-authentication, and one for main app) or integrating login as separate angular.module in the main app. Please guide me how should I do...
All the examples have only 2 or 3 items in the $routeProvider including login and logout and the main app page. But in this case, main app page itself has many route providers.
I think I have some basic disconnect here. Please help me understanding the disconnect and integrating login-authentication with the existing application.
I don't know what more code components to add. Will share additional code if required.
Thank you.
I think that it could be a long answer if you are searching for a complete solution. What I could say quickly is that, in my opinion, you have to:
create a login page and put it in views folder
create a specific login Controller
add a route to login page before ':/page' route that uses the login Controller you just created
if your application require authentication, you have to edit PageViewController in order to redirect to login page if the current user is not logged yet.
As I said, it's a quick answer in order to the big work you have to do, but I hope you found this useful.
Bye
I am trying to integrate adal.js in my application. Below is my Code. Could someon please let me know why the authentication is not triggered.
var app = angular.module('TestWebApp', [
'ngRoute',
'testControllers',
'testServices',
'datatables',
'AdalAngular'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalAuthenticationServiceProvider) {
$routeProvider
// Home
.when("/dashboard", {templateUrl: "partials/package.html", controller: "searchCtrl",requireADLogin: true})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "searchCtrl"});
adalAuthenticationServiceProvider.init(
{
tenant: 'test.onmicrosoft.com',
clientId: '23234sf-sdf-------'
},
$httpProvider
);
}]);
And my page url is something link this.
http://localhost:8081/test-ui/#/dashboard
This should go to the Azure login page but its not going.
I think that your tenantID is probably right - it needs to be whatever your AD portal had for the app id URI(minus the name of the application) inside your azure portal. I would also look at the manifest - This is a pretty big deal to have changed. The steps are on the page Omar linked. The SinglePageApp example is a great resource in starting out, and the example is clean, if maybe a bit trivial for the adal portion. You should also check outvittorio's excellent deep dive for a good explanation and great review of adal.js
For me the problem was that I had a login button with a form that was redirecting because of action="#" and so the Azure redirecting was not working.
I just removed the whole action-attribute and it worked
Your issue: I think you have an issue with the link. Your link should be like this:http://localhost:8081/test-ui#/dashboard
Home
ToDo List
Contact List
Adal.Js uses requireADLogin keyword to interrupt the route change event. If you don't see any redirection, it could be related to the routechange event not firing. I suggest to add different routes to your app to verify angular routes first.
General guideline: You can try the sample app first to see if your configurations is working.
Sample app:https://github.com/AzureADSamples/SinglePageApp-DotNet
If you have an issue with config, you can follow the steps in the ReadMe file to setup your app config.
If sample app works for your config and your app is having issues, you can see the calls with Fiddler and further debug into adal.js as well. Login redirect event also broadcasts adal:loginRedirect.
Situation
I scaffolded the application using a yeoman generator angularjs, thus providing me a clean directory structure and framework structure. I'm just learning angularjs and using yeoman is a cleaner way to do things, and soc is pretty much achieved.
Now I am having a problem on where to put things, like services and factories, I am currently dealing with user authentication right now.
Basically
I have two routes as of the moment, one is / and one is /secured. I set this up so that I can really get started playing with authentication.
I found this article about authenticating a user. And I found it really interesting, and I thought I could somehow understand it, and really I understood it, but I think I fail to understand some of the basics of how should factories and services should be used.
What I currently have
First, I do not have a backend service, because the app fails right on and writing a service won't be necessary right now, I can just write a simple php script that returns 401 status or 200, but that wont be necessary right now, I want to work on the client side first.
In my app.coffee file
angular.module('myApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config ($routeProvider) ->
$routeProvider
.when '/',
templateUrl: 'views/home.html'
controller: 'HomeCtrl'
.when '/secured',
templateUrl: 'views/secured.html'
controller: 'SecuredCtrl'
resolve:
loggedin: checkLoggedin // this is the wrong one
.otherwise
redirectTo: '/'
.config ($httpProvider) ->
$httpProvider.interceptors.push('httpInterceptor')
In the article, it says create a function that checks if the user is loggedin or not, and in his codebase he made that function inside the config method. And btw, he ain't using yeoman so that pretty much complicate things to me.
I thought that checking loggedin status is a factory or a service's job, so I thought of writing a factor for that like so
angular.module('myApp')
.factory 'checkLoggedin', ($q, $timeout, $http, $location, $rootScope) ->
deferred = $q.defer()
$http.get('api/loggedin').success (user) ->
if user isnt '0'
$timeout(deferred.resolve, 0)
else
$rootScope.message = 'You need to be logged in.'
$timeout(
() -> deferred.reject(),
0
)
$location.url '/login'
What is the proper way of doing this?
You can use the awesome angular-http-auth module - https://github.com/witoldsz/angular-http-auth
All you need to do is listen for the event 'auth-loginRequired' at the app controller level and then show the login screen.
What i have done (not the best way) is listen for this event in my app controller and redirect to login route -
$scope.$on('event:auth-loginRequired', function() {
$location.path('/login');
});
I am new to angular, and I have a content managed and all I want angular for is to handle the routes and show content.
So I want one route; some thing like .when('/{any?}')
And my backend (laravel) will handle all processing and just send back the content. I dont want to have to pre define my routes.
However because that route covers pretty much anything, it doesn't reload any content.
does anyone have any ideas as to the best approach?
If you don't need to define other routes, You can use "otherwise" command, like Florian was recommended:
var app = angular.module("app", ['ngRoute'])
.config(
function($routeProvider, $locationProvider){
$routeProvider
.otherwise({
templateUrl : 'ng-home',
controller : 'homeController'
});
});
app.controller('homeController', function($scope){
});
Do you make a single test on jsfiddle or plunk? I'm understand your question, but I need a code to help you on your question.