Angularjs basics and examples _ AngularJS

This article summarizes some basic angularjs knowledge and examples, and shares them with you, hoping to help you. Angularjs is a high-end mvc development framework developed by google.

Angularjs Official Website: https://angularjs.org/official website has demo, access may need FQ

Angularjs Chinese community: http://www.angularjs.cn/for beginners

Reference file: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

Note when using angular

Reference angularjs Library: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1... can be downloaded on github in this example
Add ng-app = "appName" to the region you are using, or directly add ng-app (global ).
Set controller ng-controller = "Ctrl ".
Note the following points for the test example:

Angularjs code needs to be introduced before head, the author uses angular-1.0.1.min.js, please pay attention to the version difference.
All small examples are run in the following regions. Remember to add ng-app in the target region.
Below are some small cases to illustrate the Common commands and usage of angularjs by default.

Hello world Program (dual-data binding)

Use ng-model = {name} to bind data

The Code is as follows:

Name:


Hello: {name | 'liteng '}}

Http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

Event binding use case

The Code is as follows:

Unit price:
Quantity:


Total price: {(price) * (quantity )}}

Note:

Html5 input: http://www.w3school.com.cn/html5/att_input_type.asp </a>Http://www.w3school.com.cn/html5/att_input_type.asp> http://www.w3school.com.cn/html5/att_input_type.asp </a>

Ng-init: Set the Initial Value

Http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

Ng-init: attribute values can be specified by default.

The Code is as follows:

{Value }}

Http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

Ng-repeat: used for iterative data similar to I for info in js

The Code is as follows:

I have {friends. length} friends. They are

• 
  [{$ Index + 1}]: {friend. name} age: {friend. age }}
  

Http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

Ng-click: dom click Event

The Code is as follows:

{}}

Script
Function ctrl ($ scope ){
$ Scope. a = 'hello ';
$ Scope. showMsg = function (){
$ Scope. a = 'World ';
}
}
Script

Http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

Ng-show: sets the element display.

Note: ng-show = "! Xx ": Add a value before the property value! Confirm the display. If no! Not Displayed if you are not sure

The Code is as follows:

Ng-show = "! Show"

Ng-show = "show"

Http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

Ng-hide: Set element hiding

The Code is as follows:

Ng-hide = "aaa"

Ng-show = "! Aaa"

Http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

Use ng-show to create the toggle Effect

The Code is as follows:

Toggle
Show logo

Http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

Ng-style: similar to the default style

Note the writing format: strings must be enclosed in quotation marks.

The Code is as follows:

Box

Http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

Filter: filter Fields

The Code is as follows:

{9999 | number }}

{{ 9999 + 1 | number: 2 }}

{9*9 | currency }}

{'Hello world' | uppercase }}

Http://2.liteng.sinaapp.com/angularjsTest/filter.html

Ng-template: The template can be loaded.

The Code is as follows:

Tpl.html

The Code is as follows:

Hello

Http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$ Http: A method similar to ajax works well.

The Code is as follows:

HTTP request-method 1

• 
  {X. Name }}+ {x. Country }}
  

Method 2

• 
  {Y. aid }}+ {y. title }}
  

Script
// Method 1
Var TestCtrl = function ($ scope, $ http ){
Var p = $ http ({
Method: 'get ',
Url: 'json/date. json'
});
P. success (function (response, status, headers, config ){
$ Scope. names = response;
});
P. error (function (status ){
Console. log (status );
});
}
// Method 2
Function TestCtrl2 ($ scope, $ http ){
$ Http. get ('json/yiqi_article.json '). success (function (response ){
$ Scope.info = response;
});
}
Script

Http://2.liteng.sinaapp.com/angularjsTest/ajax.html

All the above code: https://github.com/litengdesign/angularjsTest

Implementation demo: http://2.liteng.sinaapp.com/angularjsTest/index.html

As for angularjs routing (router) and directive (directive), I will talk about it separately next time.