What is UI-Route?
It is a framework which provide routing for AngularJS. It is completely different from ngRoute, in angularjs you can changes your application views based on state of the application and not just the route URL.
With this approach, your views and routes arent tied down to the site URL. This way, you can change the parts of your site using your routing even if the URL does not change.
The Ui-router provides the features where you can do the nested routing and named views vice versa. AngularUI Router is a routing framework, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes as well as other behavior, attached.
HTML:
1. index.html
UI-Route
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse menu" role="navigation">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<div class="text-center">
<p>Demo</p>
</div>
</body>
</html>
2. one.html
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
<a ui-sref=".one">Click</a> to view more
<div ui-view></div>
3. two.html
<div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</div>
CSS:
.menu .navbar-nav::after{clear:both; display: block;content: "";}
.menu .navbar-nav li{list-style: none;float: left; margin-right: 10px;}
JS
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/about');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'one.html'
});
.state('home.one', {
url: '/two',
template: 'maining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of '
});
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
templateUrl:'two.html'
});
});
0 Comment(s)