如何将大型AngularJS项目拆分为模块

前端之家收集整理的这篇文章主要介绍了如何将大型AngularJS项目拆分为模块前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我来自Backbone和JavascriptMVC的世界.但我真的很想转而使用AngularJS.到目前为止,我有一个大问题让我无法转换.

我创建单页应用程序.让我们假装它包含一个标签模块,一个文件上传模块和一个文件列表模块.

我在Backbone中做的是将每个作为独立模块分开
用自己的视图模板,viewcontroller等.这样,我就可以在我的应用程序中使用该模块的几个位置.模块不知道除了它自己以外的任何东西.

如何在AngularJS中处理这个问题?是否可以为每个模块创建一个angular.module(例如标签模块)?

我觉得他们告诉如何在他们的文档中创建模块中的许多控制器.但这听起来并不像我需要的那样.或者我在这里误解了一些主要概念?

编辑:
我做了一些更多的研究.它看起来像指令是我正在寻找的.虽然AngularJS中的模块代表整个Web应用程序.因此,名称’组件’和’模块’的混合使我感到困惑.

我现在正走在正确的道路上吗?

您绝对可以定义模块,并在应用程序级别包含模块,然后通过依赖注入,您可以让控制器使用他们需要的内容.

我有一个小型应用程序的概念验证示例,我正在努力学习角度(它很脏,我的操场):

http://plnkr.co/edit/1jGqaB00OznAUpyPZVT3

我的应用程序定义如下所示:

angular.module('myApp',['ngResource','ui.bootstrap','myApp.services','myApp.servicesMovie','myApp.servicesSearch','myApp.servicesUtils','myApp.servicesMovieList'])

您可以看到我在我的应用程序中包含了许多不同的模块,然后是从服务模块获取一些服务的控制器示例:

function SearchCtrl($scope,$rootScope,$route,$timeout,$routeParams,$location,SearchService,MovieListService) { etc }

这是模块的定义之一(也具有依赖性):

angular.module('myApp.servicesMovieList',['myApp.services'])

关于模板,您可以定义这些并将它们包含在您的路线值中:

$routeProvider.when('/view1',{templateUrl: 'view1.html',controller: ViewCtrl});
    $routeProvider.when('/movie/:id',{templateUrl: 'movie-detail.html',controller: MovieCtrl,resolve: MovieCtrl.resolve});
    $routeProvider.when('/search/:q/:p',{templateUrl: 'movie-search.html',controller: SearchCtrl});
    $routeProvider.when('/searchlist/:url/:p',controller: SearchCtrl});
    $routeProvider.otherwise({redirectTo: '/view1'});

  }])

或者您当然可以使用ng-include调用它们

猜你在找的Angularjs相关文章