接触AngularJS

最新推荐文章于 2019-11-26 14:09:56 发布

pdw2009

最新推荐文章于 2019-11-26 14:09:56 发布

阅读量521

点赞数

分类专栏： AugularJS

AugularJS 专栏收录该内容

17 篇文章

订阅专栏

AngularJS为Google公司开发的JavaScript的MVC框架。可以与jQuery等其他框架结合使用。MVC为Model(模型）、View(视图）、Controller(控制器）的简称。

Model:应用程序内使用的数据结构。
View:用户实际看见的应用程序展示效果。
Controller:应用程序内对数据模型及视图进行的控制。

示例一: 第一个示例页面

<!DOCTYPE HTML>
<html>
<head>
<script src="angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('firstCtrl',function($scope){ 
    $scope.hello = "Hello Angular!";
})
.controller('secondCtrl',function($scope){ 
    $scope.hello = "Hello Monaca!"
})
.controller('thirdCtrl',function($scope){ 
    $scope.hello = "Hello World!"
})
</script>
</head>
<body ng-app='myApp'> 
<div ng-controller="firstCtrl">
    <p>{{hello}}</p>
</div>
  
<div ng-controller="secondCtrl">
    <p>{{hello}}</p>
</div>
 
<div ng-controller="thirdCtrl">
    <p>{{hello}}</p>
</div>
</body>
</html>

为了使用AngularJs框架，首先需要引用框架核心脚本文件。

<script src="angular.min.js"></script>

在脚本代码中，使用“angular.module('myApp', [])”语句定义了一个myApp模块，分别使用“.controller('firstCtrl',function($scope){ ”、“.controller('secondCtrl',function($scope){ ”以及“.controller('thirdCtrl',function($scope){ ”语句为myApp模块定义了三个控制器，在三个控制器中分别为每一个控制器作用域定义了一个hello变量值(变量值可以为字符串、数值、日期值、对象、数组或函数等等)。

在HTML代码中，为了使用AngularJs及myApp模块，将body元素的ng-app属性值定义为myApp。

<body ng-app='myApp'>

为了分别使用三个控制器，将三个div元素的ng-controller属性值定义为firstCtrl、secondCtrl及thirdCtrl。firstCtrl控制器的作用域即等于ng-controller属性值为firstCtrl的元素内部、secondCtrl控制器的作用域即等于ng-controller属性值为secondCtrl的元素内部、thirdCtrl控制器的作用域即等于ng-controller属性值为thirdCtrl的元素内部。

在三个div元素内部，使用“{{hello}}”显示三个控制器中hello变量值。

<div ng-controller="firstCtrl">
    <p>{{hello}}</p>
</div>

可以在控制器内定义函数：

<!DOCTYPE HTML>
<html>
<head>
<script src="angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('firstCtrl',function($scope){ 
    $scope.name = "Monaca!!!";
    $scope.getMonaca = function(){
        return $scope.name;
    }
})
</script>
</head>
<body ng-app='myApp'> 
<div ng-controller="firstCtrl">
    <p>{{getMonaca()}}</p>
</div>
</body>
</html>

在脚本代码中，通过$scope.name在作用域内定义了一个name变量，变量值为“Monaca!!!”。同时定义了一个getMonaca函数，用于返回name变量值。

在HTML代码中，通过{{getMonaca()}}运行getMonaca函数获取name变量值并将其显示。

示例二:使用AngularJS绑定数据

<!DOCTYPE HTML>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app> 
<div>
    <input type="text" ng-model="name">
    <p>你好 {{name}}!</p>
</div>
</body>
</html>

在AngularJs中，通过ng-model="name"这种形式为input元素指定Model(模块），这将创建一个$scope.name模块。可以通过{{name}}来引用$scope.name模块。在本例中这将使用户在input元素的输入值与{{name}}进行绑定。因此当用户修改input元素的输入值时该输入值将被实时反映在p元素中。

示例三:使用ng-repeat遍历集合

在下面这个示例中，我们将展示一个用于购买商品的输入表单。当购买金额不到50元时，运输费为5元。当购买金额超过50元时，免运输费。

<!DOCTYPE HTML>
<html>
<head>
<script src="angular.min.js"></script>
<script>
var myApp=angular.module('myApp',[]);
myApp.controller('MyController',function($scope){
    //定义变量初始值
    $scope.item1 = 0;
    $scope.item2 = 0;
    $scope.item3 = 0;
    $scope.shippingMessage = "";
    $scope.shipping = 0;
  
    $scope.items = {
        item1 : {
            name : "苹果",
            price : 10
        },
        item2 : {
            name : "桔子",
            price : 12
        },
        item3 : {
            name : "梨",
            price : 9
        }
    };
  
    $scope.getAmount = function(){
        return  $scope.item1 + $scope.item2 + $scope.item3;
    }
    
    $scope.getPayment = function(){    
        return  $scope.item1 * $scope.items.item1.price + $scope.item2 * $scope.items.item2.price + $scope.item3 * $scope.items.item3.price; 
    } 
 
    $scope.getTotalcost = function(){    
        return  $scope.getPayment() + $scope.shipping;
    } 
  
    //使用$watch函数监视getPayment()函数值，根据监视结果修改$scope.shippingMessage、$scope.shipping及与运输费相关的数值
    $scope.$watch("getPayment()", function(newValue, oldValue){
        if($scope.getPayment() < 50){
            $scope.shippingMessage = "运输费";   
            $scope.shipping = 5; 
        }else if($scope.getPayment() >= 50){
            $scope.shippingMessage = "免运输费!";     
            $scope.shipping = 0;
        }
    });
});
</script>
<style>
ul{
    list-style:none;
}
</style>
</head>
<body ng-app="myApp">
    <div ng-controller="MyController" >
        <ul>
            <li ng-repeat="item in items" >{{item.name}}:{{item.price}}元</li><br/>
            <li>{{items.item1.name}}购买:<input type="number" ng-model="item1" min="0" />个</input></li>
            <li>{{items.item2.name}}购买:<input type="number" ng-model="item2" min="0" />个</input></li>
            <li>{{items.item3.name}}购买:<input type="number" ng-model="item3" min="0" />个</input></li>
            <li>数量:{{ getAmount() | number }}个</li> 
            <li>商品金额:{{ getPayment() | number }}元 </li>
            <li>{{shippingMessage}}:{{shipping}}元</li>
            <li>总金额:{{getTotalcost() | number}}元</li>
        </ul>
    </div>
</body>
</html>

在控制器开头，定义作用域中各变量初始值，当然也可以定义数组及对象。

var myApp=angular.module('myApp',[]);
myApp.controller('MyController',function($scope){
    //定义变量初始值

    $scope.item1 = 0;
    $scope.item2 = 0;
    $scope.item3 = 0;
    $scope.shippingMessage = "";
    $scope.shipping = 0;
  
    $scope.items = {
        item1 : {
            name : "苹果",
            price : 10
        },
        item2 : {
            name : "桔子",
            price : 12
        },
        item3 : {
            name : "梨",
            price : 9
        }
    };
 
 ...
 
}

为了使用AngularJs，为body元素使用ng-app属性值，为了使用MyController控制器，将div元素的ng-controller属性值指定为MyController。

<body ng-app>
    <div ng-controller="MyController" >
        <ul>
            <li ng-repeat="item in items" >{{item.name}}:{{item.price}}元</li><br/>
            ...
        </ul>
         ...
    </div>
</body>

在这段代码中，使用ng-repeat指令对items对象数组进行遍历,将每一个对象赋值给item变量，使用{{item.name}}:{{item.price}}显示对象的name属性值及price属性值。

<li ng-repeat="item in items" >{{item.name}}:{{item.price}}元</li><br/>

通过将number类型的input元素的ng-model属性值指定为“item1”、“item2"、“item3"将元素的输入值与控制器中的item1变量、item2变量与item3变量（分别表示苹果、桔子与梨的购买数量）进行绑定。由于控制器开头将这些变量值初始化为0，所以各input元素的初始值均为0。

<li>{{items.item1.name}}购买:<input type="number" ng-model="item1" min="0" />个</input></li>
<li>{{items.item2.name}}购买:<input type="number" ng-model="item2" min="0" />个</input></li>
<li>{{items.item3.name}}购买:<input type="number" ng-model="item3" min="0" />个</input></li>

通过{{getAmount()}}、{{getPayment()}}调用控制器中定义的getAmount()函数或getPayment()函数。通过“getPayment() | number”形式调用number过滤器，通过该过滤器的调用，如果getPayment()函数的返回值非数值，则返回空字符串。

<li>数量:{{ getAmount() | number }}个</li> 
<li>商品金额:{{ getPayment() | number }}元 </li>
<li>{{shippingMessage}}:{{shipping}}元</li>
<li>总金额:{{getTotalcost() | number}}元</li>

在控制器中，定义了用于计算购买总数量的getAmount()函数、用于计算购买商品金额的getPayment（）函数、用于计算用户需支付总费用（包含运输费）的getTotalcost()函数。

$scope.getAmount = function(){
    return  $scope.item1 + $scope.item2 + $scope.item3;
}
    
$scope.getPayment = function(){    
    return  $scope.item1 * $scope.items.item1.price + $scope.item2 * $scope.items.item2.price + $scope.item3 * $scope.items.item3.price; 
} 
 
$scope.getTotalcost = function(){    
    return  $scope.getPayment() + $scope.shipping;
}

$watch函数为AngularJS内部为$scope对象定义的函数，可通过该函数对值进行监视。

$scope.$watch("getPayment()", function(newValue, oldValue){
    if($scope.getPayment() < 50){
        $scope.shippingMessage = "运输费";   
        $scope.shipping = 5; 
    }else if($scope.getPayment() >= 50){
        $scope.shippingMessage = "免运输费!";     
        $scope.shipping = 0;
    }
});

将需要监视的数据指定为$watch函数的第一个参数，此处监视getPayment()函数的值。$watch函数的第二个参数用于指定当被监视的值发生改变时所需要执行的函数，该函数使用newValue与oldValue两个参数值，newValue表示修改后的值，oldValue表示修改前的值。

在这段代码中，当监视到$scope.getPayment()函数值发生变化后，对该值（代表用户购买商品总金额）进行判断，如果商品总额小于50元，则设置运输费为5元，否则免运输费。此处的$scope.shipping与HTML代码中的{{shipping}}被绑定在一起。