Angular JS from introductory basic MVC three-tier architecture common directives

Angular JS from the introductory basic MVC model common directives

★

Recently has been reviewing ANGULARJS, it is an excellent front-end JS framework, has been used in many Google products. Angularjs has many features, the most core of which are: MVC, modularization, automated bidirectional data binding, semantic tagging, dependency injection, and so on.

1. Common DirectivesAngularJS extends HTML through instructions, and binds data to HTML through an expression. Let's take a look at the common directives in angularjs.(1), basic conceptDirective: ANGULARJS provides functionality by extending the properties of HTML.　　　So, the new attribute that ng-starts with, we become the instruction. (2), Angularjs common directives

　　

1, Ng-app: Declare angular jurisdiction of the area, generally written on the body or HTML, in principle, a page only one. 2. Ng-model: Binds the element value (such as the value of the input field) to the variable in the application.

　<type= "text"  ng-model= "name"/>

3. Ng-bind: Bind the data in the application variables to the HTML view, using an expression instead.

<id= "Div1"  ng-bind= "name"></Div > <!-- is equivalent to  - <  ID= "Div1">{{name}}</div>

4. Ng-init: Initializes the ANGULARJS application variable.

<data-ng-app= ""  ng-init= "name=123">

5. Expression: {{}} binding expression, which can contain literals, operators, and variables.

But the expression will see {{}} at the moment the page loads, so you can use ng-bind= "" instead. eg:{{5 + "" + 5 + ', Angular '}}

　　　　　　

2. Mvc three-tier architecture

Model: The part of the application that is used to process data. (Save or modify data to database, variable, etc.). The model in ANGULARJS refers specifically to: data.

View: The page that the user sees to display the data.

Controller: The part of the application that handles user interaction.　　Responsible for reading data from the view, controlling user input, and sending data to the model. (1), Working principle:

The user requests from the view layer, the controller receives the request and forwards the corresponding model processing, and returns the result to the controller when the model processing is complete and feeds back to the user on the view layer.

(2), create a angular module　　　　That is, the part that Ng-app is bound to pass two parameters: ① module Name: The name that Ng-app needs to bind, ng-app= "myApp" ② array: the module name that needs to be injected, no need to be empty.

var app= angular.module ("myApp", []);

(3) Create a controller on the angular module, create a director controller that requires passing two parameters. ①controller name, which is the name Ng-controller needs to bind. Ng-controller= constructor for "Myctrl" ②controllerd: Constructors can pass in multiple parameters, including $scope/$rootScope and various system built-in objects;

After all, it's not clear, look at the picture of our soul convey you know what MVC is all about.

Finally, add a bit of scope in ANGULARJS

① $scope: Local scope, declaring properties and methods on $scope, only use ② $rootScope in the current controller: the root scope, the properties and methods declared on the $rootscope, Can be used in any area included in the Ng-app (whether or not the controller is included in the controller) >>> if the variable is not declared with $scope,　　　　Variables that are bound directly in HTML using Ng-model are scoped to: 1, and if Ng-model is in a ng-controller, the variable is bound to the $scope of the current controller by default; 2. If Ng-model is not in any one ng-controller, this variable is bound to $rootscope.

this time Here's the share .

Thank you for watching.

feel good Please praise

I hope we can inspire you .

There are better ways or different opinions please contact me in the message area .

　　

Angular JS from introductory basic MVC three-tier architecture common directives