Angular Promises and Advanced Routing

A represents a task that will finish in the future;
A has three methods:
then()
catch()
finally()
A will be or

var a = 10;
window.setTimeout(function(){
a += 10;
}, 1000);
console.log(a); // Will output 10;

setTimeout() / setInterval();
XmlHttpRequest;
Element Creation;
Web Workers;
Generators;

Angular uses promises for everything that is async:
$timeout;
$http & response interceptors;
$resource;
$routeProvider.when();
much more.

Implemented using $q service
function createPromise(resolve){
defered = $q.defer();
window.setTimeout(function(){
if (resolve) defered.resolve(10);
else defered.reject("You provided a false value");
}, 1000);
return defered.promise;
}
var promise = createPromise(true);
promise.then(function(value){
console.log(value);
});
console.log("The value will be shown after this.");

Result of
var promise = createPromise(true);
promise
.then(function(value){
console.log(value) //10
return value + 10;
}, errorFn, notifyFn)
.then(function(value){
console.log(value) //20
return $q.reject(20);
}, errorFn, notifyFn)
.catch(errorFn)
.finally(callbackFn);

A within an app
hierarchy
Names are
Navigate by
views (ui-view)
Populate
populates 'parts'
A within your app
hierarchy
Names are
Navigate by
view (ng-view)
Populate
populate
'parts'

<body>
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
<section ui-view></section>
</body>
angular
.module("myApp", [])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('home', {
template: '<h1>Home</h1>'
})
.state('about', {
template: '<h1>About</h1>'
});
}])

$stateProvider
.state('stateName', {
template: 'String Html content',
templateUrl: 'String URL',
templateProvider: function(){}, // Function, must return HTML String
controller: 'Function or name as String'
controllerProvider: function(){}, // Function, must return controller function or name as String
resolve: {} // A map of dependencies wich shoul be resolved and injected into controller
url: 'A url with optional params',
params: [], //Array of parameter names or regular expressions
views: {
//Object to define multiple views
'nameOfView': {
template: '',
controller: ''
}
},
abstract: true //An abstract state will never be directly activated, but can provide inherited data: {},
onEnter: function(){},
onExit: function(){},
reloadOnSearch: true
})

The resolve property is a map object:
: name of the dependency
:
: alias for a service
:
Return value is treated as the dependency.
If the result is a promise, it's resolved before
the controller is instatiated.

$stateProvider
.state('stateName', {
resolve:{
simpleObj: function() {
return {value: 'some string'}
},
promiseObj: ['$http', function($http) {
//$http returns a promise
return $http({method: 'GET', url: '/someUrl'});
}]
},
controller: ['$scope', 'simpleObj', 'promiseObj', function($scope, simpleObj, promiseObj){
$scope.simple = simpleObj.value;
// You can be sure that promiseObj is ready to use!
$scope.items = promiseObj.items;
$scope.items = promiseObj2.items;
}]
})

There are three main ways to activate a state:
1. Call $state.go();
2. Click a link containing the ui-sref directive;
3. Navigate to the url associated with the state.

myApp.controller('contactCtrl', ['$scope', '$state',
function($scope, $state){
$scope.goToDetails = function(){
$state.go('contact.details', {id: selectedId});
}
}
Params:
1. state name
2. state params ( )
3. options ( )

You can navigate relative to current state
by using special characters:
1. is up;
2. is down.

Go to sibling - $state.go('^.1')

Generate anchors for state references
<a ui-sref="contacts.detail({ id: 3 })"></a>

<a ui-sref="contacts.detail({ id: 3 })" href="#/contacts/3"></a>
Can use relative paths and can have options
<a ui-sref="^" ui-sref-opts="{location : false}">Go up</a>

$stateProvider
.state("home", { ... });
.state("contacts", { ... });
.state("contacts.detail", { ... });
.state("contacts.detail.edit", { ... });
The dot in the state names auto-denotes parental
hierarchy.
It knows that is a of .

<body>
<div ui-view></div>
</body>

<h1>My Contacts</h1>
<div ui-view></div>

<ul>
<li ng-repeat="item in list">
<a>{{item.name}}</a>
</li>
</ul>
angular
.module('myapp', ["ui.router"])
.config(function($stateProvider, $urlRouterProvider
$urlRouterProvider.otherwise("/list")
$stateProvider
.state('page', {
abstract: true,
templateUrl: 'page.html',
resolve: {
list: function($http){
return $http({method: 'GET', url: '/someUrl'
}
}
})
.state('page.list', {
url: '/list',
controller: function($scope, list){
$scope.list= list;
}
templateUrl: 'page.list.html'
});
});

Scope inherits from parent
properties
methods
Child states inherit from their parents:
resolved dependencies
custom data

.state('parent', {
resolve:{
resA: function(){
return {'value': 'A'};
}
},
controller: function($scope, resA){
$scope.resA = resA.value;
}
})
.state('parent.child', {
resolve:{
resB: function(resA){
return {'value': resA.value + 'B'};
}
},
controller: function($scope, resA, resB){
$scope.resA2 = resA.value;
$scope.resB = resB.value;
}

<body>
<div ui-view="filters"></div>
<div ui-view="tabledata"></div>
<div ui-view="graph"></div>
</body>
$stateProvider
.state('report',{
url: '',
resolve: {},
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){}
},
'tabledata': {
templateUrl: 'report-table.html',
},
'graph': {
templateUrl: 'report-graph.html',
},
}
})

Can use relative or absolute naming
(always parent)
filters - 'filters' view in parent template
- unnamed view in parent template
(uses @ symbol)
- 'filters' view in 'report' state's template
- 'filters' view in index.html.
- unnamed view in 'report' state's template

$stateProvider
.state('page', {
url: "/page",
templateUrl: 'page.html'
})
.state('page.item', {
url: "/{id}?filter&anotherParam",
templateUrl: 'page-item.html',
controller: function ($stateParams) {
console.log($stateParams.id)
}
})
.state('page.item.details', {
url: "/details",
templateUrl: 'page-item-details.html',
})
page.item's url becomes:
page.item.details url becomes:

Angular API Reference
Tim Kindberg slides
uiRouter guide

Angular Promises and Advanced Routing

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Angular Promises and Advanced Routing (20)

More from Alexe Bogdan (7)

Recently uploaded (20)

Angular Promises and Advanced Routing