角。模块结构

时间:2017-06-28 15:43:11

标签: angular module

可能我只需要解释(没有回答我的问题,在某些解释案例中可能无效)。研究角度我已经找到了如何使用angular-cli创建新模块。 ...但我不知道如何从主模块使用。为了接近角度,我尝试了下一个实验。

我已经生成了一个模块:

$  ng generate module myTestModule
installing module
  create src/app/my-test-module/my-test-module.module.ts

$  ng generate module myTestModule2
installing module
  create src/app/my-test-module2/my-test-module2.module.ts

1。 我有通常的文件描述主模块app.module.ts。我可以在my-test-module.module.tsapp.module.ts my-test-module2.module.ts中注册模块my-test-module.module.ts。怎么能让我的应用更好?

2。 我在许多模块上的红色分裂应用程序提供了更好的性能但我对此感到困惑。如果我使用某些数据加载功能来URI1 module1加载数据,我导航到URI2 module1已取消激活,但module2会加载数据。如果我向后导航module1再次保持活动并第二次加载相同的数据!我是否错过了棱角分明的东西?

3。 如何使用angular从模块结构中获益?

2 个答案:

答案 0 :(得分:1)

在#2上 - 你能提供更多细节吗? module1module2是否执行相同的请求并且您希望共享结果?如果是这样,那么您必须创建Service并放入core.module,每个应用程序只需导入一次该模块。 angular.io有一个名为Style Guide的文档页面,请阅读它,它没有关于项目结构的非常重要和有用的注释(特别是coreshared模块的概念)。

如果module1module2执行不同的请求,并且您希望缓存该请求(即不执行第二次,当导航回module1时) - 您必须&# 34;高速缓存"手动输入数据(只需将结果保存到service中的变量)。

根据我的理解,当你有多模块结构时,你可以:   - 执行Lazy Load(或根本禁止加载,例如,如果用户没有权限) - 文件(js / html)将仅在用户请求时或在加载主页面后加载(defored loading) 。它增加了启动时间   - 通常,当从页面卸载模块/组件时,所有观察者/观察者/其他区域的东西都有点"垃圾收集",这会减少内存使用

答案 1 :(得分:1)

谈论你的好处:

  • 模块是独立的,可以在多个方面移动或使用,这可以避免代码重复更多信息https://angular.io/guide/styleguide#application-structure-and-angular-modules
  • 另一个优点是能够使用延迟加载。更多信息https://angular.io/guide/ngmodule#lazy-loading-modules-with-the-router这将使您根据路由器导入您需要的想法。例如,主屏幕只需要加载一个组件,它应该尽可能快。
  • 智能导入,导入图书馆时我们通常会犯错误,我们不需要整个导入一个例子。

    import { Observable } from 'rxjs/Observable';
    import * from "rxjs";
    

    在这个例子中,我们只使用observable而不需要导入整个库,因为它会使我们的bundle大小更大。在模块中拆分我们的代码将允许像这个例子那样进行智能导入。

     import { MdToolbarModule} from '@angular/material';
     // import { MaterialModule } from '@angular/material';
     imports: [
       // MaterialModule.forRoot(),
       MdToolbarModule,
     ], 
    

    我们可以导入整个库,但由于这是一个简单的组件,我们只需要一个简短的模块。