Angular js routing options

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

Spoiler!
In the end of this talk you will probably choose
to use ui-router for your project.

What's the plan?
- Exploring the modules core features and
API.
- Asking questions & getting answers
but most important..

Seeing it in Action!
Walking through a working demo project.
find the github link in the last slide

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.

Installation
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']);

Simple route
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.

Navigate & Display Templates
<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’)}

Controllers & Parameters
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

Attaching custom data
We can extend the route object to include extra data that we might need.
.when('/admin,{
controller: ‘UserController’,
permissions: {level : ‘admin’, key: ‘23f’}
})
...
function UserController ($route) {
permissions = $route.current.permissions
}

Using resolve
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,{
controller: ‘UserController’,
resolve: {data: function() {return “info”} }
})
function UserController (data) {...}

Route LIfe cycle & events
Url
Requested
$routeChangeStart
$routeChangeError
$routeChangeSuccess
ng-view kicks in$viewContentLoaded
onload function

ngView in Action
$routeChangeSucsses
broadcasted
create New Scope
destroy last scope,
remove the last template
Link the new Template
with the new Scope
Link the controller
Emit
$viewContentLoaded
run the onload function

Things we didn't cover
● $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

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.

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.

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
$ bower install angular-ui-router
<script src="angular.js"> </script>
<script src="angular-ui-router.js"> </script>
angular.module('app', ['ui.router']);

Simple State
angular.module('app', ['ngRoute'])
.config(function ($stateProvider) {
$stateProvider
.state('home',{
url: ‘/home.html’,
templateUrl: ‘views/home.html’
})
In the config section of our module, we use the $stateProvider to define a state
object and give it a name

Navigate & Display Templates
<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’)}

Controllers & Parameters
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’
controller: ‘UserController’ })
function UserController ($stateParams) {
$stateParams.id // 5234 }
http://www.yourApp.com/user/5234

Attaching custom data
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
}

Nested Views
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’
})

Named Views
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>

State Callbacks
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) {}
}

State LIfe cycle & events
state
Requested
$stateChangeStart
$stateChangeError
$stateChangeSucsses
ui-view kicks in
$viewContentLoaded onload function Done!
$stateNotFound

Things we didn't cover
● $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

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.

Migrating to ui-router
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’)

Grab the code:
https://github.com/nirkaufman/angularjs-routing-demo
il.linkedin.com/in/nirkaufman/

Thank You!

Angular js routing options

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular js routing options (20)

More from Nir Kaufman (18)

Recently uploaded (20)

Angular js routing options