Question

我的文件夹结构：

 /app 
   /components 
       /module1 
       /module2
       /core 
          /extensions
             -array.js
             -string.js
          /services
             -localdataservice.js 
          /directives 
             - .... .js
   index.html

除了它之外的每个文件的本质都与角度模块“app.core”相关联。例如：array.js

(function() {
    'use strict';

    var core = angular.module(app.core, []);
    core.config( function(){

    if (!Array.prototype.last){
        Array.prototype.last = function(){
            return this[this.length - 1];
        };
     }; 
   })
}());

将所有这些文件和可用模块下的内容组合为一些后备。

1）只有一个文件可以创建模块，其余文件需要使用模块并添加到模块。

   meaning that all other files then the arbitrarly chosen array.js would use the module as :

   var core = angular.app('app.core');  
      and not 
   var core = angular.app('app.core',[]);

2）我必须引用index.html中的每个文件，以便它参与模块的启动。

index.html

  <html> 
    <body>

        <script src="components/core/array.js"></script>
        <script src="components/core/string.js"></script>
        <script src="components/core/localdataserice.js"></script>
        .... and many more 
    </body> 
</html>

必须有一种更好的方法来跨多个文件构建模块。起初我想过在一个单独的文件下复制文件的所有内容

/app 
  /components 
     /core
        /lib
          -core.js

index.html

<html> 
    <body>

        <script src="components/core/lib/core.js"></script>
    </body> 
</html>

我想过用咕噜的复制任务做这件事。但这需要我以某种方式操纵复制任务的过程IFFE包装器和角度模块启动下的适合内容。

 (function() {
    'use strict';

     var core = angular.module(app.core, []);
     core.config( function(){
           ... ALL THE FILES CONTENTS GO HERE 

      })
   }());

而且还有一个更好的方法。有什么建议？

编辑：

我决定尝试 Browserify 以及 Grunt 和 grunt-browserify

Gruntfile.js

 grunt.initConfig({
     browserify :{
        main: {
           src: 'app/components/core/{,*/}*.js',  
           dest: 'app/components/core/lib/core'
        }
      }
 });

对于此示例，构建文件仅包含 array.js

的内容

 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

     if (!Array.prototype.last){
          Array.prototype.last = function(){
            return this[this.length - 1];
        };
    };
 },{}]},{},[1]);

1）我不明白的是我如何在其中加入导出功能。因为我不想从其他模块中获取它。

 module.exports = function() {
   // Your code 
 }

2）我在任何教程中都没有看到我的代码放在那个奇怪的包装器中的参考。不确定它的作用可能是它作为导出在那里：/

角度模块化应用程序最佳实践

0 个答案: