Last active
November 27, 2017 04:06
-
-
Save akanshmurthy/ef1bd53f7d1a3976e7f322760dfd4d56 to your computer and use it in GitHub Desktop.
Angular
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Angular highlights from ng-book | |
| - live data-binding | |
| - $digest() for dirty checking if value has changed | |
| - bind by attribute rather than raw object (clock.now vs clock) | |
| - scope = glue between controller and view | |
| - $scope.$apply for callbacks outside Angular context | |
| - only ng-controller and ng-repeat directives create own scope | |
| - DOM manipulation not in controller | |
| - nesting controllers gives you access to parent scope | |
| - $parse can display items from the controller | |
| - $interpolate for live updating a template | |
| - lots of filters for date/currency/time formatting | |
| - form validation: pristine, dirty, valid, invalid | |
| - all directives have access to rootscope if the directive has access to scope | |
| - declaring directive as attribute is best for most browsers | |
| - isolate scope separate from DOM; pass in via attributes as opposed to inheriting | |
| - string, number, and bool are copy by value; array, object, and function are copy by reference | |
| - ng-switch; ng-init don’t really use; ng-bind or ng-cloak to prevent FOUC | |
| - can set priority of directive to fire first | |
| - directives: isolate scope vs inherited scope | |
| - life cycle of Ang app = compile (not data bound) + link (data bound) | |
| - run block is the first method to be executed (kind of like main in Java) | |
| - ng-route separate from Angular core; resolve property can be used to get some data | |
| before the controller/view is loaded for a route | |
| - ng-view tells route where to render template in the DOM | |
| - location object does not refresh; need to use window for that | |
| - $rootScope changes occur when routes change; can listen to these events ($routeChangeStart, $routeChangeSuccess, etc.) | |
| - services = communicate across controllers and keep data state | |
| - watch function should be in service rather than controller? | |
| - conventional to inject Angular services before our own services, which btw are singletons | |
| - $http returns promise and a success/error callback is called on the promise | |
| - $cache GET requests by using { cache : true } -> can even customize to use an LRU | |
| - $interceptor can be used to respond to request/response/errors globally | |
| - $resource can be used to establish an interface with the backend server | |
| - Rectangular is pretty cool :) | |
| - Angular helps deal with CORS | |
| - Promises: notify, chain, deferred? | |
| - node.js/Express (framework for HTTP) | |
| - Angular + Firebase (for backend persist) | |
| - testing with Karma (spawns browser and runs tests), PhantomJS (headless browser testing for E2E) | |
| - Jasmine testing framework (behavior driven development) -> can use existing matchers or create your own! | |
| - mocking with httpBackend/etc. | |
| - .$emit from child to parent; .$broadcast from parent to child -> listen with .$on | |
| - can hook into Angular events to do other actions | |
| - architecture: directory structure, controllers with upper camel case namings, DOM manipulation in directives, | |
| share data between controllers with directives or nesting scopes | |
| - ng-animate can be used to hook into events that are fired by directives and animate based on those events | |
| - digest loop = $watch list (all UI elements bound to $scope are added to $watch list) + $evalAsync list | |
| - dirty checking = checks whether a value has changed that hasn’t yet synced across the app; compares old val to new val | |
| - $scope.watch should be in a service not in a controller | |
| - $evalAsync = action to execute outside the execution context of another action in Angular | |
| - $apply = action to execute inside execution context from outside Angular | |
| - flow: browser building the DOM, loads AngularJS, DOMContentLoaded event fires, Angular looks for ng-app, | |
| app gets bootstrapped, configures injector, compile, and rootScope, compiles DOM of Angular app | |
| - UI router in AngularUI is better than built-in ngRoute; UIMask for credit cards/ phone numbers | |
| - ngTouch, angular-gestures, Cordova great for converting Angular apps to mobile apps | |
| - angular-translate for localization | |
| - can cache values in services using $cacheFactory (LRU) | |
| - $sce to allow html or js input as well as general security with whitelisting/blacklisting URLs ( | |
| $sce does sanitizing on all interpolated expressions by default) | |
| - to get Angular to work with Internet Explorer, lots of little things to do | |
| (ng tag on html element, ng-app id on the element that has the ng-app directive, undo ajax caching) | |
| - hashing syntax for SEO or serve/reroute to snapshots taken by backend or Prerender | |
| - optimize Angular apps by limiting unnecessary watches in the digest loop (such as with $apply | |
| and with bi-directional data bindings), being wary of ng-repeat, which causes lots of bindings, | |
| using $scope.$digest() instead of $scope.$apply(), keeping $watch functions simple and without | |
| loops (can even unwatch or bind once to reduce frequency), making simple filters or even using | |
| filter services in the controller as opposed to the view, where they get called twice | |
| - debugging in Angular = angular.element(document.querySelector(“element with ng-app on it”)), | |
| angular.element(“<>”).scope() or .controller() or .injector(), throw a literal debugger statement | |
| in the code, Batarang | |
| - other tools: Grunt, Bower, npm, Yeoman, Lineman | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment