Angularjs基础知识及示例汇总

angularjs是google开发的一款高大上的前端mvc开发框架。
Angularjs官网：https://angularjs.org/ 官网有demo,访问可能需要FQ
Angularjs中国社区：http://www.angularjs.cn/ 适合初学者
引用文件：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
使用angular注意
引用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中的 i for info
复制代码代码如下:
<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
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）下次本人将单独拿出来讲。