AngularJS Ui-router - GitHub Pages

AngularJS ui-routerCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.

OverviewIn AngularJS 1.0.8 and earlier,the routeProvider service was includeddefines mappings from URL paths to routesdefined by controllers, templates and views (ng-view)does not support nested views or sibling viewsIn AngularJS 1.2.0 and later,no route management services are included routeProvider can be downloaded separately from http://angularjs.orgpress “Download” button, click “Extras” link, and look for angular-route.min.jsui-router is a popular alternativecreated by a team including Karsten Sperling, Nate Abele, Tim Kindberg, and otherssupports nested views, sibling views, and moredownload from https://github.com/angular-ui/ui-routerjust need one file . angular-ui-router.min.jsCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.2AngularJS ui-router

SetupIn main HTML (typically index.html) script src "lib/angular-ui-router.min.js" /script Add ui-router as a module dependencyvar app angular.module('app-name', ['ui.router']);note that there is a dotinstead of a hyphenWherever a view is desired div ui-view initial content /div initial content is optionalDefine states in function passed to app.config,that injects the stateProvider and urlRouterProvider servicesapp.config(function ( stateProvider, urlRouterProvider) { urlRouterProvider.otherwise('/default-path'); stateProvider.state('state-name-1', );});Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.3AngularJS ui-router

State Configuration .States are defined by a configuration object thatcontains a subset of the following properties (4 slides of these!)urlstring path for the state that starts with slashcan contain parameter names preceded by a colon or contained in curly braces; ex. /foo/:bar or /foo/{bar}brace form allows specifying a regular expression that values must match; ex. /address/{zip:[0-9]{5}}can contain query parameters; ex. /foo?bar&bazcan query parametervalues be specified?can’t use capture groupsfor child states, this is relative to url of parent statecontroller or controllerProvideridentifies the controller that is responsible for populating the scope used by the templateuse controller to specify the string name of a controlleruse controllerProvider to specify a functionthat can be injected with services to select and returnthe name of a controller or a controller functionCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.4AngularJS ui-router

. State Configuration .template, templateUrl or templateProviderthese identify an HTML snippet for rendering the stateuse template to specify an HTML stringuse templateUrl to specify the URL of a file containing HTMLtypically under a directory named “partials”can set to a function that takes stateParams and returns a template URLregardless of howa template is specified,it can contain directivesand binding expressionsuse templateProvider to specify a functionthat can be injected with services to build and return the HTMLviewsfor populating multiple, named views within a single templatethese ui-view attribute directives must have a valueex. div ui-view "view-name" /div some other top-level properties are ignored if this is presentcontroller, controllerProvider, resolve, template, templateUrl and templateProviderresolve is describedon slide 7value of views is an object where the keys are view names andthe values are configuration objects containing properties for controllers, templates and resolve dataabsolute view names are an advanced topic that allow targeting views in other statesCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.5AngularJS ui-router

. State Configuration .dataattaches data with a statevalue is an object whose properties can be accessed in controllerswith state.current.data.property-namemust inject state into controller to accessinherited by child statesparamsan array of parameter names or regular expressions used when the state has no URLHow is this useful? Where do the values come from?onEnter and onExitfunctions that are called when the state is entered or exitedcan perform state setup and teardown stepsCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.6AngularJS ui-router

. State Configurationresolvevalue is an objectkeys are names that can be injected into the controllervalues are functions whose return values are injected (common case)or strings that are the name of a service that returns a single functionfor values that are promises, it waits for them to be resolvedex. can wait for REST services to return data ( http methods return promises)obtains data before controller is renderedabstracta state to which the UI cannot transition,but provides properties that are inherited by child statescan providebase url that is prepended to child state urlstemplate that child states populateresolve data that child states can inject into their controllerscustom data (described on the previous slide)onEnter and onExit functions that run for each child stateCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.7AngularJS ui-router

Changing StateThere are three ways to change the stateand thus change the UIclick a link with a ui-sref attribute a ui-sref "state-name" link text /a call state.go('state-name');must inject state to usenavigate to the URL of a statetypically by calling location.path(url)or typing it into the browser address barCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.8AngularJS ui-router

Basic ExampleDemonstrates simple views that switch using ui-sref directivesTo run:1) cd labs/ui-router/basic2) grunt3) browse localhost:3000Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.9AngularJS ui-router

Basic Example HTML & CSSweather.cssbody {font-family: sans-serif;}index.html !DOCTYPE html html ng-app "Weather" head title Weather /title link rel "stylesheet" href "styles/weather.css"/ script src "lib/angular.min.js" /script script src "lib/angular-ui-router.min.js" /script script src "scripts/weather.js" /script /head body h1 Weather /h1 div id "links" !-- ui-sref values are state names, not paths -- a ui-sref "hourly" Hourly Forecast /a a ui-sref "daily" 5-day Forecast /a /div div ui-view /div /body /html h1 {background-color: orange;padding: 10px;margin: 0;}table, th, td {border: solid gray 1px;border-collapse: collapse;}th {background-color: linen;}th, td {padding: 10px;}#links {font-size: 8pt;margin-top: 8px;}#links a {margin-right: 8px;}.number {text-align: right;}Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.10AngularJS ui-router

Basic Example Partialsdaily.html h3 5-day Forecast /h3 table tr th Day /th th High /th th Low /th /tr tr ng-repeat "dayForecast in dayForecasts" td {{dayForecast.day}} /td td class "number" {{dayForecast.high}} /td td class "number" {{dayForecast.low}} /td /tr /table h3 Hourly Forecast /h3 hourly.html table tr th Time /th th Temperature /th /tr tr ng-repeat "hourForecast in hourForecasts" td {{hourForecast.hour}} /td td class "number" {{hourForecast.temperature}} /td /tr /table Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.11AngularJS ui-router

Basic Example JavaScript .var app angular.module('Weather', ['ui.router']);app.factory('weatherSvc', function () {var svc {};svc.getHourlyForecasts function () {var forecasts [];forecasts.push({hour: '8am', temperature: 50});.return forecasts;a real app would call};REST services to obtaindata rather thansvc.getDailyForecasts function () {returning dummy datavar forecasts [];forecasts.push({day: 'Monday', high: 75, low: 42});.return forecasts;};return svc;});app.controller('WeatherCtrl', function ( scope, weatherSvc) { scope.hourForecasts weatherSvc.getHourlyForecasts(); scope.dayForecasts weatherSvc.getDailyForecasts();});Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.12AngularJS ui-router

. Basic Example JavaScriptapp.config(function ( stateProvider, urlRouterProvider) { urlRouterProvider.otherwise('/daily'); stateProvider.state('hourly', {url: '/hourly',controller: 'WeatherCtrl',templateUrl: 'partials/hourly.html'}).state('daily', {url: '/daily',controller: 'WeatherCtrl',templateUrl: 'partials/daily.html'});});Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.13AngularJS ui-router

Sibling ViewsA template can contain more than one ui-view directive if they are namedTo run:1) cd labs/ui-router/sibling-views2) grunt3) browse localhost:3000Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.14AngularJS ui-router

Sibling HTML html ng-app "SiblingViews" head title AngularJS Sibling Views /title link rel "stylesheet" href "styles/sibling.css"/ script src "lib/jquery-1.10.1.min.js" /script script src "lib/angular.min.js" /script script src "lib/angular-ui-router.min.js" /script script src "scripts/sibling.js" /script /head body header ui-view "header" /header nav ui-view "nav" /nav section ui-view "body" /section multiple, named views footer ui-view "footer" /footer /body /html Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.15AngularJS ui-router

Sibling CSS/* Could use LESS to eliminate reduncancy. */body {font-family: sans-serif;margin: 0;}footer {background-color: LightGreen;text-align: center;position: absolute;bottom: 0;height: 50px;width: 100%}nav {background-color: LightBlue;padding: 10px;position: absolute;top: 75px; /* header height */bottom: 50px; /* footer height */left: 0;width: 120px;}nav div {margin-top: 40px;}nav h3 {margin-top: 0;}footer h4 {line-height: 50px; /* footer height */margin: 0;text-align: center;vertical-align: middle;}section {background-color: LightYellow;padding: 10px;position: absolute;top: 75px; /* header height */bottom: 50px; /* footer height */left: 120px; /* nav width */right: 0;}header {background-color: pink;height: 75px;}header h1 {line-height: 75px; /* header height */margin: 0;text-align: center;vertical-align: middle;}Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.16AngularJS ui-router

Sibling Partials h1 Header 1 /h1 h1 Header 2 /h1 header*.htmlnav1.html h3 Options /h3 a href "" ng-click "changeColor('red')" Red /a br/ a href "" ng-click "changeColor('green')" Green /a br/ a href "" ng-click "changeColor('blue')" Blue /a div a ui-sref 'second' Switch View /a /div nav2.html h3 Options /h3 a href "" ng-click "changeFontSize('12pt')" Small /a br/ a href "" ng-click "changeFontSize('18pt')" Medium /a br/ a href "" ng-click "changeFontSize('24pt')" Large /a div a ui-sref 'first' Switch View /a /div h1 Body 1 /h1 h1 Body 2 /h1 body*.html h4 Footer 1 /h4 h4 Footer 2 /h4 footer*.htmlCopyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.17AngularJS ui-router

Sibling JavaScript .sibling.js(function () {'use strict';var app angular.module('SiblingViews', ['ui.router']);app.controller('SiblingCtrl', function ( scope) { scope.changeColor function (colorName) { ('section').css('color', colorName);}; scope.changeFontSize function (size) { ('section').css('font-size', size);};});app.config(function ( stateProvider, urlRouterProvider) { urlRouterProvider.otherwise('/first'); stateProvider. code snippets on next slide go here .});})();Copyright 2013-2014 by Object Computing, Inc. (OCI).All rights reserved.18AngularJS ui-router