$stateProvider.state('brands', {
url: '/brands',
controller: 'brandsController',
templateUrl: 'views/brands/brands.html'
});
and
$stateProvider.state('brands.details', {
url: '/details/:uid',
controller: 'brandController',
templateUrl: 'views/brand/brand.html',
params: { brand: null, product: null }
});
using
<a ui-sref="brands.details({ uid: brand.uid, brand: brand, product: product })">{{ product.name }}</a>
Always redirects to the parent. Why?
It does work fine. Just configure your states in the config part of your application once and for all. Please check this running plnkr demo and compare it with your solution. Ensure you have an <div ui-view=""></div> inside your parent view.
Index view
<!DOCTYPE html>
<head>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-app="myApp">
<h2>AngularJS Ui router - Demonstration</h2>
<div data-ui-view=""></div>
</body>
</html>
Brands view
<h1>Brands</h1>
<div>
<div>
<span ui-sref="brands.details({uid: brand.uid, brand: brand, product: product})">
Brand
</span>
</div>
<div>
<div ui-view=""></div>
</div>
</div>
AngularJS Application
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/brands");
$stateProvider
.state("brands", {
url: "/brands",
controller: 'brandsController',
templateUrl: "brands.html"
}).state('brands.details', {
url: '/details/:uid',
controller: 'brandController',
templateUrl: 'brand.html',
params: { brand: null, product: null }
});
});
myApp.controller('brandsController', function () {
});
myApp.controller('brandController', function () {
});
Related
I'm working on a small project and it's been a while since I've worked with Angular. I'm trying to separate all my templates/controllers so I don't have one gigantic file, but I want to be able to access them all on the one page. I'm using Angular UI router, and trying to have them all load on the same route. It doesn't seem to work. Does anyone have any idea how I can load everything on one route but still keep everything separate? Currently it's only loading the first controller/template listed in my routing file (createCompanyController) and not the others.
Here is my routes.js file:
(function() {
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
var applicationStates = [{
name: 'homepage',
url: '/app',
templateUrl: 'partials/CreateCompany/createCompany.html',
controller: 'createCompanyController',
controllerAs: 'createCompanyCtrl'
},
{
name: 'guestbook',
url: '/app',
templateUrl: 'partials/CreatePerson/createPerson.html',
controller: 'createPersonController',
controllerAs: 'createPersonCtrl'
},
{
name: 'states',
url: '/app',
templateUrl: 'partials/ListCompanies/listCompanies.html',
controller: 'listCompaniesController',
controllerAs: 'listCompaniesCtrl'
}];
applicationStates.forEach(function(state) {
$stateProvider.state(state);
});
}])
})();
And the index.html file I'm using:
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='app.less' type='text/css' rel='stylesheet/less'>
</head>
<body class="container" ng-cloak>
<div class='row'>
<div class='span12'>
<div ui-view></div>
</div>
</div>
</body>
</html>
(All my script tags are there, I just removed them from this post to make space). If anyone can help me out I'd be very grateful.
You can use Multiple Named Views
$stateProvider.state('app', {
url: '/app',
views: {
'': {
templateUrl: 'home/home.html'
},
'homepage#app': {
name: 'homepage',
templateUrl: 'partials/CreateCompany/createCompany.html',
controller: 'createCompanyController',
controllerAs: 'createCompanyCtrl'
},
'guestbook#app': {
name: 'guestbook',
templateUrl:'partials/CreatePerson/createPerson.html',
controller: 'createPersonController',
controllerAs: 'createPersonCtrl'
},
'states#app': {
name: 'states',
templateUrl:'partials/ListCompanies/listCompanies.html',
controller: 'listCompaniesController',
controllerAs: 'listCompaniesCtrl'
}
}
And the index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='app.less' type='text/css' rel='stylesheet/less'>
</head>
<body class="container" ng-cloak>
<div class='row'>
<div class='span12'>
<div ui-view="homepage"></div>
<div ui-view="guestbook"></div>
<div ui-view="guestbook"></div>
</div>
</div>
</body>
</html>
The answer to your question is "Angular Components" (available from angular 1.5 version onward).
Component => Template + Controller
Angular Route which would contain all templates => combination of components (in your case CreateCompany, CreatePerson and ListCompanies components all in one route's template)
All you need to do is:
Create components (controller + template for CreateCompany, CreatePerson and ListCompanies) instead of routes.
Create a single route "/app" and define the template for this route as below
HomePage.html
<div class='row'>
<div class='span12'>
<create-company></create-company>
<create-person></create-person>
<list-companies></list-companies>
</div>
</div>
Fiddle: https://jsfiddle.net/vuas3wbq/2/
Reference link for Angular components:
https://docs.angularjs.org/guide/component
I have a basic knowledge of AngularJS only. I have created one AngularJS application with multiple html pages. This is my main view html.Im so sorry my question is so long.But this is better way to ask my question.
Main.cshtml
<html ng-app="myapp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Main</title>
<!-- Main CDN Links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.1/css/bootstrap-theme.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- end-->
<link href="~/Content/Css/sidebar.css" rel="stylesheet" />
<style>
* {
border-radius: 0 !important;
}
</style>
</head>
<body>
<div class="nav-side-menu">
//some code
</div>
<div class="nav-top-menu nav-top">
//some code
</div>
<div class="contents" id="subContents" ui-view>
//route my sub views to here
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="~/Scripts/smart-table.debug.js"></script>
<script src="~/Scripts/MainView.js"></script>
</body>
</html>
MainView.js
var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('sideMenuCustomerDivition', {
templateUrl: "Main/Customer"
})
.state('sideMenuDashboardDivition', {
templateUrl: "Main/Staff"
})
})
i have route my another html view into main.cshtml.This is html of that view
Customer.cshtml
<html>
<body ng-app="customerTableApp">
<div ng-controller="safeCtrl">
<button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add random item
</button>
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate}}</td>
<td>{{row.balance}}</td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/CustomerView.js"></script>
</body>
</html>
CustomerView.js
var app = angular.module('customerTableApp', ['smart-table'])
app.controller('safeCtrl', ['$scope', function ($scope) {
var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
var id = 1;
function generateRandomItem(id) {
var firstname = firstnames[Math.floor(Math.random() * 3)];
var lastname = lastnames[Math.floor(Math.random() * 3)];
var birthdate = dates[Math.floor(Math.random() * 3)];
var balance = Math.floor(Math.random() * 2000);
return {
id: id,
firstName: firstname,
lastName: lastname,
birthDate: new Date(birthdate),
balance: balance
}
}
$scope.rowCollection = [];
for (id; id < 5; id++) {
$scope.rowCollection.push(generateRandomItem(id));
}
$scope.displayedCollection = [].concat($scope.rowCollection);
$scope.addRandomItem = function addRandomItem() {
$scope.rowCollection.push(generateRandomItem(id));
id++;
};
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
}]);
I know the problem is ng-app routed into another ng-app.Anyone can give me better solution for this.Template already routed in to view. my problem is I can't assign values in to second view.Customer view is display in side main view.But assigned values not displayed.Browser shows that type of error.
Error: [ng:areq] http://errors.angularjs.org/1.3.9/ng/areq?p0=safeCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:6:416
at Qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:19:417)
at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:20:1)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:76:95
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:257
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:7:408)
at v (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:124)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:52:9)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:51:118
It might Help you!!
var app = angular.module('MyApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
templateUrl: 'index.html',
controller: 'IndexCtrl'
})
.state('index.test', {
url: '/',
templateUrl: 'test.html',
controller: 'TestCtrl'
})
.state('app', {
templateUrl: 'app.html',
controller: 'AppController'
})
.state('app.test2', {
url: '/test2',
templateUrl: 'test2.html',
controller: 'Test2Controller'
})
});
And the other example
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top#index' : { templateUrl: 'tpl.top.html',},
'left#index' : { templateUrl: 'tpl.left.html',},
'main#index' : { templateUrl: 'tpl.main.html',},
},
})
.state('index.list', {
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('index.list.detail', {
url: '/:id',
views: {
'detail#index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
},
});
I'm not entirely sure what your question is, but
One of the first things I'll note is that you should pass in the controller from the state. You can have .state('statename', { templateUrl: 'templateName', controller: controllerName });
Also, you can specify the url you want associated with the route by using the url tag inside the state config object.
.state('sideMenuCustomerDivition', {
url: '/route1',
templateUrl: 'Main/Customer',
controller: 'safeCtrl'
});
Now if you navigate to the route with url /route1, the template should be inserted in the ui-view
So, today I added angular-ui-router to my webapp. However, it's showing some really weird behaviour. It used to display the current page in the ui-view. So a page in a page.
Now, it's working correct, but it doesn't show subpages and I can't seem to figure out why.
Main page
<!doctype html>
<html lang="en" ng-app="ExampleApp">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div>
<div ui-view></div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- Main app file -->
<script src="/js/main.js"></script>
</body>
</html>
main.js
var ExampleApp = angular.module('ExampleApp', ['ui.router']);
ExampleApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: "MainController"
})
.state('settings', {
url: "/settings",
templateUrl: "views/settings.html",
controller: "SettingsController"
})
.state('settings.account', {
url: "/account",
templateUrl: "views/settings.account.html",
controller: "AccountSettingsController"
});
});
ExampleApp.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Try this
url:"settings/account",
Is it possible to make something using 2 or more html files using ui-view? I need it to be something like this :
I've tryed to do something working on plinker, but looks like I clearly don't uderstand concepts. I've read a nested ui-vew tutorial but they simple make a single index.html and place multiple ui-view there, but I need multiple .html files.
test.html is just a file with some text that should be displayed under master header
index.html looks like this
<html ng-app="MyApp">
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be Master header
</h4>
<div ui-view></div>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>
</body>
</html>
this is app.html
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be Sub master header
</h4>
<div ui-view></div>
</body>
and app.js is written on pseudo code showing how I want it to work, because I clearly have no idea how to make it work
angular.module('MyApp', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
templateUrl: 'index.html',
controller: 'IndexCtrl'
})
.state('index.test', {
url: '/',
templateUrl: 'test.html',
controller: 'TestCtrl'
})
.state('app', {
templateUrl: 'app.html',
controller: 'AppController'
})
.state('app.test2', {
url: '/test2',
templateUrl: 'test2.html',
controller: 'Test2Controller'
})
})
test2.html is just a text.
I am not sure if I do understand your goal 100%, but there is updated plunker, showing how we can work with nested views.
Firstly, there is a $state defintion showing the nesting:
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top#index' : { templateUrl: 'tpl.top.html',},
'left#index' : { templateUrl: 'tpl.left.html',},
'main#index' : { templateUrl: 'tpl.main.html',},
},
})
.state('index.list', {
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('index.list.detail', {
url: '/:id',
views: {
'detail#index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
},
})
And here is the index core template layout.html:
<div>
<section class="top">
<div ui-view="top"></div>
</section>
<section class="middle">
<section class="left">
<div ui-view="left"></div>
</section>
<section class="main">
<div ui-view="main"></div>
</section>
</section>
</div>
And how it works?
I. List View
we can see the content of the tpl.top.html
<div>
This is a tpl.top.html<br />
<a ui-sref="index">index</a>
<a ui-sref="index.list">index.list</a><br />
</div>
which does have some navigation to the index or list view. The list view, will be injected into the tpl.left.html, which looks like this:
<div>
This is a tpl.left.html
<h4>place for list</h4>
<div ui-view=""></div>
</div>
Becuase the view target is unnamed <div ui-view=""></div>, we can defin list $state like this:
.state('index.list', {
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
we can see, that we target the index (root) state view anchor, which is unnamed. But for a detail we do use different technique:
II. Detail View
This is the content of the tpl.main.html:
<div>
This is a tpl.main.html
<h4>place for detail</h4>
<div ui-view="detail"></div>
</div>
In this case, the anchor for a view is named: ui-view="detail", that is why we have to define that detail state like this:
.state('index.list.detail', {
url: '/:id',
views: {
'detail#index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
},
})
We can see, that because the parent view is not the target of our state (the grand parent index is the target) we have to use aboslute naming: 'detail#index'
III. View Names - Relative vs. Absolute Names
small cite from doc:
Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname#statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
SUMMARY:
So, this example is about it - about almost all essential features of the ui-router. We showed here how to use nesting, view naming (absolute/relative) and also how to use multiple views for one state (index state definition)
Please, observe that all in action here (click the inex.html in the top section, then try to select some details)
I have a SPA that requires a different header to display based on which route location the user is on. It seems like the code I have should be working but it produces an error like this: TypeError: undefined is not a function
What am I missing here:
html
<html lang="en" ng-app="configApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<title>Configuration Admin</title>
<!-- Bootstrap CSS -->
<link href="_/css/bootstrap.css" rel="stylesheet">
<link href="_/css/main-styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header-->
<div class="row">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="showNavIcons"></div>
<!-- Header to be shown when Dashboard view-->
<div ng-include="'templates/headers/nav-logo.html'" ng-if="hideNavIcons"></div>
</div> <!-- end header -->
</div>
<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>
</body>
</html>
JS
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])
.config(function($routeProvider){
$routeProvider.when('/dashboard', {
templateUrl: 'templates/dashboard/home.html'
// controller: 'HomeController'
})
.when('/organizations', {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: 'OrganizationController',
activetab: 'organizations'
})
.when('/program-details-edit', {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: 'ProgramDetailsEdit'
})
.otherwise( {redirectTo: '/dashboard'} );
});
// Side Nav Link Controllers
configApp.controller('OrganizationController', function($scope) {});
configApp.controller('SideNavCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
configApp.controller('ProgramDetailsEdit', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.showNavIcons = $location.path() === '/program-details-edit';
}]);
configApp.controller('OrganizationController', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.hideNavIcons = $location.path() === '/organizations';
$scope.$route = $route;
}]);
You need to add the controllers to the elements. "ng-controller='controllerName'" as an attribute. As far as the type error it is undefined however if you do... !!variable then undefined becomes false.
Edit:
<div class="row" ng-controller="ProgramDetailsEdit">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="!!showNavIcons">
</div>
ng-controller will give the dom inside of the dive access to everything that it puts into the $scope variable that you set in it.
As a side note you should look at UI-Router https://github.com/angular-ui/ui-router
it's a lot easier and more powerful then $routeProvider and you would be able to instead do something along the lines of the follow...
<div class="row" ng-controller="appController">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="state.name == 'programEditor'">
</div>
It might be the missing ng-controller tag on your html chrome.
Something like below :
Problem easily solved by using the angularJS ui router instead of ngRouter. Thanks for all the guidance on directing me to the perfect solution.
Heres how I solved it:
Javascript
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap','ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/dashboard");
// ui router states
$stateProvider
.state('cas', {
url: "/cas",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('applications', {
url: "/applications",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/application/applications-title.html',
controller: function($scope) {}
}
}
})
.state('organizations', {
url: "/organizations",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('program-details', {
url: "/program-details",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details.html',
controller: function($scope) {}
}
}
})
.state('program-details-edit', {
url: "/program-details-edit",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: function($scope) {}
}
}
});
});
HTML
<html lang="en" ng-app="configApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<title>Configuration Admin</title>
<!-- Bootstrap CSS -->
<link href="_/css/bootstrap.css" rel="stylesheet">
<link href="_/css/main-styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header-->
<div class="row" ng-controller="NavCtrl">
<div ui-view="header"></div>
</div> <!-- end header -->
<section class="main-content">
<div class="row">
<!-- Sidebar -->
<div class="col-xs-3 sidebar">
<!-- Pullout menu -->
<nav id="sidebar-pullout">
<!--<li>application</li>-->
<!--<li>organization</li>-->
<div id="menu-listings"></div>
</nav>
<!-- end pullout-->
<div ng-controller="SideNavCtrl">
<ul class="list-unstyled side-nav">
<li ng-class="{active:isActive('/cas')}"><a id="showCas" href="#/cas" ui-sref="cas">cas</a></li>
<li ng-class="{active:isActive('/applications')}">application</li>
<li ng-class="{active:isActive('/organizations')}">organization</li>
</ul>
</div>
</div> <!-- Side Bar end -->
<!-- Page Content -->
<div class="col-xs-9 main-page">
<div ui-view="content"></div>
</div> <!-- Page content end -->
</div>
</section> <!-- End main Content -->
</div>
<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/angular-ui-router.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>
</body>
</html>