I understand how to make a basic single page app with ng-view, and routing the templates into the index.html. However, I want to separate the website into the Home section (views: Home, About, Registration, Login), then when the user logs in they go to a dashboard which has its own set of views. The Dashboard (/dashboard/user:id) and Home Section (/, /about, etc.) would have separate base templates.
Would this just be two separate apps altogether with different base templates? Anyone have experience setting something like that up?
If you are talking about only changing the views you can use the $routeProvider to define your templates, controllers, etc. Have a look at ui-route "Nested States & Views" at https://github.com/angular-ui/ui-router
$routeProvider
.when('/', {
templateUrl: 'template/home/home.tpl.html',
controller: 'LomeCtrl',
controllerAs: 'vm'
})
.when('/dashboard/user:id',{
templateUrl: 'template/dashboard/dashboard.tpl.html',
controller: 'dashboard',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
Another approach you can take it to create a provider to display the template based on user login status.
angular.module('myApp', ['ngRoute', 'loginService'])
.config(['$routeProvider', 'loginCheckerProvider', function($routeProvider, loginCheckerProvider) {
$routeProvider.
when('/', {
templateUrl: (loginCheckerProvider.isLoged()) ? 'loggedin.html' : 'loggedout.html'
//controller: 'aboutCtl',
})
.otherwise({
redirectTo: '/'
});
}]);
And the provider:
(function () {
'use strict';
function loginChecker() {
this.$get = angular.noop;
//Do your logics to check if user is loggedin and add the result to the return below
//toggle the return below between true and false
this.isLoged = function(){
return true;
}
}
angular.module('loginService',[])
.provider('loginChecker', loginChecker);
})();
I created a plunker to test and it is working. To test it go to loginservice.js file and toggle the return to true/false, you will see the template updating.
Related
I am new in Angular.js. I have a simple HTML page (angular layout). I want to ask:-
1: Is it possible to have more than one index pages for the project? If yes, then how?
2: Is it possible to make section dynamic, based on the state url?
(Angular-1)
Thank you all in advance!
Yes you can set partial views and independent controller in angular js. You can set that in your project config. This is a sample implementation.
(function () {
'use strict';
angular.module('YourApp', [
'ngRoute'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controllerAs: 'loginCtrl',
controller: 'loginController'
});
$routeProvider.when('/dashboard', {
templateUrl: 'dashboard.html',
controllerAs: 'dashboardCtrl',
controller: 'dashboardController'
});
$routeProvider.otherwise({
redirectTo: '/login'
});
}]);
})();
Here the login.html and dashboard.html are your partial view file and loginController, dashboardController are your controller for respective views.
I couldn't find any documentation or article on this.
We here at the company I work for have MVC project.
And we build Angular SPA on top of it.
Also we want it to work offline.
So, I need cache. Found $templateCache module in AngularJS.
And trying to implement it.
Since the project is MVC, all the templates I want to load into ng-view are actually MVC partial views and I can load them by calling {Controller}/{Action}.
But the are no examples on internet ho to implement $templateCache in this case.
All the examples show how to use static templates, like mytemplate.html or just strings. This won't work under MVC.
So, I was trying to figure out how to accomplish that, wrote this, for app.ts:
namespace AppDomain {
"use strict";
export let app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", { templateUrl: "Home/Template?name=Main", controller: "Controller", controllerAs: "vm" })
.when("/About", { templateUrl: "Home/Template?name=About", controller: "Controller", controllerAs: "vm" })
.when("/Contact", { templateUrl: "Home/Template?name=Contact", controller: "Controller", controllerAs: "vm" })
.otherwise({ redirectTo: "/" });
});
app.run(function ($templateCache) {
$templateCache.put("Home/Template?name=Main", "Home/Template?name=Main");
$templateCache.put("Home/Template?name=About", "Home/Template?name=About");
$templateCache.put("Home/Template?name=Contact", "Home/Template?name=Contact");
});
}
Obviously this doesnt work. Any suggestions? Thanks.
I have this code from a tutorial that routes to all the pages related to the main type of document in the application:
angular.module('loc8rApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
function config ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationid', {
templateUrl: '/locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.when('/register', {
templateUrl: '/auth/register/register.view.html',
controller: 'registerCtrl',
controllerAs: 'vm'
})
.when('/login', {
templateUrl: '/auth/login/login.view.html',
controller: 'loginCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
angular
.module('loc8rApp')
.config(['$routeProvider', '$locationProvider', config]);
I would like to expand the routing to cover a different type of document. For example, appointments. So a list of appointments along with a details page for the appointments. Would I put all these new style of routes within this $routeProvider.when sequence? Or maybe a new file or new function to handle this routing of a completely new type of content?
The comment about a "new type of document" and new "type of content" throws me off here. You are still just routing to an HTML document/content. It may be a different section of your site, which is what I think you meant by those statements.
With that said how you setup your routing is up to you but there is no reason you can't add the routes to your appointment pages in the same "when" collection. I like all my routes in the same place for maintenance and visibility. But, depending on the size of your app that can make your route file hard to deal with. So it is a little personal preference and conditionally driven.
Also just as an FYI. I would look at using UI-Router instead of the default Angular router. It has more power, but that is just food for thought for you.
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
So I'm trying to learn how to use Angulars routing, following tutorials online, and I can't seem to figure out where I'm going wrong. I have the following code:
var app = angular.module('gamersplane', ['controllers', 'ngCookies', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList'
}).when('/pms', {
controller: 'pmList'
}).otherwise({
controller: 'pmList'
});
}])
var controllers = angular.module('controllers', []);
controllers.controller('pmList', function ($scope, $cookies, $http, $routeParams) {
console.log($routeParams);
});
However, no matter what I do, the controller doesn't get hit. I have otherwise in the router, so isn't that where it should hit if all else fails?
Yes it will hit otherwise but you can only define the redirect path into it and that redirect path will tell the url and the controller to set for the $route.current :-
redirectTo: '/pms'
Doc
You need to add a template to each route:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList',
template: 'test.html'
}).when('/pms', {
controller: 'pmList',
template: 'test.html'
}).otherwise({
controller: 'pmList',
template: 'test.html'
});
}])
squiroids suggestion regarding otherwise was correct, you won't see a change in your test application though.
Routing is meant to be used to navigate between regions of your application. You could have an app with two routes: pms which shows a list of PMs and pms/:box zu view a particular PM Box. The main task for ngRoute is to replace a placeholder in your application (ng-view) with a given template. Without using a template on the individual routes, your $routeProvider will not navigate as expected.
Given you have two views for the regions (pmBox.html and pmList.html), you could configure your $routeProvider zu setup routing like this: https://gist.github.com/kpko/bd0231ccefbaf8c415c7