A presentation made for the NG-CONF Israel that took place in jun 2014 at Google TLV Campus (http://ng-conf.gdg.co.il/)
its an overview of how to use ngRoute and UI-Router in your app this slideshow contain a link for a working demo
2. Routing is mandatory.
For an angular app, we can choose between
the official ngRoute, or the popular ui-router.
In this talk i will introduce you with both of
them so you can choose what's fits your
needs.
nirkaufman@gmail.com
3. Spoiler!
In the end of this talk you will probably choose
to use ui-router for your project.
nirkaufman@gmail.com
4. What's the plan?
- Exploring the modules core features and
API.
- Asking questions & getting answers
but most important..
nirkaufman@gmail.com
5. Seeing it in Action!
Walking through a working demo project.
find the github link in the last slide
nirkaufman@gmail.com
6. ngRoute
Used to be baked into Angular core,
separated into it`s own module in version 1.2.
Provides a lot of functionality we expected
from a routing system.
nirkaufman@gmail.com
7. Installation
nirkaufman@gmail.com
use bower (or download manually) the angular-route.js file.
Make sure to load the module after angular.
specify ngRoute as a dependency for your module
$ bower install angular-route
<script src="angular.js"> </script>
<script src="angular-route.js"> </script>
angular.module('app', ['ngRoute']);
8. Simple route
nirkaufman@gmail.com
angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/home',{ templateUrl: ‘views/home.html’ })
.when('/user',{ templateUrl: ‘views/user.html’ })
.otherwise({ template: “<div>NOT FOUND!</div>” })
In the config section of our module, we use the $routeProvider to map url`s to the
desired views. the most basic route should include an HTML template to render.
9. Navigate & Display Templates
nirkaufman@gmail.com
<ng-view onload=”fn()”></ng-view>
Our template will be rendered between the ng-view tags. this directive will create a
new child scope for the template. we can pass a function to the onload attribute.
ngRouter Support only one ngView per Application!
We can display the requested from html using <a> tags, or from javaScript using the
$location service:
function UserController ($location) {
$location.path(‘/admin’)}
10. Controllers & Parameters
nirkaufman@gmail.com
we can assign a controller to the view, and access the route parameters by injecting
the $routeParams service to our controller
.when('/user/:id,{
templateUrl: ‘views/user.html’,
controller: ‘UserController’ })
function UserController ($routeParams) {
$routeParams.id // 5234 }
http://www.yourApp.com/user/5234
11. Attaching custom data
nirkaufman@gmail.com
We can extend the route object to include extra data that we might need.
.when('/admin,{
templateUrl: ‘views/user.html’,
controller: ‘UserController’,
permissions: {level : ‘admin’, key: ‘23f’}
})
...
function UserController ($route) {
permissions = $route.current.permissions
}
12. Using resolve
nirkaufman@gmail.com
We can define a map of factory functions that will be resolved, and injected to our
controller.. if any of them is a promise, the route will hold until the resolved. it can be
used to load additional resources on demand or fetching data from a remote server.
.when('/admin,{
templateUrl: ‘views/user.html’,
controller: ‘UserController’,
resolve: {data: function() {return “info”} }
})
function UserController (data) {...}
13. Route LIfe cycle & events
nirkaufman@gmail.com
Url
Requested
$routeChangeStart
$routeChangeError
$routeChangeSuccess
ng-view kicks in$viewContentLoaded
onload function
15. Things we didn't cover
nirkaufman@gmail.com
● $locationProvider - configure how the application deep linking paths are
stored (enable HTML5 mode, and define an hash prefix)
● $location - Represents the URL object as a set of methods (protocol,
host, port, path, search, hash)
● $route.reload() - a method that reloads the current view be causing the
ng-view directive to create new child scope and re-instantiate the
controller
● ngView autoscroll - calling to the $anchorScroll service
https://docs.angularjs.org/api/ngRoute/service/$route
16. UI Router
UI Router is a routing system for AngularJS
that based around the concept of states which
may optionally have routes, as well as other
behaviours.
nirkaufman@gmail.com
17. Define: state.
❏ a ‘place’ in the application in terms of UI
and navigation.
❏ a state describes what the UI looks like and
does at that place.
nirkaufman@gmail.com
18. Installation
use bower (or download manually) the angular-ui-router.js file.
Make sure to load the module after angular.
specify ui.router as a dependency for your module
nirkaufman@gmail.com
$ bower install angular-ui-router
<script src="angular.js"> </script>
<script src="angular-ui-router.js"> </script>
angular.module('app', ['ui.router']);
20. Navigate & Display Templates
nirkaufman@gmail.com
<ui-view> </ui-view>
Our template will be rendered between the ui-view tags.
ngRouter Support multiply ui-views per application!
We can display the requested from html using <a ui-sref=’stateName’> tags with
the or using the $state service method:
function UserController ($state) {
$state.go(‘home’)}
21. Controllers & Parameters
nirkaufman@gmail.com
just like $routeProvider, we can assign a controller to the state, and access the state
parameters by injecting the $stateParams service to our controller
.state('user,{
url: ‘/user/:id’
templateUrl: ‘views/user.html’,
controller: ‘UserController’ })
function UserController ($stateParams) {
$stateParams.id // 5234 }
http://www.yourApp.com/user/5234
22. Attaching custom data
nirkaufman@gmail.com
Another powerful feature is the ability to display different views in parallel:
.state('home',{
controller: ‘HomeController’
data : {
level: ‘admin’
}}
...
function HomeController ($state) {
data = $state.current.data
}
23. Nested Views
nirkaufman@gmail.com
One of the powerful features of ui router is the ability to define nested views:
$stateProvider
.state('home',{
url: ‘/home’,
templateUrl: ‘views/home.html’
})
.state('home.subsection,{
url: ‘/subsection’,
templateUrl: ‘views/section.html’
})
24. Named Views
nirkaufman@gmail.com
Another powerful feature is the ability to display different views in parallel:
$stateProvider
.state('home',{
views: {
"": { template: "<h1>HELLO!</h1>" },
"sidebar": { template: "<sidebar/>" },
"footer": { template: "<data_thing/>" }}...
index.html:
<div ui-view></div>
<div ui-view="sidebar"></div>
<div ui-view="footer"></div>
25. State Callbacks
nirkaufman@gmail.com
We can optionally define two callbacks to the state object, that will be fired when a
state beacom active or inactive, the callbacks can access to the resolved attributes
.state('home',{
resolve : { user: function () {...} }
onEnter : function (user) {},
onExit : function (user) {}
}
26. State LIfe cycle & events
nirkaufman@gmail.com
state
Requested
$stateChangeStart
$stateChangeError
$stateChangeSucsses
ui-view kicks in
$viewContentLoaded onload function Done!
$stateNotFound
27. Things we didn't cover
nirkaufman@gmail.com
● $state API - The $state service contain more methods beside go that we
take advantage of
● $templateFactory- a utility for defining templates in different ways
● state inheritance - child states inherited the resolves from their parent
state
● abstract - we can define an abstract template that cannot be directly
activated, but can use as a wrapper for our views
● ui-sref-active - directive that adds class when state is active
● much more...
http://angular-ui.github.io/ui-router/site/#/api
28. Summary
you will probably choose to use ui-router for
your project. basically because it supports
everything the normal ngRoute can do, as well
of as many extra features and functions that is
crucial for large scale applications.
nirkaufman@gmail.com
29. Migrating to ui-router
nirkaufman@gmail.com
if you are allready use ngRoute, you can start by replacing your routes with simple
states for a good start:
$stateProvider
.state('home',{
url: ‘/home’,
templateUrl: ‘home.html’
})
$routeProvider
.when('/home',{
templateUrl: ‘home.html’
})
<a href=”#/home”>Home</a> <a ui-sref=”home”>Home</a>
$location.url(‘/home’) $state.go(‘home’)