富贵资源网 Design By www.hznty.com

src和href属性

Angularjs中src应写成ng-src,href应写成ng-href 例如:

复制代码 代码如下:
<img ng-src="/UploadFiles/2021-04-02/{{favoriteCat}}"> <a ng-href="/shop/category={{number}}">Some text</a>

表达式

在模板中可以进行简单的数学运算、比较运算、布尔运算、位运算、引用数组、和对象符号等 尽管我们可以使用表达式做很多事情,但是表达式是使用一个自定义的解释器来执行的(Angular的一部分),而不是用Javascript得eval()函数执行的,所以局限性较大。
虽然很多方面这里的表达式比Javascript更严格,但是他们对undefined和null的容错性更好,如果遇到错误,模板只是简单的什么都不显示,而不会抛出一个NullPointerException错误。 例如:

复制代码 代码如下:
<div ng-controller='SomeController'>
    <div>{{computer() /10 }}</div> //虽然是合法的,但是它把业务逻辑放到模板中了,应避免这种做法
</div>

区分UI和控制器的职责

控制器是绑定在特定DOM片段上的,这些片段就是他们需要负责管理的内容。有两种主要的方法可以把控制器关联到DOM节点上,一种在模板中通过ng-controller声明,第二种是通过路由把它绑定到一个动态加载的DOM模板片段上,这个模板叫视图。 我们可以创建嵌套的控制器,他们可以通过继承数结构来共享数据模型和函数,真实的嵌套发生在$scope对象上,通过内部的原始继承机制,父控制器对象的$scope会被传递到内部嵌套的$scope(所有属性,包括函数)。例如:

复制代码 代码如下:
<div ng-controller="ParentController">
    <div ng-controller="ChildController">...</div>
</div>

利用$scope暴漏模型数据

可以显示创建$scope属性,例如$scope.count = 5。还可以间接的通过模板自身创建数据模型。

通过表达式。例如

复制代码 代码如下:
<button ng-click='count=3'>Set count to three</button>

在表单项上使用ng-model

与表达式类似,ng-model上指定的模型参数同样工作在外层控制器内。唯一的不同点在于,这样会在表单项和指定的模型之间建立双向绑定关系。

使用watch监控数据模型的变化

$watch的函数签名是: $watch(watchFn,watchAction,deepWatch)
watchFn是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。 watchAction是一个函数或者表达式,当watchFn发生变化时调用。其函数签名为:
function(newValue,oldValue,scope) deepWatch 如果设置为true,这个可选的布尔值参数将会命令Angular去检查被监控对象的每一个属性是否发生了变化。如果你向监控数组中的元素,或者对象上的所有属性,而不是值监控一个简单的值,你就可以使用这个参数。注意,Angular需要遍历数组或者对象,如果集合比较大,那么运算复杂呢就会比较的重。

$watch函数会返回一个函数,当你不需要接收变更通知时,可以用这个返回的函数注销监控器。
如果我们需要监控一个属性,然后接着注销监控,我们就可以使用以下的代码: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

实例代码如下:

复制代码 代码如下:
<html ng-app>
<head>
    <title>Your Shopping Cart</title>
    <script type="text/javascript">
        function CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {title:'Paint pots',quantity:8,price:3.95},
                {title:'Polka dots',quantity:17,price:12.95},
                {title:'Pebbles',quantity:5,price:6.95}
            ];
            $scope.totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i<len;i++) {
                    total = total + $scope.items[i].price * $scope.items[i].quantity;
                }
                return total;
            }
            $scope.subtotal = function() {
                return $scope.totalCart() - $scope.bill.discount;
            }
            function calculateDiscount(newValue,oldValue,scope) {
                $scope.bill.discount = newValue > 100 "CartController">
        <div ng-repeat='item in items'>
            <span>{{item.title}}</span>
            <input ng-model='item.quantity'>
            <span>{{item.price | currency}}</span>
            <span>{{item.price * item.quantity | currency}}</span>
        </div>
        <div>Total: {{totalCart()| currency }}</div>
        <div>Discount: {{bill.discount | currency}}</div>
        <div>SubTotal: {{subtotal() | currency}}</div>
    </div>
    <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js"> </body>
</html>

上面的watch存在性能问题,calculateTotals函数执行了6次,其中三次是因为循坏,每次循环,都会重新渲染数据。
下面是改良后的代码

复制代码 代码如下:
<html ng-app>
<head>
    <title>Your Shopping Cart</title>
    <script type="text/javascript">
        function CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {title:'Paint pots',quantity:8,price:3.95},
                {title:'Polka dots',quantity:17,price:12.95},
                {title:'Pebbles',quantity:5,price:6.95}
            ];
            var totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i<len;i++) {
                    total = total + $scope.items[i].price * $scope.items[i].quantity;
                }
                $scope.bill.totalcart = total;
                $scope.bill.discount = total > 100 "CartController">
        <div ng-repeat='item in items'>
            <span>{{item.title}}</span>
            <input ng-model='item.quantity'>
            <span>{{item.price | currency}}</span>
            <span>{{item.price * item.quantity | currency}}</span>
        </div>
        <div>Total: {{bill.totalcart| currency }}</div>
        <div>Discount: {{bill.discount | currency}}</div>
        <div>SubTotal: {{bill.subtotal | currency}}</div>
    </div>
    <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js"> </body>
</html>

对于大型的itms数组来说,如果每次在Angular显示页面时只重新计算bill属性,那么性能会好很多。通过创建一个带有watchFn的$watch函数,我们可以实现这一点。

复制代码 代码如下:
$scope.$watch(
    var totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i<len;i++) {
                    total = total + $scope.items[i].price * $scope.items[i].quantity;
                }
                $scope.bill.totalcart = total;
                $scope.bill.discount = total > 100 "codetitle">复制代码 代码如下:
$scope.$watch('things',callMe(...),true);

使用module组织依赖关系

provider(name,Object OR constructor()) 说明: 一个可配置的服务,创建逻辑比较的复杂。如果你传递了一个Object作为参数,那么这个Object对象必须带有一个名为$get的函数,这个函数需要返回服务的名称。否则,angularjs会认为你传递的时一个构造函数,调用构造函数会返回服务实例对象。
factory(name,$get Function()) 说明:一个不可配置的服务,创建逻辑比较的复杂。你需要指定一个函数,当调用这个函数时,会返回服务实例。可以看成provider(name,{$get:$getFunction()})的形式。
service(name,constructor()) 一个不可配置的服务,创建逻辑比较的简单。与上面的provider函数的constructor参数类似,Angular调用他可以创建服务实例。

使用module factory的例子

复制代码 代码如下:
<html ng-app='ShoppingModule'>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js"> <script type="text/javascript">
    var ShoppingModule = angular.module('ShoppingModule',[]);
    ShoppingModule.factory('Items',function() {
        var  items = {};
        items.query = function() {
            return [
                {title:'Paint pots',description:'Pots full of Paint',price:3.95},
                {title:'Paint pots',description:'Pots full of Paint',price:3.95},
                {title:'Paint pots',description:'Pots full of Paint',price:3.95}
            ];
        };
        return items;
    });
    function ShoppingController($scope,Items) {
        $scope.items = Items.query();
    }
</script>
</head>
<body ng-controller='ShoppingController'>
<h1>Shop!!</h1>
<table>
    <tr ng-repeat='item in items'>
        <td>{{item.title}}</td>
        <td>{{item.description}}</td>
        <td>{{item.price | currency}}</td>
    </tr>
</table>
</body>
</html>

引入第三方模块

在大多数应用中,创建供所有代码使用的单个模块,并把所有依赖的东西放入这个模块中,这样就会工作的很好。但是,如果你打算使用第三方包提供的服务或者指令,他们一般都带有自己的模块,你需要在应用模块中定义依赖关心才能引用他们。 例如:
var appMod = angular.module('app',['Snazzy','Super']);

关于filter的例子

复制代码 代码如下:
<html ng-app='ShoppingModule'>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js"> <script type="text/javascript">
    var ShoppingModule = angular.module('ShoppingModule',[]);
    ShoppingModule.filter('titleCase',function() {
        var titleCaseFilter = function(input) {
            var words = input.split(' ');
            for(var i=0;i<words.length;i++) {
                words[i] = words[0].charAt(0).toUpperCase() + words[i].slice(1);
            }
            return words.join(' ');
        };
        return titleCaseFilter;
    });
    function ShoppingController($scope) {
        $scope.pageHeading = 'this is a test case';
    }
</script>
</head>
<body ng-controller='ShoppingController'>
<h1>{{pageHeading | titleCase}}</h1>
</body>
</html>

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com