Modular AngularJS App Design-优快云博客

本文详细介绍了如何使用Angular创建模块化应用，通过定义多个模块并设置依赖关系，实现组件间的良好隔离与复用。重点阐述了如何利用MainApp模块进行全局路由配置，并展示如何在各模块中灵活引入其他模块功能，避免代码冗余和冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

Directory Structure

Here is the way we setup our directory structure:

App Structure

You can see we have the standard app directory similar to angular seed or a yeoman generated project. But we add a modules directory within the app directory. Each module then has its own sub-directory and a file for directives, controllers, filters and services and a directory for views.

I am still somewhat conflicted on wether I should be creating a new file for each directive/controller/filter/service or if the current way is fine. Sometimes the files get to be too large an unwieldy and I want them broken up.

here is a shot further down the tree:
More app structure

We still maintain the scripts folder which houses app.js and our routes.js file for handling the routing.

Defining the Modules

Let’s have a look at the app.js file where we setup our modules and define dependencies.

// Define all your modules with no dependenciesangular.module('BirthdayApp', []);angular.module('CollectionApp', []);angular.module('DashboardApp', []);angular.module('LoginApp', []);angular.module('MessageApp', []);angular.module('PatientApp', []);angular.module('PhoneApp', []);angular.module('ReportsApp', []);// Lastly, define your "main" module and inject all other modules as dependenciesangular.module('MainApp',  [    'BirthdayApp',    'CollectionApp',    'DashboardApp',    'LoginApp',    'MessageApp',    'PatientApp',    'PhoneApp',    'ReportsApp',    'templates-main',  ]);

Creating a “MainAppModule” allows us to inject all our other modules which in turn allows each of our other modules to access each other. So if the Reports module needs to access something from the Patient module, it will be able to with this method without having to inject the Patient module directly into the Reports module.

The MainApp also allows us to do routing and use ng-view in our index.html file:

<html>// ...<body ng-app="MainApp">    <div ng-view></div></body></html>

Then you define your routes on the MainApp module

// scripts/routes.jsangular.module('MainApp')  .config(    ['$routeProvider',      function($routeProvider) {
        $routeProvider          .when('/', {
            templateUrl: 'modules/dashboard/views/index.html',
            action: 'DashboardApp.DashboardCtrl'          })   // ...

Implementing Your Modules

Now when we go to add a directive/service/filter/controller to a module, we open up the appropriate file within that module and simply use the appropriate module name when we define it.

// app/modules/patient/controllers.jsangular.module('PatientApp').controller('PatientCtrl', function($scope) {
 $scope.patients = "something";});

Since we inject all modules into a “global” module you will need to take care to namespace your angular elements appropriately so you don’t run into name conflicts. Take a look at angular bootstrap code too see how they use multiple modules and namespace them.

转载于:https://my.oschina.net/u/1390066/blog/213782