var App = angular.module('routingDemoApp',['ui.router']);
App.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/business")
$stateProvider
.state('business', {//State demonstrating Nested views
url: "/business",
templateUrl: "business.html"
})
.state('business.products', {//nested state [products is the nested state of business state]
url: "/products",
templateUrl: "products.html",
controller: function($scope){
$scope.products = ["Computer", "Printers", "Phones", "Bags"];
}
})
.state('business.services', {//nested state [services is the nested state of business state]
url: "/services",
templateUrl: "services.html",
controller: function($scope){
$scope.services = ["Selling", "Support", "Delivery", "Reparation"];
}
})
.state('portfolio', {//State demonstrating Multiple,named views
url: "/portfolio",
views: {
"" : { templateUrl: "portfolio.html" },
"view1@portfolio": { template: "View 1: View 1 comes right from the 'template' configuration object inside a state 'portfolio'" },
"view2@portfolio": { templateUrl: "clients.html" ,
controller: function($scope){
$scope.clients = ["HP", "IBM", "MicroSoft"];
}
}
}
})
.state('about', {
url: "/about",
template: "Single message from 'template' configuration object"
})
}]);
<!DOCTYPE html>
<html ng-app="routingDemoApp">
<head>
<meta charset="utf-8" />
<title>AngularJS UI Router Demo App http://websystique.com/angularjs/angularjs-routing-tutorial-using-ui-router/</title>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<h2>AngularJS UI Router Application - stateProvider</h2>
<nav class="navbar navbar-default row">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li>
<a ui-sref="business">Business</a>
</li>
<li>
<a ui-sref="portfolio">Portfolio</a>
</li>
<li>
<a ui-sref="about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */
<h4>Business page</h4>
<hr/>
<strong>This page shows Nested states & views. Click on below links to see Nested states in action.</strong>
<ul>
<li><a ui-sref=".products">Show Products</a></li>
<li><a ui-sref=".services">Show Services</a></li>
</ul>
<div class="panel panel-default" ui-view></div>
<h4>List of Products (url: /products)</h4>
<ul>
<li ng-repeat="product in products">{{product}}</li>
</ul>
<h4>List of Services (url: /services)</h4>
<ul>
<li ng-repeat="srv in services">{{srv}}</li>
</ul>
<h4>Portfolio Page</h4>
<hr/>
<strong>This page shows multiple named views in action. (url: /portfolio)</strong>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default" ui-view="view1"></div>
</div>
<div class="col-sm-6">
<div class="panel panel-default" ui-view="view2"></div>
</div>
</div>
View 2:
<h4>List of Clients</h4>
View comes from template 'clients.html'
<ul>
<li ng-repeat="client in clients">{{client}}</li>
</ul>