Angularjs first experience, realize two-way data binding! Use experience: relatively cool

Using the first experience: NG bidirectional data binding:

Simplest two-way data binding: (using the default module control)

<ng-app><type= "text"  Ng-model  = ' ngname '><H1>{{ngname}}</ H1 > </ Body >

Complete initialization of the data:

 //initialization principle: After Ng-app initial, it will be assigned an initial value in Ng-init: World, this value will be automatically bound to the following;  <  body  ng-app ng-init  = "ngname = ' Zhang San '"  >  <  input  type  Span style= "COLOR: #0000ff" >= "text"   Ng-model  = ' Ngname '  >  <  h1  >  {{Ngname}} </ h1  >  </ body  >  

Note: Angularjs default is bidirectional data binding, single data binding {{:: Ngname}}

Using Custom Module Control: (Complete initialization of data)

<BodyNg-app= "MYAPP"Ng-controller= "Myappcontroller"><inputtype= "text"Ng-model= ' UserName '><H1>{{UserName}}</H1></Body><Scripttype= "Text/javascript">varmyApp=Angular.module ('myApp', []); Myapp.controller ('Myappcontroller',['$scope',function($scope) {$scope. UserName= 'John Doe';}]);</Script>

You can also do this:

<BodyNg-app= "MYAPP"Ng-controller= "Myappcontroller"><inputtype= "text"Ng-model= ' User.Name '><inputtype= "text"Ng-model= ' User.age '><H1>{{User.Name}} is at the age of {{user.age}}</H1></Body><Scripttype= "Text/javascript">varmyApp=Angular.module ('myApp', []); Myapp.controller ('Myappcontroller',['$scope',function($scope) {$scope. User= {}; $scope. User.Name= "Zhang San"; $scope. User.age=  -;}]);</Script>

Angularjs reduces the number of DOM operations:

Case One : achieve click Increase

<BodyNg-app><inputtype= ' number 'Ng-model= ' value '><inputtype= "button"Ng-click= ' value = Value+1 'value= "Add"><Scripttype= ' Text/javascript 'src= ' Node_modules/angular/angular.js '></Script><Scripttype= ' Text/javascript '></Script></Body>

Case Two : Implementation of simple addition operations

<BodyNg-app><inputtype= "Number"value= "1"Ng-model= ' Parameter1 '><span>+</span><inputtype= "Number"value= "2"Ng-model= ' Parameter2 '><inputtype= "button"value="="Ng-click= ' result = Parameter1+ parameter2 '><inputtype= "text"Ng-model= ' result '><Scripttype= ' Text/javascript 'src= ' Node_modules/angular/angular.js '></Script></Body>

four features of Angularjs :

1, MVC;

2, modular;

3, automatic two-way data binding;

4, instruction system;

Angularjs Installation :

1. Download the ANGULARJS package directly:

-Https://github.com/angular/angularjs.js/releases

2. Using Angularjs on a CDN

-http://cdn.code.baidu.com/

3. Installation using Bower (recommended)

-Bower Install Angular

4, recommended to use NPM installation (recommended)

-NPM Install angular--save

AngularJS Use summary :

1, Angularjs to minimize the DOM operation on the page;

2, let JavaScript, focus on business logic code;

3, through the custom instruction realizes the component programming;

4, the code structure is more simple;

5. Angularjs has liberated the frequent dom operations in traditional JavaScript, while also restoring the nature of JavaScript;

Angularjs first experience, realize two-way data binding! Use experience: relatively cool