AngularJS语法三

最新推荐文章于 2024-05-30 17:06:00 发布

cangdu

最新推荐文章于 2024-05-30 17:06:00 发布

阅读量441

点赞数

本文链接：https://blog.csdn.net/cangdu/article/details/43075209

版权

使用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="angular.min.js"></script>
<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="angular.min.js"></script>
<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>

cangdu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS语法三

使用module组织依赖关系provider(name,Object OR constructor())说明：一个可配置的服务，创建逻辑比较的复杂。如果你传递了一个Object作为参数，那么这个Object对象必须带有一个名为$get的函数，这个函数需要返回服务的名称。否则，angularjs会认为你传递的时一个构造函数，调用构造函数会返回服务实例对象。factory(name,$g
复制链接

扫一扫