I want to know if its possible to change the master page which is used by ngroute for specific pages. For example, I want to display different master page or exclude completely the master page for specific pages but still maintain the url structure.
Example:
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/views/home/index.html"
})
.when("/ourteam", {
templateUrl: "/views/home/our-team.html",
title: "Our Team"
})
.when("/login", {
templateUrl: "/views/home/login.html",
title: "Login",
countroller: "loginController"
});
$routeProvider.otherwise({ redirectTo: "/home" });
$locationProvider.html5Mode(true);
});
Url redirect works fine but the actual layout is messed up because the login page has different markup. Is it possible to switch to another master page for specific pages?
If you want different Layout for different routes than I guess you have to switch from ngRoute to uiRouter as uiRouter is more flexible in terms of creating routes and associating views to it.
There is a very nice tutorial given by Tim Kindberg on youtube for the same, I am sharing the link below just go through it.
Link:https://www.youtube.com/watch?v=dqJRoh8MnBo
Related
I'm new to Angularjs and have sat through many tutorials to improve my knowledge. All tutorials show me how to use $routeProvider to load templates into view. However they only show me examples that assume the routes are known and I would like to learn how to dynamically create those routes so I can pull a list of unknown nav items from the db and create those routes in a loop.
So, typically a tutorial will show;
$routeProvider.when('/', {
templateUrl : 'views/home.html',
controller : 'mainController'
})
But what if I don't know what those routes will be in advance?
Unfortunately you can't create routes dynamically. You can only configure your routes in the module.config(). I think you search for routes with rest parameters.
Here an quick example with a list view and a detail view that shows one item of the list. Assume the backendService to be defined. The resulting url for the list is .../#/list and for the detail view of an item with the id 12345 the url is .../#/list/12345. Note that all route params are interpreted as strings. So routeParams will be {id: "12345"}.
In the angular phonecat step #9 is a good example of angular router.
angular.module('app').config( function($routeProvider) {
$routeProvider.when('/list',
{
templateUrl: 'views/list.html',
controller:'listCtrl'
}
).when('/list/:id',
{
templateUrl: 'views/detail.html',
controller: 'detailCtrl'
})
});
angular.module('app').controller('detailCtrl',
function($scope, $routeParams, backendService) {
$scope.items = backendService.getItemById($routeParams.id);
}
);
I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
And my html file contains
<div id="menu"></div>
<div ng-view></div>
Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..
I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.
If you are using Apache server this should work run this in terminal
sudo a2enmod rewrite && sudo service apache2 restart
works for me
Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.
Actually when you are pressing F5 from keyboard, it is hitting to your server for that page, not angular because you don't have any # sign between your URL. For angular, URL should be like as - localhost/#/Page
Use html5mode
A great article about it here
to init its very simple
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
When you "reload a page", you whole app will reinit again. That means if you are not on the main page, and the sub route you are at missing some data, you will likely get an error.
You should look into resolve attribute for routes, so for example,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
that way no matter where your app is reloaded, it will have the necessary data to boot the page
Just keep the # in URL, you don't have to put extra effort to manage reloads etc. you can think a "#" in URL represent a specific state in single page application.
Otherwise it can be managed by module rewriting, that map the url with hashed version URL internally for AngularJs app.
My project was built on PHP and has some pages on Angular JS. There are three types of accounts in system. Authorization system is based on PHP/Mysql.
For each account I have personal.html template. When user is logged via account(1) I need to show him template /public/html/personal.html from route, if account(2) - template /public/html/personal2.html .etc. So, path /profile/personal/:type is the same for each.
How I can manage this accounts pages with a good level of security?
I use routeProvider:
$routeProvider
.when('/profile/personal/:type', {
templateUrl: '/public/html/personal.html',
controller: 'ProfileController'
})
You can use a function as templateUrl parameter and use it to select the template for the current account type:
$routeProvider
.when('/profile/personal/:type', {
templateUrl: function(params) {
switch(params.type) {
case 1:
return: '/public/html/personal1.html';
}
},
controller: 'ProfileController'
});
I have a SPA that will display data from an API in two separate parts of the page. One section displays products and prices. This information will remain on the page. The other section is a basic CRUD view. It allows the user to create new selections, read their selections, edit their selections, and remove their selections. I'm trying to determine the best way to display these two views. The CRUD section uses ng-view. Should the price/product section use a directive, a separate controller, or should I break up the page into two modules?
I'm new to Angular, and want to make sure that I do things right to avoid unforeseen issues down the road.
HTML:
<div ng-view="">
<!--user selections go here -->
</div>
<!--Product/Price info will go here. Unsure whether to insert ng-app="new module", ng-controller="new controller", or a directive with its own element-->
Javascript for user selections view:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/list.html',
controller: 'ProjectListCtrl as projectList'
})
.when('/edit/:projectId', {
templateUrl: 'views/detail.html',
controller: 'EditProjectCtrl as editProject'
})
.when('/new', {
templateUrl: 'views/detail.html',
controller: 'NewProjectCtrl as editProject'
})
.otherwise({
redirectTo: '/'
});
});
Factory for CRUD / user form section:
myApp.factory('Projects', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL+'/projects')).$asArray();
});
Factory for product list/price section:
myApp.factory('Products', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL + '/products')).$asArray();
});
The native Angular router is limited when creating complex and nested UIs, but AngularUI Router is a great alternative and very widely used. If you want to include multiple views in your interface then this is the way to go. It's not much more complicated than the native router but the wins are huge.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
Here's a Plunker to demo your particular case: http://plnkr.co/edit/xZD47L?p=preview
With ui-router you can name views
<div ui-view="viewName"></div>
and include templates and controllers in the corresponding ui-router configuration
myApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home',{
url: "/",
// list your views
views: {
"viewName": {
templateUrl: "viewName.html" ,
controller: "viewNameCtrl"
}
}
})
});
Checkout this Wiki for Multiple Named Views.
I hope this helps.
so, i'm writing a really simple application using angular, and i basically just want to be able to route my requests to their respective pages but also use those pages as views such that the following views:
-- html
main-app.ejs
-- views
faq.ejs
about.ejs
home.ejs
register.ejs
are available by going through the main app, but the user can also get there just by putting in the following respectively:
/faq
/about
/home
/register
any ideas?
I was thinking something like this could work:
app.get('/views/:viewName', routes.view);
app.get('/:app?', routes.app);
Where I basically just point the request to the main app, but that doesn't work at all because when the page loads and the following router takes hold:
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/views/home',
controller: 'sliderController'
}).when('/faq', {
templateUrl: '/views/faq',
controller: 'faqController'
});
});
the default page always loads