I planned to add an admin panel which use a different layout template for angularjs and expressjs.
For example, the mean stack now defined to use $stateProvider as route but it will work globally.
$stateProvider.state('access home', {
url: '/home',
templateUrl: '/views/index.html'
})
That means when I call localhost/#/home and localhost/admin/#/home would get the same template url.
But what I want is that the route and admin panel route should not have such conflict and render differently for even the same route.
I am new to use angularjs and please give a help. Thanks a lot!
Related
I have two routes added to my NodeJS backend server app.js file as follows:
// Add the routes
app.get('/provision', ...);
app.get('/', ...);
Either of these routes gives full access to all the routes defined in AngularJS:
function routes($routeProvider){
$routeProvider
.when('/list',
{
templateUrl: 'sections/list/list.tpl.html',
controller: 'listController',
controllerAs: 'listCtrl'
})
.when('/overview',
{
templateUrl: 'sections/overview/overview.tpl.html',
controller: 'overviewController',
controllerAs: 'overviewCtrl'
})
...
Just for example: I would like to control for "/provision" route in NodeJS to be able to access only "/list" route in AngularJS and for "/" route in NodeJS to be able to access only "/overview" route in AngularJS.
Currently in my code, I am able to access all the AngularJS routes from browser using "/provision" or "/" route defined in NodeJS. I would like to access only certain angularJS routes for "/provision" and the rest with "/" route. How can I control that?
If you're using angular routing, you probably don't need to be using anything but the * route in Node except for api calls. You can use the stateChangeStart lifecycle method to determine if the user should be allowed to an angular route however. Some explanation of how to do this is found here UI- Router -- run function on every route change -- where does the state name live?
So to reiterate you wouldn't use both node and angular to handle routing. You'd have a * route which will allow ui router to handle all of the routing. You can use stateChangeStart to determine if the user is allowed to go where they are trying to go, and if not you can redirect them.
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.
I have a page in my Angular app that I need to redirect to a subdomain. So if the user visits /latino, they should be redirected to "spanish.mysite/latino". I am new to Angular and I see the redirectTo function for the router but this will not let me redirect to a subdomain. When I add
redirectTo: "latino.localhost:3000/latino",
The url I get is "http://localhost:3000/latino.localhost/latino". Is it possible to do this without the UI router?
It seems like you want it to go to the "/latino" endpoint. If so, you just need to change your code to:
redirectTo: "latino"
This will give you the url:
localhost:3000/latino
My solution to this was to use an external redirect in a route filter. This is required because the Angular router considers spanish.localhost:3000 to be an external URL due to the subdomain.
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
Im working on porting a project over to an angular based SPA. Its currently a more "traditional" node/locomotivejs app that serves up templates from the server side (never known the proper term for this).
The projects too large to to migrate all at once, so we are converting it to angular a page at a time.
My problem: if you load the angular part of the app, everything works fine. You can go to the angular routes correctly. However if you then go to a non-angular route (that should be handled serverside), then nothing loads (the ng-view goes blank, rather than a whole new template being loaded up). If you go to a serverside route first or hit refresh, the page loads correctly.
My guess is that angular is trying to handle these routes, and i am unsure how to get it to let the server take back over.
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/something/page1', {
templateUrl: '/page1.html',
controller: 'page1Ctrl'
});
$routeProvider.when('/something/page1/subpage', {
templateUrl: '/subpage.html',
controller: 'subpageCtrl'
});
}]);
this is my angular routeProvider. No "otherwise" specified. Serverside I have something like:
this.match( '/someOtherPage', 'someOtherPage#showstuff');
If i go to /someOtherPage directly, it loads correctly from the serverside. If i go to /something/page1, then go to /someOtherPage, it does not seem to contact the server.
Because you are using angular html 5 mode angular cannot tell the difference between a route that you want angular to handle, and one you don't. I think you need to tell angular to ignore certain routes. Looks like this is what you are looking for:
https://docs.angularjs.org/guide/$location#html-link-rewriting
So change your links to non-angular pages to use a target.
ex. link