Post on 15-Jan-2015
description
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.
nirkaufman@gmail.com
What's the plan?- Exploring the modules core features and API.- Asking questions & getting answers
but most important..
nirkaufman@gmail.com
Seeing it in Action!Walking through a working demo project.
find the github link in the last slide
nirkaufman@gmail.com
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
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']);
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.
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’)}
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
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
}
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) {...}
Route LIfe cycle & events
nirkaufman@gmail.com
Url Requested $routeChangeStart
$routeChangeError
$routeChangeSuccess
ng-view kicks in$viewContentLoaded
onload function
ngView in Action
nirkaufman@gmail.com
$routeChangeSucsses broadcasted
create New Scopedestroy last scope,
remove the last template
Link the new Template with the new Scope Link the controller
Emit $viewContentLoadedrun the onload function
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
UI RouterUI 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
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
Installationuse 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']);
Simple State
nirkaufman@gmail.com
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
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’)}
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
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
}
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’
})
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>
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) {}
}
State LIfe cycle & events
nirkaufman@gmail.com
state Requested $stateChangeStart
$stateChangeError
$stateChangeSucssesui-view kicks in
$viewContentLoaded onload function Done!
$stateNotFound
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
Summaryyou 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
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’)
Grab the code:https://github.com/nirkaufman/angularjs-routing-demo
nirkaufman@gmail.com
il.linkedin.com/in/nirkaufman/