我完全是新手使用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 – 结构化我的AngularJS应用程序的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部