zoukankan      html  css  js  c++  java
  • angular模块详解

    原文:

    https://www.jianshu.com/p/819421ff955a

    大纲

      1、angular应用是模块化的
      2、对模块(Module)的认识
      3、模块的分类:根模块和特性模块
      4、NgModel参数详解
      5、imports数组与文件头部的import的对比

    angular应用是模块化的

      1、Angular 应用是模块化的,并且Angular有自己的模块系统,它被称为Angular模块或NgModules.
      2、每个Angular应用至少有一个模块(根模块),习惯上命名为AppModule
      3、根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
      4、Angular模块(无论是根模块还是特性模块)都是一个带有@NgModule装饰器的类。
      5、我们通过引导根模块来启动应用,在开发期间,通常在一个main.ts文件中引导AppModule,如:

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app/app.module';
    platformBrowserBynamic().bootstrapModule(AppModule);
    

    对模块(Module)的认识

      1、Angular模块是一个由@NgModule装饰器提供元数据的类,元数据包括:
        声明哪些组件、指令、管道属于该模块
        公开某些类,以便其它的组件模板可以使用它们
        导入其它模块,从其它模块中获得本模块所需的组件、指令和管道
        在应用程序级提供服务,以便应用中的任何组件都能使用它
      2、 模块是组织应用和使用外部扩展应用的最佳途径
      3、 在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。
      4、模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。
      5、模块与模块之间可以相互调用,调用用import,开出接口让人可以调用export
      6、在Angular模块中管理着本模块中的各个组件。

    模块的分类:根模块和特性模块

      1、每个Angular2的应用都至少有一个模块即根模块。
    随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。
      2、功能模块与根模块的职责区别主要有以下两点:
        2.1:根模块的目的在于启动app,功能模块的目的在于扩展app
        2.2:功能模块可以根据需要暴露或隐藏具体的实现
      3、Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。

    NgModel参数详解

      NgModule是一个装饰器函数,它接收一个用来描述模块属性的元数据对象,其中最重要的属性是:
      1、declarations:用于声明本模块中拥有的视图类,Angular有三种视图类:组件、指令和管道。
      2、exports:declarations的子集,可用于其它模块的组件模板。(用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。)
      3、imports:本模块声明的组件模板需要的类所在的其它模块(导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。)
      4、providers:服务的创建者,并加入到全局服务列表中,可用于应用任何部分。(指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中))
      5、bootstrap:指定应用的主视图(称为根组件),它是所有其它属兔的宿主,只有根模块才能设置bootstrap通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
      6、entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。

    imports数组与文件头部的import的对比

      1、imports数组和文件头部的import的应用
        1.1、imports数组:是Angular中特有的,本模块声明的组件模板需要的类所在的其它模块(导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。)
        1.2、文件头部的import:用于引用一些在其他文件中定义好的公用的方法,数据模型,这是JavaScript的方式
      2、区别:
        2.1、JavaScript的import声明允许你访问在其他文件中导出的符号,这样你可以在当前文件引用它们。我们会往几乎所有类型的应用中加入import语句。它们与Angular毫无关系,Angular对它们一无所知。
        2.2、模块的imports数组是@NgModule元数据中独有的。它告诉Angular特定Angular模块的信息——用@NgModule装饰的类——应用需要它们来正常工作

    参考网址:

    https://www.cnblogs.com/dojo-lzz/p/5878073.html

  • 相关阅读:
    LC.225. Implement Stack using Queues(using two queues)
    LC.232. Implement Queue using Stacks(use two stacks)
    sort numbers with two stacks(many duplicates)
    LC.154. Find Minimum in Rotated Sorted Array II
    LC.81. Search in Rotated Sorted Array II
    LC.35.Search Insert Position
    前后端分离:(一)
    Redis基本使用(一)
    GIT篇章(二)
    GIT篇章(一)
  • 原文地址:https://www.cnblogs.com/shcrk/p/9211426.html
Copyright © 2011-2022 走看看