Angularjs Quick Start

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/636325/201704/636325-20170412123508158-766265493. PNG "style=" margin:0px;padding:0px;border:0px; "/>

Angularjs was born in 2009 and is used in many of our familiar Google apps, such as Gmail, Maps, which are primarily dedicated to fast building AJAX applications, in the sample gallery at GitHub with the address: https://github.com/ Shyamseshadri/angularjs-book.

Some of its most basic concepts are as follows:

1. Client templates: In the multi-page application we used to use, we mixed up the HTML and data assembly to generate the page and sent it to the browser, while the single-page Ajax app sends the HTML template and data directly to the browser, which is assembled by the client.

2. MVC, concepts are basically used in all Web applications.

3. Data binding, support two-way binding, in fact, is the implementation of the observer pattern, very convenient.

4. Dependency injection, through $scope, $location and other built-in objects, so that we only need to care about the actual needs, and do not care about its dependence, followed the Dimitri law (least knowledge principle, law_of_demeter).

5. Directives, the framework provides a number of instructions for extending HTML and DOM, such as Ng-controller specifies a portion of the controller view, Ng-model is used to bind input data to model properties.

A simple example is as follows, the main note is that in many places the introduction of the demo will omit Ng-app after the parameters, angular controller form, as well as the relevant module bindings, browser will be able to error, beginners need to be careful. In addition, the download and use of the VS-Angularjs IntelliSense plugin is also a common problem.

650) this.width=650; "id=" CODE_IMG_CLOSED_9A1FCC03-C356-4281-99D0-814652682AF1 "class=" code_img_closed "src="/img/ Jia.gif "style=" margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle; "/> View Code

In the example above, we can see that the boundary is declared by Ng-app, that is, which part of the framework is managed by it, the above is the DIV element, the double-parenthesis interpolation syntax for {{Greeting.Text}}, and the ng-bind of the same function, the use of the Ng-app namespace, Control the effective range of the angular framework, which can be well compatible with legacy programs, Ng-repeat iterative data, Ng-model bound data, this is a two-way binding, the changes in the view will affect the model, then there will be a form input example to reinforce the concept again ; Ng-click bind the event handler function to the order.

In general, the process of angular a request: the user requests the Application Start page, the browser initiates an HTTP connection to the server, Load the index.html template page; angular is loaded into the page, waits for the page to load, and then looks for the Ng-app directive, which defines the template bounds, and then augular walks through the template, looks for directives and bindings, triggers the register listener, performs DOM operations, Gets the server initialization data, and finally the connection server requests additional data (Ajax). This kind of template and data completely separate way, is very suitable for browser cache data, improve application performance.

• Form input

Using form elements in the framework is very simple, and you can bind the form elements to the model properties by Ng-model, which is the same as the purpose of the two-way binding. NET is consistent in data binding, Ng-submit automatically blocks the default post operation of the browser when the form is submitted, $watch can monitor specific properties and fields in the model, and Ng-change is primarily used to view form elements Ng-show and Ng-hide are used for explicit elements, and are widely applied in menu scenarios.

650) this.width=650; "id=" code_img_closed_0436a019-6bf5-43fa-96b2-970d53f9d38f "class=" code_img_closed "src="/img/ Jia.gif "style=" margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle; "/> View Code

TIP:

It's been a long time since we've been in touch with the concept of non-intrusive JavaScript, but with the example above, we'll find that the use of angularjs is not done, but rather that the HTML template is mixed with the associated control code, which is not to say that the framework is unreasonable. In fact, the previous extraction of non-invasive concept is also because the front-end development of the pain point: different browsers for JS support different, the operation is different; the event handler references a function of the global namespace, there is a naming conflict at the time of integration, and the event listener binds data structures and behaviors that are difficult to maintain. But for JS, it solves compatibility problems through the framework itself, solves integration problems through namespaces, and last but not least, all event handlers do not reference any DOM elements and events.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/636325/201705/636325-20170511160046176-1116700040. PNG "style=" margin:0px;padding:0px;border:0px; "/>

module, controller and data binding: No dependent module angular.module (' Firstmodule ', [])

Scope and Event:scope are built-in objects that are primarily used to manipulate the data model, scope and page declarations in a consistent range $scope.greeting= ' Hello ', {{greeting}}, when the scope of use is not the same, need to communicate, you need to rely on event, The sample code is shown below.

$.scope. $emit (' event_emit ', ' message ');//Sub scope sends $.scope. $on (' Event_emit ', function (event, data) {});//parent scope accepts $. Scope. $broadcast (' event_broad ', ' message ');//parent scope sends $.scope. $on (' Event_broad ', function (event, data) {});// Sub Scope accept

Multi-View and routing: need to introduce angular-route.js

650) this.width=650; "id=" code_img_closed_3cdb814d-344a-41dc-b61d-1ce59a520687 "class=" code_img_closed "src="/img/ Jia.gif "style=" margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle; "/> View Code

Dependency Injection: Angular.module (' Firstmodule '). Controller (' Dicontroller ', [' $scope ', function ($scope) {}]);

Service and Factory:angular built-in class $location, $timeout, $rootScope and other services, but also can provide their own additional services, in two ways, service use needs new, and factory do not need.

650) this.width=650; "id=" Code_img_closed_f65b5cd1-664c-49f4-ac2b-4613f8abf2e7 "class=" code_img_closed "src="/img/ Jia.gif "style=" margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle; "/> View Code

HTTP operations: Support for AJAX operations, including $http.get (URL), $http. Post (URL, data), $http. Put (URL, data), $http. Delete (URL), $http. Head (URL).

Custom directives: Many commands are built in, such as Ng-repeat, Ng-show, Ng-model, etc., and a short instruction can be used to implement a front-end component, such as <date-picker></date-picker>,< Input type= "text" class= "Date-picker"/>.

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Angular.module (' myApp ', []). directive (' HelloWorld ', function () {return {restrict: ' AE ',        Replace:true, Template: ' 
650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>
Demo:https://github.com/wanliwang/cayman/tree/master/cm-angularweb

 Angularjs Quick Start