I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.
Here's the code
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<base href='/'>
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-book"></span>Testing App
</div>
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
<li>Write</li>
</ul>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('MyApp')
.controller('HomeController', function($scope, $location) {
$scope.data = "Hello Angular";
})
.controller('ModalController', function($scope, $location, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: function() {
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
home.html
<div class="container">
<h1>Awesome {{ data }}</h1>
</div>
modal.html (The path that the modal suppose to show);
<h1>Need to show this actually</h1>
The picture, what shows up after i clicked the text that trigger the modal event
Added this:
<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>
right after
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
and it works in plunker:
http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview
Related
I am very new in angular JS and ng-view is not working.
Below is code of AngularFormsApp.js
var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]);
angularFormsApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/Home.html",
controller: "HomeController"
})
.when("/newEOIForm", {
templateUrl: "app/EOIForm/eoifTemplate.html",
controller: "eoifController"
})
.otherwise({
redirectTo: "/Home"
});
});
angularFormsApp.controller("HomeController",
function ($scope, $location) {
$scope.addNewEOI = function () {
$location.path('/newEOIForm');
};
});
Below is html code.
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EOIForm/eoifController.js"></script>
<script src="app/EOIForm/eoifDirective.js"></script>
<script src="app/EOIForm/eoifService.js"></script>
</head>
<body ng-controller="eoifController" class="container">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="nav">
Home
About
Detail
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
</body>
</html>
Below is my root structure.
Why ng-view is not working, also I am not able to debug the code.
Be careful with that $routeProvider.otherwise({redirectTo: '/Home'}).
It should be:
$routeProvider.otherwise({redirectTo: '/home'})
Please, link the href in your index.html like this:
Home
About
Detail
And in your config:
angularFormsApp.config(function ($routeProvider) {
$locationProvider.hashPrefix('');
// Rest of the code
I want to have particular variable for menu to know which class to be active. Up to now I know how to set variable inside ng-view but I want to keep my menu out of that view. If I set variable in function in controller isn't visible outside of ng-view and that is exactly what I want to, to be visible. I try with rootscoope but I couldn't manage. If someone can help me my code is like this:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<title>Example</title>
</head>
<body>
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<link href="libs/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="libs/ng-dialog/css/ngDialog-theme-default.css" rel="stylesheet">
<script src="libs/ng-dialog/js/ngDialog.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/mainCtr.js"></script>
</body>
</html>
app.js
(function () {
'use strict';
angular
.module('example', ['ngRoute','ngDialog'])
.config(function ($routeProvider,$httpProvider) {
$routeProvider.when('/', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/firstPage.html'
});
$routeProvider.when('/second', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/secondPage.html'
});
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
}).run(function($http, $httpParamSerializerJQLike) {
//decode json on every submit form
$http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
})
})();
controller:
(function() {
'use strict';
angular
.module('example')
.controller('mainCtr', mainCtr);
mainCtr.$inject = ['$window','$routeParams','ngDialog','$timeout'];
function mainCtr($window,$routeParams,ngDialog,$timeout) {
var vm = this;
vm.firstPage = firstPage;
vm.secondPage = secondPage;
function firstPage() {
vm.test = 'This is first page';
}
function secondPage() {
vm.test = 'This is second page';
}
}
})();
I want to have access to variable vm.test in <div class="container-fluid main-header">
I would make a Controller around the ng-view which hold the value(s):
<body ng-controller="OuterController">
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
...
</body>
and if you want to share data between the controllers in ng-view directive use a service.
So I've made a plunker to illustrate, how data sharing is accomplished: https://plnkr.co/edit/axekEgrFwnm93aFXoMKd
So the basic idea is to use a service and in someway either by button click as in the question or automatically in contoller as plunker, set the shared value.
Service
app.service('commonInfomation', function() {
return {
test: ''
};
});
Inner controller
app.controller('FirstCtrl', function($scope, commonInfomation) {
commonInfomation.test = "Hello from first page";
});
Outer controller
app.controller('MainCtrl', function($scope, commonInfomation) {
$scope.commonInfomation = commonInfomation;
});
View
<body ng-controller="MainCtrl">
<h2>{{commonInfomation.test}}</h2>
<div class="container-fluid main-header">
<a href="#/">
<div class="main-menu-active">First page</div>
</a>
<a href="#/second">
<div class="main-menu">Second page</div>
</a>
</div>
<div ng-view class="main-body"></div>
</body>
Module
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'firstpage.html',
controller: 'FirstCtrl'
})
.when('/second', {
templateUrl: 'secondpage.html',
controller: 'SecondCtrl'
})
});
I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.
Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);
I'm new to AngularJS and I'm trying to make a slider work that I copied from an example online.
At the moment, I have the slider coming up on the page I want it to (gallery.html) and the automatic picture change works, but, when I try to press the next/previous button, it just takes me to a random page with nothing on it.
I think the problem is with my hrefs on the arrows but I honestly don't know where to go from here. Also, is my slider directive in the right place (at the top of gallery.html) ?
File structure:
Photography
- bower_components
- css
----- stylemain.css
- img
----- phones
---------- ...a bunch of png files...
- js
----- app.js
----- controller.js
- partials
----- gallery.html
- phones
----- ...a bunch of json files...
- index.html
This is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!--<link rel="stylesheet" href="css/app.css">-->
<link rel="stylesheet" href="css/stylemain.css">
<!-- JS & ANGULAR FILES -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<!--<script src="js/directives.js"></script>-->
</head>
<body>
<div class="template-header">
<div class="template-container">
<div class="template-logo">
<h1><a href="#/">title</h1>
</div>
<div class="template-nav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Music</li>
<li>Other-work</li>
</ul>
</div>
</div>
</div>
<!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>
</body>
This is my app.js:
'use strict';
/* App Module */
var mainApp = angular.module('mainApp', [
'ngRoute',
'galleryControllers'
]);
mainApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/', {
templateUrl:'partials/main.html',
})
.when('/gallery', {
templateUrl:'partials/gallery.html',
controller: 'mainImageCtrl',
})
.when('/:phoneId', {
templateUrl: 'partials/gallery-image.html',
controller: 'singleImageCtrl'
})
.when('/music', {
templateUrl: 'partials/music.html',
controller: 'singleImageCtrl'
})
.when('/other-work', {
templateUrl: 'partials/other-work.html',
controller: 'singleImageCtrl'
});
}
]);
This is my controller.js:
'use strict';
/* Controllers */
var galleryControllers = angular.module('galleryControllers', [
'ngAnimate'
]);
galleryControllers.controller('mainImageCtrl',['$scope', '$http',
function($scope, $http){
$http.get('phones/phones.json').success(function(data){
$scope.images = data;
});
}]);
galleryControllers.directive('slider', function($timeout) {
return {
restrict: 'AE',
replace: true,
scope: {
images: '='
},
link: function(scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
};
scope.$watch('currentIndex',function(){
scope.images.forEach(function(image){
image.visible=false;
});
scope.images[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,2000);
},2000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
}
};
});
// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope',
// function($scope, $routeParams){
// $scope.phoneId = $routeParams.phoneId;
// }]);
This is my gallery.html:
<slider images="images"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query"/>
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<!--Body content-->
<!-- <ul class="phones">
<li ng-repeat="phone in phoneImages | filter:query | orderBy:orderProp" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul> -->
<div class="slider">
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img ng-src="{{image.imageUrl}}" />
</div>
<div class="arrows">
<a href="#" ng-click="prev()">
<img src="img/left-arrow.png" />
</a>
<a href="#" ng-click="next()">
<img src="img/right-arrow.png" />
</a>
</div>
</div>
</div>
</div>
phones.json is just a json file with fields on different phones etc.
Thanks in advance, all help is much appreciated!!!!
test with https://github.com/angular-ui/ui-router
and every time you try to call a route used =
<a ui-sref="root">link</a>
appModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/signin');
$stateProvider
.state("root", {
url: "/signin",
templateUrl: "views/signin.html",
controller: 'AuthController'
})
with ui-sref="root" already know to what route to go.
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>