AngularJS学习笔记

久闻AngularJS大名，只可惜一直未鼓起勇气学习，今天脑袋一热，收集资料开始了学习之旅。

AngularJS在我脑子里的印象，就是那对大括号了

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

注：数学运算必须要用单独的圆括号包裹。

例1： {{'a=' + (1+1)}}

结果：a = 2

例2：{{'a=' + 1+1}}

结果：a = 11

数据绑定

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

ng-bind="name" 是通过 ng-model="name" 进行同步。

    <p>在输入框中尝试输入:</p>
    <p>姓名: <input type="text" ng-model="name"></p>
    <p>您输入了：<b ng-bind="name"></b></p>

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素

例1：数组循环绑定

    <h4>简单循环：</h4>
    <select>
        <option ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">{{i}}</option>
    </select>

例2：无序列表循环绑定+筛选+排序+控制器示例；

ng-controller 指令定义了应用程序控制器，一个应用中可以有多个控制器，某一控制器的相关元素必须在控制器的子元素集中。

orderBy：根据某个表达式排列数组。

filter：从数组项中选择一个子集。

currency：格式化数字为货币格式。

      <ul ng-controller="PhoneListCtrl">
        <li>全文筛选：<input ng-model="query">
        排序：<select ng-model="orderProp">
                  <option value="name">name asc</option>
                  <option value="age">age asc</option>
              </select></li>
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
          {{phone.name}}
        <p>{{phone.snippet}}</p>
        </li>
      </ul>

        var app = angular.module('DemoApp', []);
        app.controller('PhoneListCtrl',function ($scope) {
          $scope.phones = [
            {"name": "2Nexus S",
             "snippet": "Fast just got faster with Nexus S.","age": 3},
            {"name": "3Motorola XOOM™ with Wi-Fi",
             "snippet": "The Next, Next Generation tablet.Has Wifi","age": 2},
            {"name": "1MOTOROLA XOOM™",
             "snippet": "The Next, Next Generation tablet.","age": 1}
          ];
          //默认排序
          $scope.orderProp = 'name';
        });

例3：获取远程数据绑定Table+点击列头排序+操作按钮生成示例；

ng-click定义了一个事件，通过此事件改变序列的排序；

$http.get获取远程数据，可以是json或text/plain

表格可以通过odd和even进行奇偶行控制

      <table class="table" ng-controller="UserListCtrl">
        <thead>
            <tr>
                <th></th>
                <th ng-click="OrderClick('name')">用户名</th>
                <th ng-click="OrderClick('email')">邮件地址</th>
                <th ng-click="OrderClick('mobile')">手机</th>
                <th ng-click="OrderClick('logins')">登录次数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users | filter:queryUser | orderBy:userOrder">
                <td>{{ $index + 1 }}</td>
                <td>{{user.name}}</td>
                <td>{{user.email}}</td>
                <td>{{user.mobile}}</td>
                <td>{{user.logins}}</td>
                <td><a ng-href="Modify.asp?ID={{user.id}}">编辑</a> | <a ng-href="Delete.asp?ID={{user.id}}">删除</a></td>
            </tr>
        </tbody>
      </table>

        app.controller('UserListCtrl', function($scope, $http) {
            $http.get("UserData.asp")
                 .success(function(response) {
                        $scope.users = response.records;
                        $scope.userOrder = 'mobile';
                  });
            $scope.OrderClick = function(field){
                $scope.userOrder = field;
            };
        });

表单示例：

<div ng-app="DemoApp" ng-controller="formCtrl">
  <form novalidate>
    用户名:<br>
    <input type="text" ng-model="user.name"><br>
    邮件地址:<br>
    <input type="text" ng-model="user.email">
    <br><br>
    <button ng-click="save()">Save</button>
    <button ng-click="reset()">RESET</button>
  </form>
</div>

        app.controller('formCtrl', function($scope, $http) {
            $scope.master = {name: "admin1", email: "admin@bomboo.com"};
            $scope.save = function(){
                $http.post("UserSave.asp",$scope.user)
                    .success(function(response){
                        alert('成功保存了' + response);
                    });
            };
            $scope.reset = function() {
                $scope.user = angular.copy($scope.master);
            };
            $scope.reset();
        });

此时点击保存，发现服务端并没有收到任何POST提交的东西，这是因为AngularJS提交的数据为JSON格式，而不是jquery式的form格式，我们需要重写一个httpProvider改变其提交数据的方式

        function normalProvider($httpProvider) {
          $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
          $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
         
           
          var param = function(obj) {
            var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
              
            for(name in obj) {
              value = obj[name];
                
              if(value instanceof Array) {
                for(i=0; i<value.length;i++){
                  subValue = value[i];
                  fullSubName = name + '[' + i + ']';
                  innerObj = {};
                  innerObj[fullSubName] = subValue;
                  query += param(innerObj) + '&';
                }
              }
              else if(value instanceof Object) {
                for(subName in value) {
                  subValue = value[subName];
                  fullSubName = name + '[' + subName + ']';
                  innerObj = {};
                  innerObj[fullSubName] = subValue;
                  query += param(innerObj) + '&';
                }
              }
              else if(value !== undefined && value !== null)
                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
            }
              
            return query.length ? query.substr(0, query.length - 1) : query;
          };
          $httpProvider.defaults.transformRequest = [function(data) {return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }];
        };

修改模块初始化语句

var app = angular.module('DemoApp', [], normalProvider);

表单验证示例：

<h4>表单验证示例</h4>

      <form name="myForm" novalidate ng-submit="submitForm();">
             <h3>Basic example</h3>

            <div class="form-section">
                <p>Username:</p>
                <input type="text" name="username1" ng-model="username1" required />
                <input type="submit" ng-disabled="myForm.username1.$pristine || myForm.username1.$dirty && myForm.username1.$invalid">
                <div class="custom-error" ng-show="myForm.username1.$dirty && myForm.username1.$invalid">Invalid:
<span ng-show="myForm.username1.$error.required">Username is required.</span>

                </div>
                <p>Email:</p>
                <input type="email" name="email1" ng-model="email1" required />
                <input type="submit" ng-disabled="myForm.email1.$pristine || myForm.email1.$dirty && myForm.email1.$invalid"/>
                <div class="custom-error" ng-show="myForm.email1.$dirty && myForm.email1.$invalid">Invalid:
<span ng-show="myForm.email1.$error.required">Email is required.</span>

                    <span ng-show="myForm.email1.$error.email">Please, write a valid email address.</span>
                </div>
            </div>
        </form>

AngularJS支持HTML5验证及自定义的验证类型

<input type="text"
ng-model="{string}"
[name="{string}"]
[required]
[ng-required="{string}"]
[ng-minlength="{number}"]
[ng-maxlength="{number}"]
[ng-pattern="{string}"]
[ng-change="{string}"]>

<input type="text" required />
<input type="text" ng-minlength=5 />
<input type="text" ng-maxlength=20 />
<input type="text" ng-pattern="/a-zA-Z/" />    
<input type="email" name="email" ng-model="user.email" />
<input type="url" name="homepage" ng-model="user.facebook_url" />

自定义验证：

<input type="text" name="username" ng-model="username" 
ng-pattern="/^[a-zA-Z0-9]{4,10}$/" 
ng-命令="tableDB.userDBField" />

.directive('ngUnique', ['$http', function ($http) {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
elem.on('blur', function (evt) {
scope.$apply(function () {
$http({ 
method: 'POST', 
url: 'backendServices/checkUsername.php', 
data: { 
username:elem.val(), 
dbField:attrs.ngUnique 
} 
}).success(function(data, status, headers, config) {
ctrl.$setValidity('unique', data.status);
});
});
}
}
}
]);

表单验证状态

//未被修改
myForm.email1.$pristine;

//已被修改
myForm.email1.$dirty
// Boolean. True if the user has already modified the form.

//通过验证
myForm.email1.$valid

//未通过验证
myForm.email1.$invalid

// 错误，可能是以下情况:
// { required: false, pattern:true }
// or { required: false, email:true }
myForm.email1.$error

 PS：AngularJS 1.0.1版支持IE8，以后的表示都不支持了，悲催。。