ionic/angular中module探秘

最新推荐文章于 2021-04-29 19:56:31 发布

刘文壮

最新推荐文章于 2021-04-29 19:56:31 发布

阅读量5.9k

点赞数 2

分类专栏： ionic 文章标签： ionic angularJS module 工程组织形式

ionic 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

ionic/angular中module探秘

欢迎大家到我的博客关注我学习Ionic 1和Ionic 2的历程，共同学习，共同进步。

注：本文乃译文，如果有理解不对之处，请多多指正，大家也可移步原文。

ionic和angular本身就是基于模块化（module）的概念设计的，这就使代码具有很好的复用性，而且逻辑清晰，易于理解。这也使得angular的“依赖注入”设计有了用武之处。

在本文中，我们来看下什么是module、怎么实现module以及使用module的不同方式。

什么是module?

根据angular官方文档说明，可以将module理解成一个容器，可以往其中放入controllers、services、filters、directives等应用的组成部分。

另一种理解方式，可以将module理解成其他语言中的命名空间，命名空间中可以包含很多类。类似地，module可以包含应用中其他的部分。

基础module

ionic应用中，其本身就是一个module，看下面这个例子：

<body ng-app="myApp">
    Hello World!
</body>

angular.module('myApp', []);

注意给ng-app传入的值需要和使用.module方法定义的模块名（第一个参数）相同。

module导入

上面的例子中，可以发现.module方法第二个参数是一个空数组，这个空数组是为了指定在此module中需要用到哪些其他的modules。这就像其他语言中使用using或import关键字导入其他命名空间。

现在，我们定义另一个module，然后将其导入到我们定义好的名为myApp的module中：

angular.module('myApp.services', [])

.factory('testFactory', function(){
    return {
        Hello: function(){
            return "Hello World!";
        }

    }
});

可以看到，我们将此module命名为myApp.services并且为其定义了一个factory。注意到首行最后没有分号。

现在，将我们新定义的module导入到第一个module里：

angular.module('myApp', ['myApp.services']);

我们需要做的只是，将module使用引号包裹放入到.module方法第二个参数的空数组里面，多个modules使用逗号隔开。现在我们就可以使用第二个module里的方法了：

angular.module('myApp', ['myApp.services'])

.run(function(testFactory){
    var hello = testFactory.Hello();
    console.log(hello);
});

ionic使用moduels

在标准的ionic初始工程中，一般来说ionic预定义了3个modules：应用module(starter)，controller module(starter.controllers)以及service module(starter.services)。还有第4个最重要的module：ionic需要被引入：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

这是一种相当标准地按照类型组织工程文件的方法。关于ionic工程组织文件的方式，可以查看另一篇译文：ionic工程组织文件，有另一种更加有效的组织工程文件的方式。

总结

modules使代码更加整洁易读，太多场景需要使用module，所以积极探索吧。希望本文能够加深读者对于module的理解，并能够在ionic中正确有效地应用。

个人推荐

推荐一款个人使用了半年的理财产品：创建了6年的挖财，新人收益36%，7天18%，1年10%，注册送308元券

刘文壮

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ionic/angular中module探秘

ionic/angular中module探秘注：本文乃译文，如果有理解不对之处，请多多指正，大家也可移步原文。ionic和angular本身就是基于模块化（module）的概念设计的，这就使代码具有很好的复用性，而且逻辑清晰，易于理解。这也使得angular的“依赖注入”设计有了用武之处。在本文中，我们来看下什么是module、怎么实现module以及使用module的不同方式。什么是module?
复制链接

扫一扫