Day 10 of 100 days with Angular
I think this tutorial is pretty simple and easy so i will finish it to day and move on to something more challenge.
11 - REST and Custom Services
Service
app/js/services.js
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);From what i read so far i think resource is like an abstraction of $http service so we don’t have to make callback function and handle response by ourselves. In the contructor we specify an action of the service that we can use later as a method. This action will have a default parameter phoneId='phones' and return an array.
app/js/app.js
...
angular.module('phonecatApp', ['ngRoute', 'phonecatControllers','phonecatFilters', 'phonecatServices']).
...We need to add the ‘phonecatServices’ module dependency to ‘phonecatApp’ module’s requires array.
Controller
app/js/controllers.js
var phonecatControllers = angular.module('phonecatControllers', []);
...
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', function($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
$scope.mainImageUrl = phone.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}]);We can rely on angular data-binding and treat Phone.query() like an synchronous function or we can use Phone.get to pass a callback function.
12 - Applying Animations
This is pretty long so will only point out thing that i learned and don’t incluce too much code here. If You want to see the code you can go to the tutorial site.
Animate with css
I think when we inject ngAnimate to out app it will add these class on our element and we just need to use it in our css to animate the page.
These are class that angular add when we create a list with ng-repeat
- The ng-enter class is applied to the element when a new phone is added to the list and rendered on the page.
- The ng-move class is applied when items are moved around in the list.
- The ng-leave class is applied when they’re removed from the list.
When a class is added or remove Angular will add these class:
- classname-add
- classname-remove
We can add -starting or -active suffix to these class:
- a “starting” class that represents the style at the beginning of the animation
- an “active” class that represents the style at the end of the animation
Animating ngClass with JavaScript
app/js/animations.js
var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);
phonecatAnimations.animation('.phone', function() {
var animateUp = function(element, className, done) {
// Do some animation
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
var animateDown = function(element, className, done) {
// Do some animation
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
return {
addClass: animateUp,
removeClass: animateDown
};
});We register the .phone class to the animate service and then specify these addClass and removeClass callback function. These callback function will be call when the .phone class that we registered is removed or added to an element.
Notice that addClass and removeClass each return a function. This is an optional function that’s called when the animation is cancelled (when another animation takes place on the same element) as well as when the animation has completed. A boolean parameter is passed into the function which lets the developer know if the animation was cancelled or not. This function can be used to do any cleanup necessary for when the animation finishes.
