angular js routing options
DESCRIPTION
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 demoTRANSCRIPT
Exploring 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.
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,{
templateUrl: ‘views/user.html’,
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,{
templateUrl: ‘views/user.html’,
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 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
● $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.
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.
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
$ 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’
templateUrl: ‘views/user.html’,
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
$stateChangeSucssesui-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
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.
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/
