8. Angular uses promises for everything that is async:
$timeout;
$http & response interceptors;
$resource;
$routeProvider.when();
much more.
9. 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.");
10. 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);
14. 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'
16. $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
})
17. 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.
18. $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;
}]
})
19. 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.
20. 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 ( )
21. You can navigate relative to current state
by using special characters:
1. is up;
2. is down.
23. Generate anchors for state references
<a ui-sref="contacts.detail({ id: 3 })"></a>
<!-- Can Generate -->
<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>
24. $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 .