Wesley Cho
Software Engineer
- Uses CSS3 transitions, animations, or JavaScript animations
- Angular provides default classes with $animate behavior for:
- ngView, ngInclude
- ngRepeat
- ngShow, ngHide, ngIf, ngSwitch
- ngClass
- Add 'ngAnimate' and the 'angular-animate.js' script to your project
- API docs: http://docs.angularjs.org/api/ngAnimate
- Tutorial on using ngAnimate: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
<div select-template="item.id as item.name for item in items"></div>->angular.module('demo', [])
.directive('selectTemplate', function () {
replace: true,scope: {
template: '@selectTemplate'
},template: '<select ng-options="template" ng-model="foo"></select>'
http://plnkr.co/edit/l5O1ujwSxhtFGb4nKPOO});
But this does not work!Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)? for (_key_,)?_value_ in _collection_' but got 'options'. Element: <select class="form-control ng-pristine ng-valid" ng-model="model" ng-options="options"> http://errors.angularjs.org/1.2.0-rc.2/ngOptions/iexp?p0=options&p1=%3Cselectlass%3D%form-control%20ng-pristine%20ng-valid%22%20ng-model%3D%22model%22%20ng-options%3D%options%22%3E
This is because Angular already expects the string in the correct format, and not a variable in scope that evaluates to the string
- Allows you to extend functionality of templates
- Also applies for templateUrl
- Available since 1.1.4
- http://docs.angularjs.org/guide/directive
- Params matching in routes
- Offers `finally` callback chaining
- Observe fulfillment of promise w/o changing final value
- Note: Must use promise['finally'](callback) due to IE8
- 'finally' is a reserved word in JavaScript
- Offers `catch` callback chaining for error handling
- Adds $q.notify for updates on promise's status
- One step closer to $http file uploads with progress updating
- https://github.com/angular/angular.js/pull/2725
- $q.notify
- finally & catch
- Interceptors - $http.interceptors
- Allows intercepting requests
- Accessing the $http promise directly
- Ex. $resource(...).get(...).$promise.success(function (data) { ... })
- $resource(...).get(...).$promise is the $http promise
- ng-keydown/ng-keyup/ng-keypress
- ng-focus/ng-blur
- All these directives (+ ng-submit) allow you to access `$event`
- ng-if works similarly to ng-show
- Does not render content in DOM if condition is false
- Importance:
- CSS
- Avoid creation of $watch from directives like ng-repeat
- Creates new $scope
- Support for multielement repeaters
- `track by` syntax
- For keeping order of elements when array changes
- Note: This actually was in 1.0.0 (and maybe beforehand)
- Still relatively obscure & awesome feature!
- Lets you monkeypatch services and directives
- Dangerous!
- Useful for overriding some defaults in plugins
- http://www.angular-tips.com/blog/2013/09/experiment-decorating-directives/
- Useful for forcing any factory, service, directive, etc. to have a provider
- Allows you to reuse components that may not function exactly how you want
- http://stackoverflow.com/a/16084888/1771358
- Use cases include
- Caching an expensive request
- Debugging/Testing
- Throttling calls via debounce function (like _.debounce)
- Overriding template locations
- New service for explicitly whitelisting trusted content for bindings
- You can do `ng-controller="MainCtrl as Product"
- function MainCtrl () {
this.list = [1, 2, 3];
}
- <div ng-repeat="item in Product.list">
- Allows you to be more semantic
- Allows you to namespace multiple instances of the same controller for organization in the DOM
- Allows you to avoid polluting $scope with methods that are specific to the controller
- These methods do not get inherited by child controllers!
- $route has been split off into 'ngRoute' module in 'angular-route.js' script
- `ng-bind-html-unsafe` is removed
- Use `ng-bind-html`
- Use $sce.trustAsHtml function to whitelist
- ng-repeat
- Arrays will often need `track by $index` if you have items of equal value
By Wesley Cho
A brief overview of what Angular 1.2 has to offer developers