Home > Developer > Web Develop
What is Angularjs "two-way data binding: From the interface of the operation can be reflected in real-time data, data changes can be displayed in real-time interface. 】？
1.AngularJS makes it easier to develop a modern single-page application (Spas:single page applications).
2.AngularJS binds application data to HTML elements.
3.AngularJS can clone and repeat HTML elements.
4.AngularJS can hide and display HTML elements.
5.AngularJS can add code to the HTML element "behind".
6.AngularJS supports input validation.
The AngularJS application consists of the following:
View, which is HTML.
Model (models), the data available in the current view.
Controller, the JavaScript function, can add or modify properties.
ANGULARJS History:
AngularJS was developed by Google's employee XX from 2009 onwards.
AngularJS is a relatively new technology, and version 1.0 was released in 2012.
This is a very good idea, the project is now officially supported by Google, a full-time development team to continue to develop and maintain the library.
Basics of Angularjs: HTML, CSS, JavaScript
AngularJS is a JavaScript framework. It can be added to the HTML page by <script> tags.
AngularJS extends HTML through instructions, and binds data to HTML through an expression.
We recommend placing the script at the bottom of the <body> element.
This will increase the page load speed, because HTML loading is not subject to script loading.
Angularjs Extended HTML through Directives (directives)
For example:
1 < ng-app= ""></div>
NG-APP directive defines an ANGULARJS application
The ng-model= "variable name" directive binds the value of an element (such as the value of the input field) to the application, i.e. the value of the input box is in the variable
The NG-BIND directive binds application data to HTML views
Place script scripts at the bottom of the <body> element and AngularJS automatically when the page is loaded.
The Ng-app directive tells the angularjs,<div> element to be the "owner" of the AngularJS application.
The Ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the application variable name to the InnerHTML of a paragraph.
ANGULARJS directive
The angularjs instruction is an HTML attribute prefixed with NG
Ng-init instruction initialization AngularJS Application variable
1 <DivNg-app=""Ng-init= "Firstname= ' qiuchen '">2 <P>FirstName:<spanNg-bind= "FirstName"></span></P> 3 </Div>
HTML5 allow extended (self-made) properties to start with data-
The Angularjs property starts with ng-, but you can use data-ng-to make the Web page valid for HTML5
ANGULARJS-expression
AngularJS expression is written in double curly braces {{Expression}},expression is generally a variable name
AngularJS expressions bind data to HTML, which is similar to the Ng-bind directive
AngularJS will "output" data where the expression is written
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables
Like what
Or
{{firstName + "" + LastName}}AngularJS applications
Including:
1.AngularJS Modules (module)
2.AngularJS Controllers (Controller)
AngularJS Module
// MyApp is the variable name in ng-app= "MyApp" (the "MyApp" parameter corresponds to the HTML element that executes the app.) )// represents the new module, the empty array represents the module does not depend on other modules var app = Angular.module ("myApp", []);AngularJS Controller
1 <!-- --> 2 ng-app = "" Ng-controller = "Myctrl" ></ div >
1 // Myctrl is a JavaScript function 2 function ($scope) {3 $scope. FirstName = ' Qiuchen '; 4 $scope. LastName = ' Liu '; 5 });The role of Ng-model:
1 < type= "text" ng-model= "FirstName"/>
1. Get the contents of the current input box in real time
2. Define the variable name FirstName and store a value, the page or controller is convenient to call this variable and modify the contents of the variable, real-time output to the element defined Ng-model
ng-repeat directive
The ng-repeat instruction clones an HTML element once for each item in the collection (in the array).
The Ng-model directive is used to bind application data to the value of the HTML controller (input, select, textarea).
The Ng-model directive binds the value of the input field to a variable created by AngularJS.
"Two-way binding"
The value of the variable name in the Ng-model is changed when the value of the input box containing the Ng-model property is modified.
The Ng-model directive can provide status values for application data (invalid, dirty, touched, error):
1 <formNg-app=""name= "MyForm"Ng-init= "MyText = ' [email protected] '">2 Email:3 <inputtype= "Email"name= "MyAddress"Ng-model= "MyText"Required></P>4 <H1>State</H1>5 {{myform.myaddress. $valid}} If the value entered is valid.6 {{myform.myaddress. $dirty}} If the value is changed7 {{myform.myaddress. $touched}} If clicked via Touch screen8 </form>
State
True if the value entered is legal.
True if the value is changed.
True if clicked through the touch screen.
The Ng-model directives provide CSS classes for HTML elements based on their state:
1 <style>2 Input.ng-invalid{3 Background-color:LightBlue;4 }5 </style>6 <Body>7 8 <formNg-app=""name= "MyForm">9 Enter your name:Ten <inputname= "MyAddress"Ng-model= "text"Required> One </form>
Ng-show instruction, the data in the label will be displayed when ng-show= "true"
1 <formNg-app=""name= "MyForm">2 Email:3 <inputtype= "Email"name= "MyAddress"Ng-model= "text">4 <spanNg-show= "myform.myaddress. $error. Email">Not a legitimate email address.</span>5 </form>
AngularJS scope (SCOPE)
Scope (scope) is the link between HTML (view) and JavaScript (Controller).
Scope is an object that has methods and properties available.
Scope can be applied to views and controllers.
When you create a controller in AngularJS, you can pass $scope object as a parameter:
1 var app = Angular.module (' myApp ', []); 2 3 function ($scope) {4 $scope. Carname = "Volvo"; 5 });Views (HTML) can obtain these properties when $scope objects are added to the controller.
View, you do not need to add a $scope prefix, just add a property name, such as: {{carname}}.
The AngularJS application consists of the following:
View, which is HTML.
Model (models), the data available in the current view.
Controller, the JavaScript function, can add or modify properties.
Scope is a model.
Scope is a JavaScript object with properties and methods that can be used in views and controllers.
Scope scope
All applications have a $rootScope that can function in all of the HTML elements contained in the NG-APP directive.
$rootScope can act on the entire application. is the bridge of scope in each controller. Values defined with Rootscope can be used in each controller.
The AngularJS controller controls the data for the AngularJS application.
The AngularJS controller is a regular JavaScript object.
The Ng-controller directive defines the application controller.
A controller is a JavaScript object that is created by the constructor of a standard JavaScript object.
You can also define the controller to an external JS file.
ANGULARJS filter (very good, very useful!) ）
Filters can be added to expressions and directives using a pipe character (|).
Currency format numbers as currency formats.
Filter selects a subset from the array item.
The lowercase formatted string is lowercase.
Order by to arrange an array based on an expression.
Uppercase formatted string is uppercase.
Input filters can be added to the directive with a pipe character (|) and a filter followed by a colon and a model name.
Filter filter Select a subset from the array
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "ZH-CN">4 <MetaCharSet= "UTF-8">5 <title>Run the program in the browser, enter the age, and see the effect of filter filtering</title>6 </Head>7 <Body>8 9 <!--Filter Filters -Ten <DivNg-app= "MYAPP"Ng-controller= "Myctrl"> One <P>Input filter:<inputtype= "text"Ng-model= "Test" /></P> A <ul> - <Ling-repeat= "x in Names | filter:test | By: ' Age '"> - {{x.name + x.age}} the </Li> - </ul> - </Div> - + <!--introduction of Angularjs - - <Scriptsrc= "Angular.min.js"></Script> + <Scriptsrc= "Personcontroller.js"></Script> A at - </Body> - </HTML>
Personcontroller.js file:
//instantiating angular application objectsvarApp = Angular.module (' myApp '), []);//Defining the ControllerApp.controller (' Myctrl ',function($scope) {$scope. FirstName= ' Qiuchen '; $scope. LastName= ' Liu '; $scope. FullName=function () {return$scope. FirstName +$scope. LastName;}; $scope. Names= [{' Name ': ' Alice ', ' age ': 17},{' Name ': ' Burgess ', ' age ': 26},{' Name ': ' QQ ', ' age ': 23},{' Name ': ' UserB ', ' age ': 33},{' Name ': ' UserC ', ' age ': 19},{' Name ': ' UserD ', ' age ': 20},{' Name ': ' Usere ', ' age ': 47},{' Name ': ' Userf ', ' age ': 28}];});
AngularJS (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
