AngularJS 基础指令与示例详解

AngularJS 基础介绍与引入

AngularJS 是由 Google 开发的一款前端 MVC 开发框架。

AngularJS 官网地址为 https://angularjs.org/，官网提供了相关演示示例，访问时可能需要使用代理工具。

AngularJS 中国社区地址为 http://www.angularjs.cn/，该社区适合初学者学习使用。

引用文件地址为：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

使用 AngularJS 时需要注意以下事项。

引用 AngularJS 库：https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... 可以在本节示例的 GitHub 仓库中下载。需要在使用的区域添加 ng-app="appName"，或者直接添加 ng-app（全局作用域）。设置控制器使用 ng-controller="Ctrl"。测试示例时请注意以下几点。

需要在 head 标签之前引入 AngularJS 代码，作者使用的是 angular-1.0.1.min.js，请注意版本差异。所有小示例均在以下区域运行，记得在作用域区域加上 ng-app。下面通过一些小的案例来说明 AngularJS 默认常见的指令和用法。

核心指令与数据绑定示例

Hello World 程序（双数据绑定）。

使用 ng-model={{name}} 来绑定数据。

<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

事件处理与模板控制

事件绑定使用小案例。

<div>
单价：<input type="number" min=0 ng-model="price" ng-init="price=299">
数量: <input type="number" min=0 ng-model="quantity" ng-init="quantity=1">
<br>
总价：{{(price) * (quantity)}}
<dt>
<dl>注:</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:设定初始值</dd>
</dt>
</div>

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

ng-init: 可默认指定属性值。

<p ng-init="value='hello world'">{{value}}</p>

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

ng-repeat: 用于迭代数据，类似于 js 中的 for 循环。

<div ng-init="friends=[{name:'Jhon',age:25},{name:'Mary',age:28}]"></div>
<p>我有{{friends.length}} 朋友.他们是</p>
<ul>
<li ng-repeat="friend in friends">
[{{$index+1}}]:{{friend.name}}年龄为：{{friend.age}}
</li>
</ul>

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

ng-click: dom 的点击事件。

<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: 设置元素显示。

注：ng-show="!xx": 在属性值前面加！表示确定显示，如果不加！表示不确定则不显示。

<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: 设置元素隐藏。

<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

运用 ng-show 制作 toggle 效果。

<h2>toggle</h2>
<a href ng-click="showLog=!showLog">显示logo</a>
<div ng-show="showLog">
<img ng-src="http://liteng.org/sites/default/files/logo.png" alt="">
</div>

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

ng-style: 和默认 style 类似。

这里请注意书写格式：字符串需要用引号包含。

<div ng-style="{width:100+'px',height:200+'px',backgroundColor:'red'}">
box
</div>

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

数据过滤与 HTTP 请求

filter: 过滤字段。

<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: 可以加载模板。

<div ng-include="'tpl.html'"></div>

tpl.html

<h1>hello</h1>

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

$http: 一个类似 ajax 的方法很管用。

<div class="container" ng-controller="TestCtrl">
<h2>HTTP请求-方法1</h2>
<ul>
<li ng-repeat="x in names">
{{x.Name}}+{{x.Country}}
</li>
</ul>
</div>
<h2>方法2</h2>
<div ng-controller="TestCtrl2">
<ul>
<li ng-repeat="y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<script>
//方法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);
         });
      }
//方法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

以上所有的 code:https://github.com/litengdesign/angularjsTest

实现的demo:http://2.liteng.sinaapp.com/angularjsTest/index.html

至于 angularjs 的路由（router）和指令（directive）下次本人将单独拿出来讲。