NG-Book-Part-2 Flashcards
Two-Way Data Binding
Allows us to bind the value of a property inside the private scope of our directive to the value of an attribute available within the DOM.
Transclude
Transclude is optional. If provided, it must be set to true. Often used to create reusable widgets like modal box or navbar.
Compile Phase
During the compile phase, Angular slurps up our initial HTML page and begins processing the directives we declared according to the directive definitions we’ve defined within our application’s JavaScript.
Run Blocks
Run blocks are executed after the injector is created and are the first methods that are executed in any Angular app. Run blocks are the closest thing in Angular to the main method.
Typically, these run blocks are places where we’ll set up event listeners that should happen at the global scale of the app.
$routeProvider
Using the $routeProvider, we can take advantage of the browser’s history navigation and enable users to bookmark and share specific pages, as it uses the current URL location in the browser.
angular.module(‘myApp’, [‘ngRoute’]);
ng-view
is a special directive that’s included with the ngRoute module. Its specific responsibility is to stand as a placeholder for $route view content.
What 2 methods are used to declare routes?
the when method and the otherwise method.
The when method takes two parameters (when(path, route)).
Route Example
angular.module('myApp', [])
config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
});
}]);$Location Service
AngularJS provides a service that parses the URL in the address bar and gives you access to the route of the current path of your applications.
It provides a nicer interface to the window.location JavaScript object and integrates directly with our AngularJS apps.
We’ll use whenever we need to provide a redirect internal to our app, such as redirecting after a user signs up, changes settings, or logs in.
replace()
If you want to redirect completely without giving the user the ability to return using the back button (it’s useful for times when a redirect occurs after they are redirected, for instance a redirect after login).
Routing Modes
refers specifically to the format of the URL in the browser address bar.
Hashbang Mode
http://yoursite.com/#!/inbox/all
HTML5 Mode
This mode makes your URLs look like regular URLs.
http://yoursite.com/inbox/all
Dependency Injection
is a design pattern that allows for the removal of hard-coded dependencies, thus making it possible to remove or change them at run time.
This ability to modify dependencies at run time allows us to create isolated environments that are ideal for testing.
ngMin
tool that allows us to alleviate the responsibility to define our dependencies explicitly.It walks through our Angular apps and sets up dependency injection for us.
Installation
$ npm install -g ngmin
Using
$ ngmin input.js output.js
If we’re using Grunt, we can install the grunt-ngmin Grunt task. If we are using Rails, we can use the Ruby gem ngmin-rails.
Services
Are singleton objects that are instantiated only once per app (by the $injector) and lazy-loaded (created only when necessary).
They provide a method for us to keep data around for the lifetime of the app and communicate across controllers in a consistent manner.
Register a service
There are several ways to create and register a service with the $injector. The most common and flexible way to create a service uses the angular.module API factory:
angular.module('myApp.services', [])
.factory('githubService', function() {
var serviceInstance = {};
// Our first service
return serviceInstance;
});
$timeout service
If we don’t include a delay, we’ll end up calling the API for every keystroke that is entered into the input.
5 different methods for creating services
factory() service() constant() value() provider()
The factory() function takes two arguments:
name (string)
This argument takes the name of the service we want to register.
getFn (function)
Why use provider() over factory?
If we want to be able to configure the service in the config() function, we must use provider() to define our service.
constant()
let’s say we want to set an apiKey for a back-end service. We can store that constant value using constant().
angular.module(‘myApp’)
.constant(‘apiKey’, ‘123123123’)
Value()
If the return value of the $get method in our service is a constant, we don’t need to define a full-blown service with a more complex method.
angular.module(‘myApp’)
.value(‘apiKey’, ‘123123123’);
When to Use Value or Constant?
The major difference between the value() method and the constant() method is that you can inject a constant into a config function, whereas you cannot inject a value.
$http service
is simply a wrapper around the browser’s raw XMLHttpRequest object.
The $http service is a function that takes a single argument: a configuration object that is used to generate a HTTP request.
The function returns a promise that has two helper methods: success and error.
$http shortcut methods
get()
$http.get('/api/users.json');
delete()
url(string)
head()
jsonp()
$http
.jsonp("/api/users.json?callback=JSON_CALLBACK");
post()
put()Interceptors
Is middleware for the $http service that allow us to inject logic into the existing flow of the app.
At their core, interceptors are service factories that we register through the $httpProvider by adding them to the $httpProvider.interceptors array.
There are four types of interceptors – two success interceptors and two rejection interceptors:
What are the 4 types of Interceptors?
Request
Response
requestError
responseError
How to register an Interceptor?
angular.module(‘myApp’)
.config(function($httpProvider) { $httpProvider.interceptors.push(‘myInterceptor’);
});
$resource
This service creates a resource object that allows us to intelligently work with RESTful server-side data sources. It service allows us to turn our $http requests into simple methods like save or update.
bower install –save angular-resouce
$resource htttp methods
Get Methods:
get(params, successFn, errorFn)
query(params, successFn, errorFn)
Non Get Mehods:
save(params, payload, successFn, errorFn)
delete(params, payload, successFn, errorFn)
remove(params, payload, successFn, errorFn)
Promise
A promise is a method of resolving a value (or not) in an asynchronous manner. Promises are objects that represent the return value or thrown exception that a function may eventually provide.
Why Promise?
Escaping from callback hell is just one by-product of using promises. The real point of promises is to make asynchronous functions look more like synchronous ones. With synchronous functions, we can capture both return values and exception values as expected.
