您的位置：首页 > Web前端 > AngularJS

AngularJS 基础入门（指令篇）

2017-07-03 13:31 711 查看

一、介绍

     AngularJS 是google 开发人员设计的一个前端开发框架，它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。

    AngularJS特点例如以下：

  •     REST Client： RestFul 是主流的接口模式。而AngularJS实现RestFul 接口client仅仅须要一行代码就可以。
  •     MVVM（Model-View-ViewModel）模式：  Model 简单数据对象，View 视图（如HTML,JSP等），ViewModel是用来提供数据和方法。和View 进行交互。这样的设计模式使得代码解耦合。

  •    数据绑定： AngularJS是数据双向绑定。
  •    依赖注入：AngularJS支持注入方式把须要的对象。方法等注入到指定的对象中。
  •    指令： AngularJS内部自带各种经常使用指令，同一时候也支持开发人员自己定义指令。
  •    HTML模板和扩展HTML： AngularJS能够定义与HTML兼容的自己定义模板。

二、開始AngularJS

[p]     1. lib 引用，在HTML中引入anjularJS lib，例如以下：

[html] view plaincopy
  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
       能够在AngularJS官网(https://angularjs.org/)下载最新的版本号 (1.3.8) 。 [/p]

    2. 简单样例：

[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <div ng-app="" ng-controller="personController">  
  11.   
  12. First Name: <input type="text" ng-model="firstName"><br>  
  13. Last Name: <input type="text" ng-model="lastName"><br>  
  14. <br>  
  15. Full Name: {{firstName + " " + lastName}}  
  16.   
  17. </div>  
  18.   
  19. <script>  
  20. function personController($scope) {  
  21.     $scope.firstName = "John";  
  22.     $scope.lastName = "Doe";  
  23. }  
  24. </script>  
  25.   
  26. </body>  
  27. </html>  
       该样例将会在兴许解说到。

       3.推荐学习站点

        http://www.w3schools.com/angular/angular_intro.asp

        http://campus.codeschool.com/courses/shaping-up-with-angular-js/


三、经常使用指令

    1. Expression: AngularJS 使用双大括号 {{}} 取值。

    2. ng-app： 初始化AngularJS应用，ng-app 是用来声明使用AngularJS载入页面。

    3. ng-bind: 依据HTML元素的变量名，把HTML 元素的值绑定到指定的元素上。

[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <div ng-app="">  
  11.     <p>Name: <input type="text" ng-model="name"></p>  
  12.     <p ng-bind="name"></p>  
  13. </div>  
  14.   
  15. </body>  
  16. </html>  


   4. ng-init: 初始化应用数据,使用方式例如以下：

[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <div ng-app="" ng-init="firstName='John'">  
  11.   
  12. <p>Name: <input type="text" ng-model="firstName"></p>  
  13. <p>You wrote: {{ firstName }}</p>  
  14.   
  15. </div>  
  16. <script>  
  17. function personController($scope) {  
  18.     $scope.firstName = "John";  
  19.     $scope.lastName = "Doe";  
  20. }  
  21. </script>  
  22.   
  23. </body>  
  24. </html>  
       普通情况下。初始化參数不使用ng-init, 我们会使用model或controller取代它，关于model和controller 会在以下介绍到。

    5. ng-model： ng-model 会绑定HTML controller 的值到应用数据，使用方式例如以下：

[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <div ng-app="" ng-controller="personController">  
  11.   
  12. First Name: <input type="text" ng-model="firstName"><br>  
  13. Last Name: <input type="text" ng-model="lastName"><br>  
  14. <br>  
  15. Full Name: {{firstName + " " + lastName}}  
  16.   
  17. </div>  
  18.   
  19. <script>  
  20. function personController($scope) {  
  21.     $scope.firstName="John",  
  22.     $scope.lastName="Doe"  
  23. }  
  24. </script>  
  25.   
  26. </body>  
  27. </html>  
   ng-model 还具有下面功能：

        a.为应用数据提供类型验证（number。require,emai, 将在第七节介绍）;

        b.为应用数据显示状态（invalid, dirty, touched, error, 将在第七节介绍）;

        c. 为HTML 元素提供css 样式；

        d. 绑定元素到表单中。


    6. ng-controller

        AngularJS 应用时被controller控制的。

[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <div ng-app="" ng-controller="personController">  
  11.   
  12. First Name: <input type="text" ng-model="firstName"><br>  
  13. Last Name: <input type="text" ng-model="lastName"><br>  
  14. <br>  
  15. Full Name: {{fullName()}}  
  16.   
  17. </div>  
  18.   
  19. <script>  
  20. function personController($scope) {  
  21.     $scope.firstName = "John",  
  22.     $scope.lastName = "Doe",  
  23.     $scope.fullName = function() {  
  24.         return $scope.firstName + " " + $scope.lastName;  
  25.     }  
  26. }  
  27. </script>  
  28.   
  29. </body>  
  30. </html>  

        ng-controller="personController" 是指定controller 对象的名称。在controller 对象中。能够定义属性（$scope.firstName）, 方法（$scope.fullName=function(){...}）等。

    在上面样例中，在personController 对象中创建了两个属性(变量)， 一个函数（function）。


    7. ng-repeat, 是通过遍历集合，循环clone HTML 元素， 类似 for each 功能。

[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5. <pre name="code" class="html"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
[html] view plaincopy
  1. <div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">  
[html] view plaincopy
  1. <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li>  













    8. ng-disabled： 禁用元素（text,button, checkbox等）。其值为ture 或false 或者一个返回boolean 的表达式等。






[html] view
plaincopy


    

  1. 
<!DOCTYPE html>  
  2. 
<html>  
  3. 
  
  4. 
<head>  
  5. 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
  6. 
</head>  
  7. 
  
  8. 
<body>  
  9. 
  
  10. 
<div ng-app="" ng-controller="personController">  
  11. 
<input type="button" ng-click="toggle()" value="Toggle1"><br>  
  12. 
<input type="button" ng-disabled="disabledFlag" value="Toggle2"><br>  
  13. 
<br>  
  14. 
  
  15. 
</div>  
  16. 
  
  17. 
<script>  
  18. 
function personController($scope) {  
  19. 
    $scope.disabledFlag = false,  
  20. 
    $scope.toggle = function() {  
  21. 
        $scope.disabledFlag = !$scope.disabledFlag;  
  22. 
        return $scope.disabledFlag;  
  23. 
    }  
  24. 
}  
  25. 
</script>  
  26. 
  
  27. 
</body>  
  28. 
</html>  










    9. ng-show: 显示HTML 元素。值为true时显示，否则不显示。









    10. ng-hide: 隐藏HTML元素，和ng-show相反。






[html] view
plaincopy


    

  1. 
<!DOCTYPE html>  
  2. 
<html>  
  3. 
  
  4. 
<head>  
  5. 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
  6. 
</head>  
  7. 
  
  8. 
<body>  
  9. 
  
  10. 
<div ng-app="" ng-controller="personController">  
  11. 
  
  12. 
<button ng-click="toggle()">Toggle</button>  
  13. 
  
  14. 
<p ng-show="myVar">  
  15. 
First Name: <input type="text" ng-model="firstName"><br>  
  16. 
Last Name: <input type="text" ng-model="lastName"><br>  
  17. 
<br>  
  18. 
Full Name: {{firstName + " " + lastName}}  
  19. 
</p>  
  20. 
  
  21. 
</div>  
  22. 
  
  23. 
<script>  
  24. 
function personController($scope) {  
  25. 
    $scope.firstName = "John",  
  26. 
    $scope.lastName = "Doe"  
  27. 
    $scope.myVar = true;  
  28. 
    $scope.toggle = function() {  
  29. 
        $scope.myVar = !$scope.myVar;  
  30. 
    };  
  31. 
}  
  32. 
</script>  
  33. 
  
  34. 
</body>  
  35. 
</html>  










    11. ng-click: 类似于click方法，定义AngularJS click 事件。









    12. ng-include： 包括指定一个内容（html, jsp, tag等）。






[html] view
plaincopy


    

  1. 
<div ng-include="'myUsers_List.htm'"></div>  

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航