angular初体验

所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中
ng-app是ng的入口，表示当前元素的所有指令都会被angular管理（对每一个指令进行分析和操作）

利用angular实现双向绑定：

 <div ng-app ng-init="user.name='world'">
     <h1>使用NG实现双边数据绑定</h1>
     <input type="text"
       placeholder="请输入你的姓名"
       ng-model="user.name">
     <p>hello <strong>{{user.name}}</strong></p>
   </div>

模块：

 <body>
   <div ng-app="myApp" ng-controller="DemoController">
     <h1>使用NG实现双边数据绑定</h1>
     <input type="text" placeholder="请输入你的姓名" ng-model="user.name">
     <p>hello <strong>{{user.name}}</strong></p>
     <input type="button" ng-click="show()">
   </div>
   <script src="bower_components/angular/angular.js"></script>
   <script>
     // 注册模块 通过module函数，
     // 第一个参数是这个模块的名字
     // !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数，如果没有传递第二个参数，angular.module就不是创建一个模块
     // angular.module 返回 刚刚创建的模块对象
    var app=  angular.module('myApp',[]);
     // app.controller 方法用于创建一个控制器，所创建的控制器属于myApp模块
     // app.controller('DemoCtrl');
     // 控制器函数的参数中有一个$scope
     // angular.module('myApp').controller('DemoController', function($scope) {
     //   // 当控制器执行时会自动执行的函数
     //   $scope.user = {};
     //   $scope.user.name = '张三';
     //   // $scope不仅仅可以往视图中暴露数据，还可以暴露行为
     //   $scope.show = function() {
     //     console.log($scope.user);
     //   };
     // });
   </script>
 </body>

3，angular控制器：

<body ng-app="myModule" ng-controller="HelloController">
  <script src="bower_components/angular/angular.js"></script>
  <script>
    // 由于控制器是必须出现在某个模块下的，想创建一个控制器必须先创建模块
    var module = angular.module('myModule', []); // 返回的就是模块对象

    // angular在执行控制器函数时，
    // 会根据参数的名字（$scope）去自动的注入对象
    // 根据参数名称传递对应对象，所以必须要写正确的参数名称
    // module.controller('HelloController', function($scope) {
    //   console.log($scope);
    // });
    //
    // 由于压缩代码会改变参数名称，注册控制的标准方式就是通过第二个参数传递数组的方式（数组的成员最后一个就是原本的控制器函数，前面的成员都是需要注入的对象名称）
    module.controller('HelloController', ['$scope','$http', function(a,b) {
      console.log(a);
    }]);
  </script>
</body>

控制器2：

 <body>
   <table border="1" ng-controller="WorldController">
     <tr>
       <td>用户名</td>
       <td>
         <input type="text" ng-model="user.username">
       </td>
     </tr>
     <tr>
       <td>密码</td>
       <td>
         <input type="password" ng-model="user.password">
       </td>
     </tr>
     <tr>
       <td></td>
       <td>
         <input type="button" ng-click="login()" value="登陆">
       </td>
     </tr>
     <tr>
       <td></td>
       <td>{{message}}</td>
     </tr>
   </table>
   <script src="bower_components/angular/angular.js"></script>
   <script>
     // 创建一个模块
     var app = angular.module('HelloApp', []);
     // 为这个模块创建一个控制器
     app.controller('WorldController', ['$scope', function($scope) {

       // 数据
       $scope.user = {
         username: '',
         password: ''
       };
       $scope.demo = '';

       // 行为数据
       $scope.login = function() {
         // 因为数据的变化时双向的同步，所以界面上的值变化会同步到$scope.user上
         console.log($scope.user);
       };

       // 请输入用户名  输入格式不合法
       $scope.message = '请输入用户名';
       // $scope.message取决于$scope.user

       // 官方的API中提供了一个$scope.$watch方法，
       $scope.$watch('user.username', function(now, old) {
         // 当user.username发生变化时触发这个函数
         // console.log('now is ' + now);
         // console.log('old is ' + old);
         if (now) {
           if (now.length < 7) {
             $scope.message = '输入格式不合法';
           } else {
             $scope.message = '';
           }
         } else {
           $scope.message = '请输入用户名';
         }
       });

       // angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite
       //
       // angular.element('body')
     }]);
   </script>
 </body>

4.angular表达式：

   <style>
     /* ng-cloak指令就是在NG执行完毕过后自动移除 */

     [ng-cloak],
     .ng-cloak {
       display: none;
     }
   </style>
 </head>

 <body ng-app class="ng-cloak">
   {{ true ? 'true':'false' }}
   <script src="bower_components/angular/angular.js"></script>
 </body>