Angularjs Learning Note 2-controller, data binding, scope

After sharing this series of articles last time a friend also suggested that 1.x version in addition to maintenance is not necessary to learn, you can learn 2.0 to start learning, I also know 1.x no matter from the performance or architecture are not 2.x good, but I think because there are some friends still in the 1.x version, because 1.x upgrade to 2.x difficult, even can be said to refactor, To our company is still in the 1.x version, so I decided to finish this series, but also to a finishing process. I am now also learning Angular4.0 version of the study, but 4.0 with typescript and Nodejs integration relatively large, there is learning angular-cli scaffolding learning, so I learned to be ready to share to you. This is not discussed for the time being, today we continue to share control, data binding, scope of knowledge points.

1. Controller:

Concept: In Angularjs the controller is a function that adds additional functionality to the scope of the view to set the initial state of the scope and to add custom behavior.

Controller declaration: App.controller (' Controllername ', function ($scope) {...})

    controller definition    //    first parameter: Controller name, second parameter: anonymous function, incoming scope, and add extra function on scope    app.controller (' Myctrl ', function ($scope) {        $scope. expression = "Hello expression";        $scope. Ngbind = "Hello Ng-bind";        $scope. Htmlbind = "<font color= ' red ' >hello,htmlbind</font>";        $scope. Subctrl = "Hello Subctrl";    });

use of the controller: add Ng-controller where needed (on one of the HTML tags).

1	<bodyng-app="myapp" ng-controller="myCtrl">

From the above to see the definition and use of control is relatively simple, but a lot of people will be the role of the controller and the controller need to write what code some do not understand, some people will push the entire code into the controller, I personally think that the controller is just a page view and mode of a link, only to deal with some data binding, Event binding and so on some column simple logic, specific server access or data reading should be implemented in the service, service I will be in detail to everyone in the next time.

I am simple to control the use of the attention to the matter in the collation for your reference:

1) as much as possible to streamline the controller and $scope related operations.
2) do not reuse controllers, a controller is generally only responsible for a small block of views.
3) do not manipulate the DOM in the controller, which is not the responsibility of the controllers.
4) Try not to do data filtering, data manipulation in the controller.
5) In general, the controller does not call each other, the interaction between the controllers through the event

2. Scope ($scope)

The above controller also refers to the scope, the controller is mainly related to the operation of $scope, I simply give you the role of the scope in Angularjs and his life cycle, I use the internal share of the summary posted to share with you:

3. Data binding:

ANGULARJS data binding There are several kinds of bindings, I give you out, it is possible that everyone has used, there may be some friends have some bindings have not been used.

1) expression {{}}:
Constant: {{' const '}}
Variable: {{ABC}}
Function: {{func ()}}
Expression: {{a+b}}

This method is the most common, expression binding, as long as within the scope range of the angular angular encounters an expression or variable that the expression automatically resolves to html recognition.

2) instruction Mode (Ng-bind):

The binding is to add a ng-bind directive on the element, and then angular parse the instruction and execute the binding.

3) Ng-model:

This method is mainly used in the form of the submission of more than the implementation of two-way data binding, page content and model to achieve two-way data.

4) Ng-bind-html:

This method is mainly for the HTML element binding time, because ANGULARJS default to HTML tags do not parse, direct output, so want to display HTML tag content on the page can use this binding method, but the binding needs to reference a serialized JS file.

<script type= "Text/javascript" src= "/lib/angular-1.3.0.14/angular-sanitize.min.js" ></script>

5) Ng-bind-template:

This method can bind multiple variables and expressions at once.

Usage scenarios:

Home Use Ng-bind, the template inside the page can use brackets {{}}, the form uses Ng-model, {{}} Syntax flaw: It is possible to see {} In a user's constant refresh, and it is possible to see it in the event of a bad network

The following code is the whole code of the above five methods:

<! DOCTYPE html>
 Angularjs Learning Note 2-controller, data binding, scope