大佬教程收集整理的这篇文章主要介绍了为什么要创建多个AngularJS模块?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
例…
(function(modulE) { var dir = function(something) { return { }; }; module.directive("myDirective",dir); }(angular.module("pointlessModulename")));
我试过找到答案,但一直感到困惑……
Multiple Module in Angularjs
我从一开始就有以下几点:
// main.js - v0 var ServerData = require('./services/server-data') var filters = require('./filters') angular.module('ServerLoad',['ngRoute']) .factory('ServerData',['$http',ServerData]) .filter('lastseen',function () {return filters.lastseen}) .config(['$routeProvider',function ($routeProvider) { $routeProvider .otherwise({ redirectTo: '/servers' }) }])
现在我想添加一个显示服务器列表的视图.从本质上讲,视图不仅仅是控制器与路由的组合,因此我将其添加到代码中.这是我得到的(然后我会解释为什么这不太好以及子模块如何@L_944_14@这个问题):
// main.js - v1 var ServerListView = require('./views/server-list-view') // <-- import view var ServerData = require('./services/server-data') var filters = require('./filters') angular.module('ServerLoad',ServerData]) .controller('ServerListCtrl',['ServerData',ServerListView]) // <-- add controller .filter('lastseen',function ($routeProvider) { $routeProvider .when('/servers',{ // <-- add route controller: 'ServerListCtrl',// controllerAs: 'servers',// templateUrl: 'assets/partials/server-list.html' // }) // .otherwise({ redirectTo: '/servers' }) }])
虽然这肯定是一个有效的设置,但我不喜欢的是main.js定义了controllerAs和templateUrl属性.对我来说,感觉这些属性确实应该被定义在依赖于它的代码定义的地方—‘./views/server-list-view’,甚至可能在ServerListView类本身上.
因此,与IIFE一样,我向ServerListView添加了一个静态方法,将视图添加到模块中:
// main.js - v2 (from v0) var ServerListView = require('./views/server-list-view') // <-- import view // ... angular.module('ServerLoad',['ngRoute']) // ... ServerListView.setup(window.angular.module('ServerLoad')) // <-- adds ctrl and route
和
// server-list-view.js - v2 function ServerListView (ServerData) { var scope = this // ... } module.exports = ServerListView ServerListView.setup = function (modulE) { module .controller('ServerListCtrl',ServerListView]) .config(['$routeProvider',function ($routeProvider) { $routeProvider .when('/servers',{ controller: 'ServerListCtrl',controllerAs: 'servers',templateUrl: 'assets/partials/server-list.html' }) }]) }
我认为这看起来稍好一点,但现在使用’ServerData’困扰了我.毕竟,它没有在server-list-view.js中的任何地方声明.同样,如果视图需要一些额外的外部模块,我将不得不编辑main.js来添加它.这感觉不合适.
然后我想到,如果我能写一个IIFE来将模块作为参数,为什么不让它以角度作为参数呢?然后它可以定义自己的模块,但它喜欢并包含所需的所有依赖项.此外,如果您仍然对单模块一切都狂热,那么只需使用’ServerLoad’模块名称并删除依赖声明.这是唯一和完全的区别!
// server-list-view.js - v3 // ... ServerListView.setup = function (angular) { angular.module('ServerLoad.ServerListView',['ngRoute','ServerLoad']) // ... }
总而言之,我认为使用子模块的巨大优势并不一定是其他人可以重用我的代码(我不认为任何人会对我的服务器列表视图感兴趣),但是每一段代码都可以代表独立地重用其他人的代码,而不需要主模块包含所有这些. main.js保持精简,而server-list-view.js可以提供各种各样的东西.
脚注.将ServerLoad作为依赖项(到达ServerData工厂)仍然看起来有点奇怪.在版本4中,工厂当然也将存在于自己的子模块中;-)
以上是大佬教程为你收集整理的为什么要创建多个AngularJS模块?全部内容,希望文章能够帮你解决为什么要创建多个AngularJS模块?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。