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.
