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

前端之家收集整理的这篇文章主要介绍了html5 – 结构化我的AngularJS应用程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我完全是新手使用AngularJs,虽然我已经通过教程,我仍然有大量的未回答的问题在我心中。我现在的主要问题是如何将我的应用程序分成模块?

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

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

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

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

解决方法

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

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

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

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

>应用程式

> businessModule

>控制器

> index.js
> firstCtrl.js
> secondCtrl.js

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

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

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

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

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

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

这里没有依赖,但可能有任何依赖。

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

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

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

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

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

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

编辑

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

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相关文章