Introduction to AugularJS from getting started to practice (1)
Preface
Front end
AngularJS is designed to overcome the shortcomings of HTML in building applications. (Reference Baidu encyclopedia)
AngularJS uses different methods, which try to supplement the defects of HTML in application construction. AngularJS is calledCommand(Directives) structure, allowing the browser to recognize the new syntax. (Reference Baidu encyclopedia) for example:
Bind data using double braces;
Use the DOM control structure to iterate or hide DOM fragments;
Supports form and form verification;
Can associate logical code with related DOM elements;
HTML can be grouped into reusable components.
This article mainly consists of two parts:
① [Commonly used AngularJS commands]
② [Mvc of AngularJS]
1. Commonly Used AngularJS commands
|
Common commands]
1. na-app: Declares the region under the jurisdiction of angularjs. Generally, it is written in the body or HTML to write only one side.
<Body ng-app = ""> </body>
2. the ng-model command binds the element value (for example, the value of the input field) to the application.
<Input type = "text" id = "input" ng-model = "name"/>
3. the ng-bind command binds application data to the HTML view.
① <Div id = "div" ng-bind = "name"> </div>
② <Div >{{ name }}</div>
4. the ng-init command initializes AngularJS Application variables.
<Body ng-app = "" ng-init = "name = 123"> </body>
5. expression: {} bound expression, which can contain numbers, operators, and variables. However, when the expression is loaded on the webpage, {} is displayed, so ng-bind = "can be used instead.
{5 + "" + 5 + ', Angular '}}
[Basic Concepts]
Command: In AngularJS, the extension of HTML attributes provides the function of getting started quickly (the original statement in the cainiao tutorial)
AngularJS commands are extended HTML attributes with the prefix ng -.
The ng-app command initializes an AngularJS application.
The ng-init command initializes application data.
The ng-model command binds the element value (for example, the value of the input field) to the application.
[Three-layer mvc Framework]
1. Model: The application is in the process of property bureaus. (Save or modify data to databases, variables, etc ). The Model in AugularJS features data
View: the page that the user sees and is used to display data
Controller: the part of an application that processes user interaction. Reads data from the view, controls user input, and sends data in a project.
2. Working principle: the user sends a request from the view layer. After the controller receives the request, it forwards it to the corresponding model for processing. After medle completes the processing, it returns the result to the controller, and feedback to the user in the view.
To create an angular module, that is, the part bound to the ng-app, two parameters must be passed:
① Module name, that is, the name that ng-app needs to bind. Ng-app = "myApp ";
② Array: the name of the module to be injected. It cannot be empty.
Var app = angular. module ("myApp", []);
On the Angular module, to create a Controller, you must pass two parameter names.
① Ng-controller = "myCtrl"
② Controller constructor: constructor can input multiple parameters, including $ scope/$ roatScope and various built-in system objects
[Scope in angularJS]
① $ Scope: local scope. attributes and Methods declared on $ scope can only be used in the current Controller;
② $ RootScope: Root scope. The familiarity and Methods declared on $ rootscope can be used in any area of ng-app (whether or not controller is agreed, or whether it is included in the controller ).
>>> If $ scope is not used to declare variables, the scope of variables bound with ng-model in html is:
1. If ng-model is in a ng-controller, this variable is bound to $ scope of the current Controller by default.
2. If ng-model is not in any ng-controller, the variable is bound to $ rootScope.
As follows:
The Code is as follows:
1 <! DOCTYPE html> 2
Notes may be incorrect during study. Thank you for your criticism.
Reflection, replay, get a little bit every day ------------------- look forward to better yourself
