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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.