html5 – 结构化我的AngularJS应用程序

我完全是新手使用AngularJs，虽然我已经通过教程，我仍然有大量的未回答的问题在我心中。我现在的主要问题是如何将我的应用程序分成模块？

基本上，我需要构建一个应用程序，它将充当各种应用程序的门户，每个代表一个业务功能(有时与彼此之间几乎没有关系)。@H_301_3@

在本教程中，它们展示了如何创建一个具有多个视图的应用程序。我需要的是一个应用程序与多个模块，每个模块有自己的意见(我可能会有共享的意见)。@H_301_3@

有没有人在这种结构的应用程序上工作？你能分享你的经验和你如何组织的东西吗？@H_301_3@

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

解决方法

[编辑]
我在我的博客上写了一篇文章，更详细地解释一下：

read it on sam-dev.net，现在可以read part II，带代码示例。@H_301_3@

我会回答我自己的问题。不是因为我认为这是最好的方法，而只是因为它是我决定去的。@H_301_3@

这就是我把我的业务模块分成文件夹@H_301_3@

>应用程式@H_301_3@

> businessModule@H_301_3@

>控制器@H_301_3@

> index.js
> firstCtrl.js
> secondCtrl.js@H_301_3@

>指令
>服务
>视图
>过滤器@H_301_3@

> anotherBusinessModule
>共享
> app.js
> index.html@H_301_3@

每个模块都有自己的文件夹结构用于控制器，指令等…@H_301_3@

每个文件夹都有一个index.js文件，然后是其他文件来分隔每个控制器，每个指令等…@H_301_3@

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

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

这里没有依赖，但可能有任何依赖。@H_301_3@

然后在firstCtrl.js中，我可以重用那个模块并添加控制器到它：@H_301_3@

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

然后app.js通过将所有我想要的应用程序模块添加到dependencies数组来聚合。@H_301_3@

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

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

再次，我不知道这是否是最好的方法，但它绝对适合我。也许它可以启发其他人。@H_301_3@

编辑@H_301_3@

由于index.js文件包含模块声明，因此必须在任何其他应用程序脚本之前的html页面中引用它们。为此，我使用了ASP.NET MVC 4的IBundleOrderer：@H_301_3@

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;
    }
}

html5 – 结构化我的AngularJS应用程序

解决方法

猜你在找的HTML5相关文章