AngularJS 的基础使用

最新推荐文章于 2023-12-04 11:43:38 发布

赵懂

最新推荐文章于 2023-12-04 11:43:38 发布

阅读量2k

点赞数 1

分类专栏： web前端文章标签： angularjs

本文链接：https://blog.csdn.net/zhaodongwoshini/article/details/53270501

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

脚本放在 <body> 元素的底部

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。





    
    
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>


    
    
    
     	
     
     名字 : 
     	
     
     Hello {{name}}

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

ng-init 指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是可以使用 data-ng- 来让网页对 HTML5 有效。

AngularJS 表达式

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

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 应用

AngularJS 模块（Module）定义了 AngularJS 应用。

AngularJS 控制器（Controller）用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。


   
   
    
    

名: 
    
    
    
    

姓: 
    
    
    
    


    
    

姓名: {{firstName + " " + lastName}}


   
   

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

AngularJS 模块定义应用:

AngularJS 模块

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

AngularJS 控制器控制应用:

AngularJS 控制器

   app.controller('myCtrl', function($scope) { 
  
     $scope.firstName= "John"; 
  
     $scope.lastName= "Doe"; 
  
 });

======================================================================================

AngularJS 表达式与 JavaScript 表达式

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

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

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

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


   
   


    
    价格计算器

数量： 
    
    
价格： 
    
    


    
    总价： {{ quantity * price }}

数字：


  
  


   
   总价： {{ quantity * cost }}


  
  

======================================================

  
  


   
   总价：

字符串：


  
  


   
   姓名： {{ firstName + " " + lastName }}


  
  

============================================================

  
  


   
   姓名：

对象：


  
  


   
   姓为 {{ person.lastName }}


  
  

===================================================================

  
  


   
   姓为

数组：


  
  


   
   第三个值为 {{ points[2] }}


  
  

=================================================

  
  


   
   第三个值为

数据绑定


   
   


    
    价格计算器

数量： 
    
    
价格： 
    
    


    
    总价： {{ quantity * price }}

重复元素

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


   
   
  
    
    使用 ng-repeat 来循环数组
  
    
    
      {{ x }}
    

   
   

=================================================================
ng-repeat 指令用在一个对象数组上：


   
   


    
    循环对象：

    
    
    {{ x.name + ', ' + x.country }}

通过以下方式来调用指令：

元素名
属性
类名
注释

AngularJs创建自定义的指令：

使用 .directive 函数来添加自定义的指令。

元素名

   
   
--------------------------------------------------------------------


   
   
<script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            template : "自定义指令!"
        };
    });
</script>


=========================================================================

属性

   
   
---------------------------------------------------------------------------




   
   
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 



   
   
    <script>
        var app = angular.module("myApp", []);
        app.directive("runoobDirective", function() {
            return {
                template : "自定义指令!"
            };
        });
    </script>



=========================================================================

类名

   
   
---------------------------------------------------------------------------




   
   
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 


    
   
   
        <script>
        var app = angular.module("myApp", []);
        app.directive("runoobDirective", function() {
            return {
                restrict : "C",
                template : "自定义指令!"
            };
        });
        </script>
注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。



=========================================================================

注释

   
   
---------------------------------------------------------------------------




   
   
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 



   
   
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "自定义指令!"
    };
});
</script>
注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。

AngularJs限制使用：

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "自定义指令!"
    };
});

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令

赵懂

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
AngularJS 的基础使用

AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。AngularJS 可以在 HTML 元素"背后"添加代码。AngularJS 支持输入验证。
复制链接

扫一扫