angularjs--Dependency Injection

Google Angularjs is a JS framework for data-based spa applications. All operations are based on data. Four characteristics:

(1) MVC model

Model: Business data $scope. XX $rootScope. xx

View: Rendering of Business data HTML + ngxxx

Controller: Responsible for operating business data. Controller (", function () {})

(2) Bidirectional data binding

The direction 1:model is bound to view as long as the model changes view with the change

The direction 2:view (form control) is bound to model as long as the View variable model changes

(3) Dependency Injection

(4) Modular design

Interview question: Where is the biggest deficiency/ANGULARJS of the application that requires special attention? Native Es/js/dom has only a specific event listener mechanism for specific HTML elements, and there is no mechanism to listen for data/object/value changes.

What is the difference between $interval and Window.setinterval ()? $interval any model data modified, the underlying will immediately traverse through the $digest queue; SetInterval () does not traverse the $digest queue even if the model data is modified;

$interval (function () {$scope. count++;}, 1000) Equivalent to SetInterval (function () {$scope. count++; $DIGETST ()/$apply (); }, 1000)

2. Dependency Injection

Dependency: If a function call requires additional objects as formal parameters, this function relies on the parameter object.

function Driver (CAR) {//driver relies on a car object

Car.start ();

Car.run ();

Car.stop ();

}

How to resolve dependencies:

(1) Active Creation Method

var C1 = new Car (); Proactively creating dependent objects

var D1 = new Driver (c1); Passing dependent objects

(2) passive Injection (injection) mode

Module.controller (' Controller ', function ($scope, $interval) {})

The Ngcontroller directive in angular, when instantiating a controller object, creates the object that the controller relies on, based on the specified parameter name, and injects it into the Controller object-the dependency injection (Dependency injection,di) phenomenon.

Attention:

(1) Angular when a controller object is created, dependent objects are created based on the name of each parameter in the formal parameter list, so the Controller declaration function cannot declare angular unrecognized formal parameter name --angular only provides this kind of dependency injection method-- Inject dependent objects according to the name of the formal parameter!

(2) If the project JS file using a similar yuicompressor compression program, the default will be the function of the formal parameter name into a letter form, will cause the angular dependency injection failed! Workaround:

Module.controller (' controller name ', [

' $scope ',

' $interval ',

' $http ',

function (AAA,BBB,CCC) {}

])

["Num1", ' num2 ', ' num3 ', function Add (n1, N2,N3) {}]

var num1=10;

var num2=20;

var num5=50;

var num3=30

Add (10, 20, 30);

3. Objects that can be injected--all Service/provider objects can be injected

(1) $rootScope: A service that shares data among multiple controllers

(2) $interval: Provide periodic timer service

(3) $timeout:

(4) $log: Provides five basic log output services

(5) $http: providing asynchronous HTTP request (AJAX) Services

Usage: $http ({method: ' GET ', url: '/xx.php '}).

Success (FN).

Error (FN);

Simplified version: $http. Get (' URL '). Success (FN);

$http. Post (' URL ', data). Success (FN);

(6) $location

Filters provided in the 4.ng module (filter)

Filter: Renders the model data in a specific format when it is displayed.

(1) Lowercase

Syntax: {{expression | lowercase}}

(2) Uppercase

Syntax: {{expression | uppercase}}

(3) Number

Syntax: {{expression | number}}

{{expression | number: decimal Place}}

(3) Currency

Syntax: {{expression | currency}}

{{expression | currency: ' Currency symbol '}}

(3) Date

Syntax: {{expression | date}} default format: Sep 1, 2015

{{expression | date: ' DateTime format '}}

Comparison of multi-page and single-page applications in 5.WEB projects

Mutiple Page Application

Single Page Application

Multi-page Application	Single page application (SPA)
There are multiple full HTML pages in the project	There is only one full HTML page for the entire project, and the other HTML files are HTML fragments
Use hyperlinks, JS implementation page jump	Using hyperlinks, JS implementation "pseudo Jump"
All page requests are synchronized-the client waits for the server to respond, and the browser is blank	All pseudo-page requests are asynchronous requests--the client can still display the previous page content when it waits for the next page fragment--a better browsing experience
Not easy to switch between two pages transitions	It is easy to achieve transitions between two pseudo-pages
The browser needs to create a full dom tree and delete the full DOM tree.	The browser only needs to create a full DOM tree, and after that, the pseudo-page switch is simply changing the contents of a Div.
Each page needs to load its own CSS and JS files	The entire project's CSS and JS files only need to be loaded once

To manually implement a single-page application:

(1) Create a complete HTML page (such as index.html) that introduces all the required CSS and js;body elements in a single pseudo-page, such as <div></div>

(2) Create several pseudo-HTML page/template pages: Just declare the HTML fragment

(3) The client requests the full HTML page, and appends a special tag to the URL, such as http://127.0.0.1/index.html#/start--specifies the name of the pseudo-page to be loaded

(4) The browser resolves the pseudo-page name, finds a dictionary, and finds the URL of the template page corresponding to the name.

Window.location.hash

#/start = template/start.html

#/m = template/main.html

#/detail = template/productdetail.html

(5) The client initiates an asynchronous Ajax request, gets the contents of the template page, and loads it into the pseudo-page container of the index.html.

Module--ngroute provided by 6.AngularJS

Route: Routes to find the target content through a line.

The purpose of the Ngroute module is to find the template page corresponding to the tag, and asynchronously load it into the ngview instruction of the current page, based on a special address tag (such as #/xxx) in the URL of the browser. Steps to use:

(1) Create a unique full HTML page, which declares a container, ngview instructions. Introduction of Angular.js and Angular-route.js

(2) Create multiple template pages (customarily placed in a special directory, such as TPL)

(3) To create a module, the declaration relies on NG and ngroute two modules.

(4) Configure the routing dictionary in module.

(5) Use the browser to do the testing:

Http://IP Address/index.html#/Routing Address

Pseudo-page jump in 7.ngRoute module

(1) Jump through Hyperlinks

<a href= "#/ Routing Address " > #不能省

(2) via JS Jump

<button ng-click= "Jump ()" ></button>

$scope. Jump = function () {

location.href= "2.html" cannot use jumps in a multi-page app

$location. Path ('/ routing address '); # can't have

}

angularjs--Dependency Injection