构建我的AngularJS应用 [英] Structuring my AngularJS application

问题描述

我完全新手在使用AngularJs，虽然我经历过的教程，我仍然有悬而未决的问题负载在我的脑海。我现在最关心的是我应该怎么划分我的应用程序成模块？

I'm totally newbie at using AngularJs and although I've been through the tutorials, I still have loads of unanswered questions in my mind. My main concern right now is how should I divide my application into modules ?

基本上，我需要建立一个应用程序，这将作为一个门户网站的各种应用程序，每个重$ P $（很少有时与对方没有关系）psenting一个业务功能。

Basically I need to build an app which will act as a portal to various apps, each representing a business functionality (sometimes with little to no relationship with each others).

在本教程中，他们展示如何创建一个应用程序有多个视图。我需要的是一个应用程序有多个模块，每个模块有自己的看法（我可能会有太多共同的观点）。

In the tutorial, they show how to create one app with multiple views. What I need, is one app with multiple modules, each module having its own views (and I'll probably have shared views too).

有没有人曾与那种结构的应用程序？你可以分享你的经验和你是如何组织的事情呢？

Has anyone worked on an app with that kind of structure ? Could you share your experience and how you've organised things ?

该AngularJS种子项目（ https://github.com/angular/angular-seed ）是好的，但它并没有真正展示如何构建复杂的应用程序。

The AngularJS Seed project (https://github.com/angular/angular-seed) is good but it does not really show how to build a complex application.

推荐答案

我写我的博客上的一篇文章，解释更多的细节的东西：

I wrote an article on my blog to explain things in more details:

上阅读sam-dev.net ，你现在可以阅读第二部分，用code样品。

read it on sam-dev.net and you can now read part II, with code sample.

我会回答我的问题。并不是因为我认为这是最好的方法，但只是因为它是一个我已经决定去与

I'll answer my own question. Not because I think it's the best approach, but just because it's the one I've decided to go with.

这是如何我将我的业务模块到文件夹

This is how I've divided my business modules into folders

• 应用
  
  
  
  • businessModule
    
    
    
    • 控制器
      
      
      
      • index.js
      
      
      • firstCtrl.js
      
      
      • secondCtrl.js
      
      

      每个模块具有控制器，它自己的文件夹结构，指令，等...

      Each module has its own folder structure for controllers, directives, etc...

      每个文件夹都有一个index.js文件，然后其他文件到每个控制器，每一个指令，分离等...

      Each folder has an index.js file and then other files to separates each controller, each directive, etc...

      的index.js文件包含模块的定义。例如对于上述businessModule的控制器：

      The index.js file contains the definition of the module. For instance for the controllers of the businessModule above:

      angular.module('myCompany.businessModule.controllers', []);
      

      下面有没有相关性，但也可能是任何

      There's no dependencies here, but there could be any.

      然后在firstCtrl.js，我可以重复使用的模块和控制器添加到它：

      Then in firstCtrl.js, I can reuse that module and add the controller to it:

      angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     
      
              function(){
      });
      

      然后app.js将它们添加到依赖阵列聚合所有，我想我的应用程序模块。

      Then the app.js aggregates all the module that I want for my application by adding them to the dependencies array.

       angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);
      

      共享文件夹包含不特定于一个业务模块，并且可以在任何地方重用指令和其他的东西。

      The shared folder contains directives and other things that are not specific to a business module and that can be reused anywhere.

      同样，我不知道这是最好的方法，但它肯定是为我工作。也许它可以激发其他人。

      Again, I don't know if it's the best approach, but it definitely works for me. Maybe it can inspire other people.

      修改

      由于index.js文件包含模块的声明，它们必须在HTML页面之前，任何其他应用程序脚本中引用。要做到这一点，我已经使用了ASP.NET MVC 4 IBundleOrderer：

      As the index.js files contain modules declarations, they must be referenced in the html page before any other application scripts. To do so, I've used the IBundleOrderer of ASP.NET MVC 4:

       var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };
       bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));
      
      public class AsIsBundleOrderer : IBundleOrderer
      {
          public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
          {
              files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);
              return files;
          }
      }
      

      这篇关于构建我的AngularJS应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！