angularJS 小记

刚刚接触angularJS，网上学习了一遍菜鸟教程（http://www.runoob.com/angularjs/angularjs-tutorial.html），做了些基础知识的笔记。

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

语法：双括号{{ …. }}
根元素: ng-app=”” ：初始化应用程序
初始化数据：ng-init:”a=4; b=5; ”(不常用)
                          字符串c=’alison’；
对象：person={a:”1”,b:”2”}
数组：array={1,2,3}
显示数据：直接使用表达式{{ a+b }}
绑定数据：ng-bind=”a+b” (不常用)
              ng-model:”a+b”
（3）循环元素: ng-repeat:
//放入列表
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
  </ul>
<div>
//放入表格
<tr ng-repeat="x in names | orderBy : 'Country' ">
<td>{{ $index + 1 }}</td> //显示序列号
     <td>{{ x.Name }}</td>
      <td>{{ x.Country | uppercase }}</td>
   </tr>
//对表格使用css样式
table tr:nth-child(odd) { //偶数
   background-color: #f1f1f1;
}
table tr:nth-child(even) { //奇数
   background-color: #ffffff;
}
//表格使用$even和$odd
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1"> {{ x.Name }} </td>
<td ng-if="$even"> {{ x. Country }} </td>
</tr>

（4）自定义指令：.directive函数
var app = angular.module(“myApp”,[]);
app.directive(“runoobDirective”,function(){
return{ template : “<h1>hello</h1>” }
}
调用自定义指令：< runoobDirective > </ runoobDirective >
<div runoob-directive> </div>
<div class=”runoob-directive”> </div>
<!-- runoob-directive -->
限制指令调用方式return{ restrict:”A” }
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

(5)ng-model:
..把数据绑定到控制器：
<input ng-model=”name”>

var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function($scope){
$scope.name=”Mike”;
})

实时双向绑定：
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
     <h1>你输入了: {{name}}</h1> //随着用户输入的改变而改变
</div>
验证用户输入：
<form ng-app="" name="myForm">
    Email : <input type="email" name="myAddress" ng-model="text">
      <span ng-show="myForm.myAddress.$error.email">非正确的邮箱地址</span>
</form>
应用状态：
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)</p>
</form>
ng-model 指令根据表单域的状态添加/移除以下类：
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-invalid 不合法
ng-valid
ng-dirty 值改变
ng-pending
ng-pristine

( 6 )Scope作用域
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
<ul> <li ng-repeat="x in names">{{x}} </ul>
//控制器,javascript对象
app.controller(“myCtrl”,function($scope){
 $scope.names = ["Emil", "Tobias", "Linus"]; }
根作用域$rootScope:
它可以作用在 ng-app 指令包含的所有 HTML 元素中，用 rootscope 定义的值，可以在各个 controller 中使用。与scope用法相同，作用域不同。

（7）Angular JS过滤器
用一个管道字符（|）添加到表达式和指令中
滤器可用于转换数据：
currency ： 格式化数字为货币格式
filter ： 从数组项中选择一个子集
lowercase ： 格式化字符串为小写
<p>姓名为 {{ lastName | uppercase }}</p>
uppercase ： 格式化字符串为大写
orderBy ： 根据某个表达式排列数组

//用户输入筛选功能
<li  ng-repeat = "x in names | orderBy:'country' ">
{{ x.name + ', ' + x.country }}
<p>输入过滤:</p>
<p> <input type="text" ng-model="test"> </p>
<ul>
<li ng-repeat = "x in names | filter : test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

（8）AngularJS XMLHttpRequest
用于读取web服务器上的数据，例如：.php , .sql , .apsx等
$http.get(url) 是用于读取服务器数据的函数
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php");
    .success(function(response) {$scope.names = response.records;});
});

（9）AngularJs HTML DOM
ng-show指令
隐藏或显示一个 HTML 元素
ng-show="true/false" //….显示/隐藏
<p  ng-show="hour > 12" >我是可见的。</p> //…用表达式判断现实和隐藏

ng-disabled指令
直接绑定HTML的disabled属性
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮 // 用复选框控制按钮的disabled属性
</p>
<p>
{{ mySwitch }}
</p>
</div>

(9) AngularJs 事件
ng-click 指令 点击事件
ng-click="count = count + 1";

<div ng-app="myApp" ng-controller="personCtrl">
<button  ng-click="toggle()" >>隐藏/显示</button>
<p ng-hide="myVar">….</p>
</div>
<script>
var app = angular.module('myApp', []); //创建模块module, JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

app.controller('personCtrl', function($scope) {
    $scope.myVar = false; //使默认属性为false
    $scope.toggle = function() {
        $scope.myVar = ! $scope.myVar; //每调用一次toggle(),false/true变换一次
    };
});
</script>

(10) .AngularJS表单
AngularJS 表单是输入控件的集合，input , select , button , textarea, HTML 表单通常与 HTML 控件同时存在.
表单验证：
<p>用户名:<br>
   <input type="text" name="user" ng-model="user" required>
   <span style="color:red"  ng-show = " myForm . user . $dirty && myForm . user . $invalid">
   <span  ng-show = "myForm . user . $error . required">用户名是必须的。</span>
   </span>
</p>

<input type="submit" ng-disabled = "myForm . user . $dirty && myForm . user . $invalid ||
  myForm . email . $dirty && myForm . email . $invalid"> // 表单不为空且合法

$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

（11）AngularJS全局 API 
全局 API 函数使用 angular 对象进行访问，例如：

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

（12）AngularJS包含
ng-include = “ ‘index.htm’ ”