Angularjs basics and examples _ AngularJS

Source: Internet
Author: User
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.

Related Article

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.