angular4 总体架构

1.Angular程序架构：

　　

 

2.组件Component架构：

　　

必备元素：

　　装饰器@Component()：组件元数据装饰器，声明一个组件；

　　模板Template：页面渲染，其实就是html文件，能够使用angular的指令与控制器进行数据绑定；

　　控制器Controller：用来编写页面大部分业务逻辑；

　　在代码中的呈现以下：

　　　　

可选的可注入对象：

　　输入属性@inputs()：接收外部传入数据，使得父组件能够传递数据给子组件；

　　提供器provides：用于依赖注入；

　　生命周期钩子Lifecycle Hooks：在组件从建立到销毁的过程中，有多个钩子能够触发和执行各类业务逻辑；

可选输入对象：

　　样式表styles：提供组件专用的样式；

　　动画Animations：angular提供了动画包来实现组件的动画效果，如淡化淡出；

　　输出属性@outputs()：用来输入其余属性可能会用到的事件，或者在组件之间共享数据；

 

3.Module模块代码结构：

模块在代码中的文件形式xxx.module.ts，以下，对模块的代码内容进行分析：

　　

　　@NgModule：声明一个模块；

　　declarations属性：声明 组件、 指令和 管道；

　　imports属性：声明须要用到的 其余模块，当引用了其余模块，即可以使用那些模块的指令、组件和服务；

　　providers属性：声明该模块中提供了什么 服务；

　　bootstrap属性：声明该模块的 主组件，即启动组件；

NgModule接口：

interface NgModule {
     // providers: 这个选项是一个数组,须要咱们列出咱们这个模块的一些须要共用的服务
     //            而后咱们就能够在这个模块的各个组件中经过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               而后咱们就能够在这个模块中使用它们了.
    declarations : Array<Type<any>|any[]>
     // imports: 数组类型的选项,咱们的模块须要依赖的一些其余的模块,这样作的目的使咱们这个模块
     //          能够直接使用别的模块提供的一些指令,组件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,咱们这个模块须要导出的一些组件,指令,模块等;
     //          若是别的模块导入了咱们这个模块,
     //          那么别的模块就能够直接使用咱们在这里导出的组件,指令模块等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每个组件建立一个ComponentFactory而后把它存储在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.固然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都须要在这里进行声明.
    schemas : Array<SchemaMetadata|any[]>
    // id: 字符串类型的选项,模块的隐藏ID,它能够是一个名字或者一个路径;用来在getModuleFactory区别模块,若是这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }

 https://segmentfault.com/a/1190000007187393