Angularjs basics and Examples

Angularjs basics and Examples

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

Copy codeThe Code is as follows:
<Label for = "name"> name: </label>
<Input type = "text" ng-model = "name" id = "name"/>
<Hr>
Hello: {name | 'liteng '}}

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

Event binding use case

Copy codeThe Code is as follows:
<Div>
Unit price: <input type = "number" min = 0 ng-model = "price" ng-init = "price = 299">
Quantity: <input type = "number" min = 0 ng-model = "quantity" ng-init = "quantity = 1">
<Br>
Total price: {(price) * (quantity )}}
<Dt>
<Dl> Note: </dl>
<Dd> html5 input: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_input_type.asp </a> </dd>
<Dd> ng-init: Set the initial value </dd>
</Dt>
</Div>

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

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

Copy codeThe Code is as follows:
<P ng-init = "value = 'Hello world'" >{{ value }}</p>

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

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

Copy codeThe Code is as follows:
<Div ng-init = "friends = [{name: 'jhon', age: 25 },{ name: 'Mary ', age: 28}]"> </div>
<P> I have {friends. length} friends. They are </p>
<Ul>
<Li ng-repeat = "friend in friends">
[{$ Index + 1}]: {friend. name} age: {friend. age }}
</Li>
</Ul>

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

Ng-click: dom click Event

Copy codeThe Code is as follows:
<Div ng-controller = "ctrl">
<Button ng-dblclick = 'showmsg () '>{{ a }}</button>
</Div>
<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

Copy codeThe Code is as follows:
<Div ng-show = "! Show ">
Ng-show = "! Show"
</Div>
<Div ng-show = "show">
Ng-show = "show"
</Div>

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

Ng-hide: Set element hiding

Copy codeThe Code is as follows:
<Div ng-hide = "aaa">
Ng-hide = "aaa"
</Div>
<Div ng-hide = "! Aaa ">
Ng-show = "! Aaa"
</Div>

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

Use ng-show to create the toggle Effect

Copy codeThe Code is as follows:
<H2> toggle <A href ng-click = "showLog =! ShowLog "> display logo </a>
<Div ng-show = "showLog">

</Div>

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.

Copy codeThe Code is as follows:
<Div ng-style = "{width: 100 + 'px ', height: 200 + 'px', backgroundColor: 'red'}">
Box
</Div>

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

Filter: filter Fields

Copy codeThe Code is as follows:
<Div >{{ 9999 | number }}</div> <! -- 9,999 -->
<Div >{{ 9999 + 1 | number: 2 }}</div> <! -- 10,000.00 -->
<Div >{{ 9*9 | currency }}</div> <! -- $81.00 -->
<Div >{{ 'Hello world' | uppercase }}</div> <! -- Hello world -->

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

Ng-template: The template can be loaded.

Copy codeThe Code is as follows:
<Div ng-include = "'tpl.html '"> </div>

Tpl.html

Copy codeThe Code is as follows:
<H1> hello
Http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$ Http: A method similar to ajax works well.

Copy codeThe Code is as follows:
<Div class = "container" ng-controller = "TestCtrl">
<H2> HTTP request-method 1 <Ul>
<Li ng-repeat = "x in names">
{X. Name }}+ {x. Country }}
</Li>
</Ul>
</Div>
<H2> method 2 <Div ng-controller = "TestCtrl2">
<Ul>
<Li ng-repeat = "y in info">
{Y. aid }}+ {y. title }}
</Li>
</Ul>
</Div>
<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.