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
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>
So lets say my app is called myApp, and the controller I wanna use is MyCtrl. So I can include this app in a div tag like this:
<div ng-app="myApp" ng-controller="MyCtrl">
</div>
Lets say there are a few states, and usually I would use the router to map the states to the URL like this: http://example.com/state1 or http://example.com/state2.
If I wanna include this app in state2 into the div tag, is there a way to do this? I'm kinda new to angular, basically I wanna be able to build a page that includes pieces of different modules into different parts of the page.
You will want to user ui-router for that. Specifically, you will use the ui-view directive to specify where a state's template goes into it's parent template, or the page.
you can use ng-include: Fetches, compiles and includes an external HTML fragment.
From Angular docs: AngularJS API
<div ng-controller="ExampleController">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <code>{{template.url}}</code>
<hr/>
<div class="slide-animate-container">
<div class="slide-animate" ng-include="template.url"></div>
</div>
</div>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ui-view>
//here goes your states
</div>
</div>
// inject $stateProvider in your module and config function like:
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider.state("home.state1",{
url:"home/state1"
templateUrl:templatename.html,
controller:MyCtrl,
}).state("home.state2",{
url:"home/state2"
templateUrl:templatename.html,
controller:MyCtrl,
});
})
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
I have a MVC6/Angular site that will have multiple applications, but for now it just has one. When it is complete an example will be App1 and App2 being.cshtml pages with only a div with a data-ng-app and data-ng-view attribute:
mysite.come/virtualdir/App/App1:
<div class="row" data-ng-app="app-app1">
<div data-ng-view></div>
</div>
mysite.come/virtualdir/App/App2
<div class="row" data-ng-app="app-app2">
<div data-ng-view></div>
</div>
For angular, I understand if I have a virtual directory in IIS i need to include in my the header section of the _Layout.cshtml (Actually putting this in the _Layout will break development):
<base href="#Url.Content("~/")" />
My original templateUrl and angular links for app1 in development are:
$routeProvider.when("/", {
templateUrl: "/views/app1/index.html"
});
$routeProvider.when("/items", {
controller: "receiveController",
controllerAs: "vm",
templateUrl: "/views/app1/receiveView.html"
});
// typical link in html page for app1
<a data-ng-href="#/items"></a>
When I deploy to IIS i need to have the routing below to get to my index page to load when the the user navigates to mysite.come/virtualdir/App/App1
$routeProvider.when("/", {
templateUrl: "../views/app1/index.html"
});
After that none of my other links work:
<a data-ng-href="#/items"></a> navigates me to mysite.com/virtualDir/#/items
How do I structure my hrefs in the html page? i tried playing around with the ../#/items/ and ..#/items and adding the .. to the other templateUrl but nothing seemed to work. Thanks
so it seems like the simplest solution is to define the routes and hrefs as below. My problem was not having all three of these combinations at once. I thought angular defined the root of the angular routes based on my ~/App/App1 where I defined:
<div class="row" data-ng-app="app-app1">
<div data-ng-view></div>
</div>
so I needed in the app.js:
$routeProvider.when("/", {
templateUrl: "views/app1/index.html"
})
# the top of my _Layout.cshtml
<base href="/app/">
my href:
data-ng-href="App/App1#/items"
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.