01 Angular

实例代码

html部分

<div ng-app="myApp" ng-controller="demoController">
    <h1>使用NG实现双边数据绑定</h1>
    <p>{{message}}</p>
    姓名：<input type="text" placeholder="请输入姓名" ng-model="user.name"><br>
    密码：<input type="password" placeholder="请输入6位数密码" ng-model="user.password"><br>
    <p>hello,{{user.name}},你的密码是：{{user.password}}</p>
    <input type="button" ng-click="show()" value="console显示对象">
</div>

JavaScript部分

<script src="bower_components/angular/angular.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('demoController',function ($scope) {
        $scope.user={
            name:'xiao',
            password:'123456'
        };
        $scope.show = function () {
            console.log($scope.user);
        }
        $scope.message = "请按要求输入!";
        $scope.$watch('user.password',function (now,old) {
            // 当user.username发生变化时触发这个函数
            if (now){
                if (now.length <6){
                    $scope.message = '请输入6位数密码';
                }else {
                    $scope.message = '';
                }
            }else {
                $scope.message = '请按要求输入';
            }
        });
    })
</script>

笔记:

1.注册模块

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

• 第一个参数是这个模块名字:myApp
• 第二个参数是这个模块所依赖的模块,如果不依赖任何模块也必须传递第二个参数
  如果没有传递第二个参数，angular.module就不是创建一个模块
  angular.module('myModule', []) 返回 刚刚创建的模块对象
• <div ng-app="myApp" ng-controller="demoController"> ，ng-app通常加在HTML或者body标签，一个网页中可以创建多个节点 ng-app（但不推荐）

2.注册控制器

app.controller('demoController',function ($scope) {  }

• 控制器是必须出现在某个模块下的，想创建一个控制器必须先创建模块：如‘app’
• angular在执行控制器函数时，会根据参数的名字（$scope）去自动的注入对象
  根据参数名称传递对应对象，所以必须要写正确的参数名称，如：$scope、$http
• 由于压缩代码会改变参数名称，注册控制的标准方式就是通过第二个参数传递数组的方式（数组的成员最后一个就是原本的控制器函数，前面的成员都是需要注入的对象名称）

注册控制器的标准写法：

module.controller('HelloController', ['$scope','$http', function(a,b) {
      console.log(a);
    }]);

3.$watch

官方的API中提供了一个$scope.$watch方法

$scope.$watch('user.username', function(now, old) {
        // 当user.username发生变化时触发这个函数
         console.log('now is ' + now);
        console.log('old is ' + old);
});

注意： angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite

angular.element('body');