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元券