augular.js 菜鸟学习笔记 （三）

AngularJS HTML 事件

---

AngularJS 有自己的 HTML 事件指令。

---

ng-click 指令

ng-click 指令定义了一个 AngularJS 单击事件

   <div ng-app=""  ng-init="count=1">

        <button ng-click="count = count+1 ">33</button>
       {{count}}
   </div>

or

   <div ng-app="" ng-controller="count">

        <button ng-click="count = count+1 ">33</button>
       {{count}}
   </div>

   <script>
       function count($scope){
             $scope.count=1;
       }
   </script>

隐藏 HTML 元素

     ng-hide 指令用于设置应用的一部分 不可见 。

     ng-hide="true" 让 HTML 元素 不可见。

     ng-hide="false" 让元素可见。

   <div ng-app="" ng-controller="peopleController">
       <button ng-click="toggle()">123</button>
       <div ng-hide="myVar">{{people.name+"  "+people.age}}</div>
   </div>

   <script>
       function peopleController ($scope){
           $scope.people={name:123,age:999} ;
           $scope.myVar=false;
           $scope.toggle = function(){
               $scope.myVar =!$scope.myVar;
           }

       }
   </script>

效果：点击123按钮时myVar取非改变div是否显示

应用解析:

    personController的第一部分与控制器章节类似。

    应用有一个默认属性: $scope.myVar = false;

   ng-hide 指令设置应用中的元素不可见。

   toggle() 函数用于切换 myVar 变量的值（true 和 false）。

   ng-hide="true" 让元素 不可见。

AngularJS 模块

---

    模块定义了您的应用程序。

    所有的控制器都应该属于一个模块。

    模块保持全局命名空间中的整洁。

---

AngularJS 模块实例

     在本实例中，"myApp.js" 包含了一个应用程序模块定义，"myCtrl.js" 包含了一个控制器：

     

   <div ng-app="myapp" ng-controller="myController">
         {{name+"   "+age}}
   </div>

   <script src="lib/angular-1.2.5.min.js"></script>
   <script src="Angular1.js"></script>
   <script src="Angular2.js"></script>

Angular1.js:

   function <span style="line-height: 16.7999992370605px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">myController</span><span style="line-height: 16.7999992370605px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;"> ($scope){</span>
      $scope.name = "aa";
      $scope.age = "bb"
   } 

Angular2.js: 

var  app = angular.module("myapp",[]);

//output   aa bb

控制器污染了全局命名空间

本教程中，截至目前为止的所有实例都使用了全局函数。

在所有的应用程序中，都应该尽量避免使用全局变量和全局函数。

全局值（变量或函数）可被其他脚本重写或破坏。

为了解决这个问题，AngularJS 使用了模块。

    

AngularJS 模块

使用一个简单的 控制器：

   <div ng-app=""  ng-controller="myController">
         {{name+"   "+age}}
   </div>
   <script>

       function myController($scope){
           $scope.name = "aa";
           $scope.age = "bb"
       }
   </script>

使用模块实现

   <div ng-app="myApp" ng-controller="people">
        {{name+"   "+age}}
   </div>

   <script>
       var app= angular.module("myApp",[]);    //模块 
       app.controller("people",function($scope){  //控制器
           $scope.name=123;
           $scope.age=123;
       });
   </script>

  

AngularJS 表单实例

<span style="font-family:Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;">    <div ng-app="myApp" ng-controller="userController"</span><span style="font-family:courier new;"><span style="font-size: 13.6000003814697px;">  novalidate</span></span><span style="font-family:Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;">>
         <from>
             <input type="text"  ng-model="user.name" />   <!--绑定模型user.name-->
             <input type="text"  ng-model="user.age" />     <!--绑定模型user.age-->
             <button ng-click="retest()">retest</button>
         </from> <br/>
         {{user}} <br/>
         {{master}}
    </div>
    <script>
        var myApp = angular.module("myApp",[]);
        myApp.controller("userController",function($scope){
            var startValue ={name:"gg",age:12};   //设置初始值

            $scope.user=  angular.copy(startValue);         //页面显示的初始值
            $scope.master = angular.copy(startValue ) ;    //初始模型

            $scope.retest=function (){
                $scope.user= angular.copy($scope.master);  //变回你原来的样子
            }
        });

    </script></span>

	HTML 属性 novalidate 用于禁用浏览器的默认验证。

感谢 

    w3c