Im working on an angular app. So far I have a layout.html file which holds the app main template. There are some other files in partials/ which are routed by this code:
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: '/partials/index',
controller: 'MainController'
})
.when('/:category/:action?/:id?', {
templateUrl: function (params) {
var allowedParams = ['category', 'action', 'id'];
var paramVals = [];
for (var key in params) {
if (allowedParams.indexOf(key) !== -1) {
paramVals.push(params[key]);
}
}
console.log(paramVals.join('/'));
return '/partials/' + paramVals.join('/');
}
})
.otherwise({
redirectTo: '/'
});
]);
So far it works well. However it will be more complicated. I want to show role-based views. The main difference between each of the views will be the sidebar nav contents. Stating it with an example: if I type www.domain.com/admin-dashboard or www.domain.com/user-dashboard similar views will be rendered, however the options and menus available for each role will be different. My first attempt is to create an admin-layout.html and an user-layout.html. However I dont know if this is a correct solution and I am having issues on writing the code so it uses one template or the other one.
Any ideas will be appreciated.
UPDATE:
Lets say I have a layout.html
<html lang="en">
<head>
</head>
<body ng-app="todoApp" ng-controller="MainController" class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- ####### Layout 1: IF the user is logged in: (show header and sidebar depending on the role) -->
<!-- Header: remains the same regardless the role -->
<header class="main-header"></header>
<!-- Left side column: changes according to the role -->
<aside class="main-sidebar"></aside>
<!-- Content -->
<div class="content-wrapper">
<section ng-view class="content">
</section>
</div>
<!-- ####### !Layout 1: end of Layout 1 -->
<!-- ####### Layout 2: IF the user is not logged in: (show a simple login form in the middle) -->
<!-- Content -->
<div class="content-wrapper">
<section ng-view class="content">
</section>
</div>
<!-- ####### !Layout 2: end of Layout 2 -->
<!-- Footer: remains the same always -->
<footer class="main-footer"></footer>
</div>
</body>
I can determine the logged user role, however depending on the role I want to show different information on the sidebar. That can be accomplished using data-ng-include as Ali suggested below. However if Id wanted to render a different template for a login page as an example (where there is no sidebar nor navbar, just a blank canvas with a footer), or if I wanted to render a 3 column template. How can this be accomplished properly? How can I instruct angular to use a different template given a certain condition. Thanks again.
You can use data-ng-include
For example :
<div class="mainContainer">
<div data-ng-include="{{navBarType}}" >
</div>
And in your controller or directive you can set navBarType as you wish, like navBarUser.html.
Also you can read more about ngInclude
here:
https://docs.angularjs.org/api/ng/directive/ngInclude
Related
I am working of AngularJs v 1 app with ui routing.
My question simply how to set the home page active without clicking the ui-sref link.
I tried with ng-class="active" but it doesn't achieve the task.
<script>
angular.module("myApp",['ui.router'])
.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
$stateProvider
.state("home",{
url:"home",
views:{
'main':{templateUrl:"home.html"}
}
});
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/home");
</script>
<div class="container" style="margin-top: 60px">
<div ui-view="main"> </div>
</div>
Home page
<div class="row" style=" margin-top:100px; " ng-app="app" ng-class="active">
<h1>Home</h1>
</div>
What you are looking for is ui-sref-active
From the doc
A directive working alongside ui-sref to add classes to an element when the related ui-sref directive's state is active, and removing them when it is inactive. The primary use-case is to simplify the special appearance of navigation menus relying on ui-sref, by having the "active" state's menu button appear different, distinguishing it from the inactive menu items.
It will add the active for you if you're currently on the right state.
Markup should look something along the line of
<div class="some-navigation-class">
<a ui-sref="home" ui-sref-active="active">Home</a>
<!-- more nav goes here -->
</div>
<html>
<head>
[...]
</head>
<body>
<div ui-view="body">
<header></header>
<div ui-view="main">
Something you see while angular/templates load.
</div>
<footer></footer>
</div>
</body>
</html>
stuff.js
var app = angular.module("app", ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: '/',
views: {
"main": {
controller: 'HomeController',
templateUrl: 'home.tpl.html'
}
}
});
$stateProvider.state('signin', {
url: '/signin',
views: {
"body": {
controller: 'SigninController',
templateUrl: 'signin.tpl.html'
}
}
});
}]);
I disabled javascript while making the state transition and this is what I see in the browsers inspector...
<html>
[...]
<body>
<div ui-view="body">
<header>[...]</header>
<div ui-view="main">[... home.tpl.html ...]</div>
</div>
<div ui-view="body">
[... signup.tpl.html ...]
</div>
</body>
</html>
I was shocked to see that ui-router actually duplicates the ui-view and creates one view before removing the old view.
Obviously this causes the problem that a combination of BOTH views are showing for at least two seconds while navigating from signin to home. This behavior is the same on all tested browsers. Is there a way to tell/force/trick ui-router into completely removing the template of one view before loading another view?
this is similar to: Preventing duplicate ui-view in AngularJS and the answer may apply to my situation as well.
EDIT
the first div had class="ng-enter ng-enter-active" and the next one had class="ng-leave ng-leave-active" answer follows from that.
I have noticed this as well. This answer: Angularjs - ng-cloak/ng-show elements blink states that ng-cloak is the ticket, but I haven't been able to get it to work in this scenario.
I'm not sure how you are moving between your routes, but you could set a property on the model used by the first view to true and use ng-show on the entire view with that variable. Then when you're ready to move to the second view, set that variable to false. I'm trying to resolve this myself and will report back if I find a more elegant solution.
I am brand new to AngularJs and after following some tutorials I decided to try to implement a one page app into one of my projects. I have it working but I had one question about this code. Could I change what is shown on the first page before they navigate to anything? I don't want it shown on every page just when they first land on it before clicking any links.
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('cfgController',function($scope){
/*
Here you can handle controller for specific route as well.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
</div>
<br/>
<div ng-view>
<!--
This DIV loads templates depending upon route.
-->
</div>
</div>
</body>
The pages load fine and if I try to add something to the index.html under ng-view it doesn't show up on the page.
You want to put the content to show up when a user first hits your site under in your "home.html" page which is linked to your "/" route for "ng-view". When a user clicks a link, they will be taken to a new route, and the code/ will be replaced by the route they selected.
I have the following basic breakdown of my layout:
<body>
<div id="left"></div>
<div id="content" ng-view></div>
<div id="right"></div>
<body>
I use ng-view in the main content to load the content dynamically through $routeProvider and templateUrl. However, the content in #left and #right also sometime need to change depending on what page I go to.
What's the best way to add/remove elements to #left and #right dynamically? I would basically want that if I load /view1 with controller View1Controller, then if this view has extra components, then I can display them within View1Controller.
In order to do this sort of requirement (without any extra plugins) you'll have to pull your left and right views out into their own view and set each route's main view to include left, content, and right themselves.
Example:
<!-- Core Html-->
<body ng-app>
<div ng-controller="MainCtrl" ng-view></div>
</body>
MainCtrl.js
angular.module('MyApp').controller('MainCtrl', function($scope){
$scope.defaults = {
leftView: "views/view1.html",
rightView: "views/view2.html"
}
});
Route /view1 and it's main view (call it view1.html)
<div ng-controller="View1Ctrl">
<div id="left" ng-include="defaults.leftView"></div>
<div id="content" ng-include="contentView"></div>
<div id="right" ng-include="defaults.rightView></div>
</div>
View1Ctrl
angular.module('MyApp').controller('View1Ctrl', function($scope){
$scope.contentView = "views/view1/firstPanel.html";
//Add some other functions to change $scope.contentView to say
//"views/view1/secondPanel.html"
//You could also temporarily replace $scope.defaults.leftView
//and rightView to show the View1 route in full screen so to speak. like so
$scope.setFullPanel = function(){
$scope.defaults.leftView = ''; //or something else
$scope.defaults.rightView = '';
$scope.contentView = "views/view1/fullScreenPanel.html";
}
});
Route /view2 and it's main view (call it view2.html)
<div ng-controller="View2Ctrl">
<div id="left" ng-include="defaults.leftView"></div>
<div id="content" ng-include="contentView"></div>
<div id="right" ng-include="defaults.rightView></div>
</div>
View2Ctrl
angular.module('MyApp').controller('View2Ctrl', function($scope){
$scope.contentView = "views/view2/firstPanel.html";
//Add some other functions to change $scope.contentView to say
//"views/view2/secondPanel.html"
});
Now that you have the routes and views setup for default left and right panels you could setup a route for a panel with no left and right for example:
<div ng-controller="View3Ctrl">
<div id="content" ng-include="contentView"></div>
</div>
View3Ctrl
angular.module('MyApp').controller('View3Ctrl', function($scope){
$scope.contentView = "views/view3/wholeScreenPanel.html";
});
Hope this helps. Also it's important for "scope hierarchy reasons" to ensure the higher level "default" variables are saved on $scope.defaults so any changes in View1Ctrl or View2Ctrl to $scope.defaults will be properly update throughout all your controllers / views.
I do not completely understand your requirement but did you take a look of the ui-router from angular-ui. Link: http://angular-ui.github.io/ui-router/.
Btw, you can see sample app here: http://angular-ui.github.io/ui-router/sample/#/ Hope it helps.
I am using ng-boilerplate and ui-router in my angular.js app. I have a 3 section layout, a topbar, a sidebar and a main layout. I use ng-switch to show different views in the main layout. Here is how my index.html looks like
<div class="slide-animate" ng-include="HeaderTemplate"></div>
<div class="slide-animate" ng-include="SidebarTemplate"></div>
<div ng-switch on="section">
<div ui-view="secion1" class="secion1" ng-switch-when="secion1"></div>
<div ui-view="secion2" class="secion2" ng-switch-when="secion2"></div>
<div ui-view="secion3" class="secion3" ng-switch-when="secion3"></div>
</div>
My HeaderTemplate and SidebarTemplate are being rendered but the main layout is not being rendered.
I checked the value of section in $scope. It is section1 which is fine and when i inspect in developer tools this is what the DOM looks like
<div ng-switch="" on="section">
<!-- ngSwitchWhen: section1 --><div ui-view="section1" class="section1 ng-scope" ng-switch-when="section1"><!-- ui-view-anchor --></div>
<!-- ngSwitchWhen: section2 -->
<!-- ngSwitchWhen: section3 -->
</div>
So here the correct section is chosen but the ui-view just shows a commented ui-view-anchor.(I have no idea what that is.). I looked at my html source to see if i am getting the templates for my section1, section2, etc and i see that i am getting them. I saw that in the templates-app.js, i am getting the html for my sections. Any idea why it is not rendering the html when it is getting it? My $stateProvider configuration looks like this
$stateProvider.state('section1', {
url: '/section1',
views: {
"section1": {
controller: 'Section1Ctrl',
templateUrl: 'section1/section1.tpl.html'
}
},
data: { pageTitle: 'Section 1' }
});
and so on.
Looks like ui-router v0.2.8 is broken or not compatible with angular.js v1.2.12. I switched back to ui-router v0.2.7 everything works fine