zoukankan      html  css  js  c++  java
  • angular2学习--根模块

    最近有时间,学习一下angular2,根据自己的理解添加一些自己的理解,有什么不对的地方请指教,

    学习的地址是https://angular.cn/

    下边是分享一下我学习过程

    angular2和angular1一样,都需要创建跟模块

    angular1一般默认用app文件作为根模块的创建文件,创建方式如下

    angular.module('app', [
        'ui.router'
      ])
    

    中括号内部位自己引用的第三方的一些插件或者服务。

    angular2也同样需要创建根模块,创建方式发生了一点变化,创建方式如下

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppComponent }  from './app.component';
    
    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })

    前三行import部分是ts的语法,引入三方的类库,angular的类不再是同一引用,使用哪一部分,需要单独的引用该部分

    和angular1不同,angular1的根模块必须有且有一个,但是angular2必须有一个或多个,是可以有多个的,angular2可以添加特性模块,

    angular2的模块都是带有@NgModule修饰器的类

    @NgModule是一个修饰器函数,接收五个参数

    declarations:这个模块引用的视图类,分为三种组件/指令/管道

    exports:declarations的子模块,可用于其它模块的组件模板

    imports:这个是描述你的模块所引用其他类所在的模块

    providers: 服务的创建者,加入到全局服务列表中,可用于应用任何部分。

    bootstrap: 指定应用的称为根组件,它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

    angular1的根模块是只需要直接引用js,angular会直接自动的启用,

    angular2是需要我们自己配置启动的,启动一般都是放置在项目的main.ts文件中,启动方式如下

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    
    platformBrowserDynamic().bootstrapModule(AppModule);
  • 相关阅读:
    【Python】pip install PIL 报错
    【Selenium】打开浏览器闪退并报错
    【Pycharm】Configuration is still incorrect.
    【Pycharm】初次打开pycharm,“运行”等按钮是灰色,无法运行程序
    如何将APP上传到各大应用市场
    JMeter体系结构
    Workerman启动与停止相关命令
    Workerman简单开发示例实践(二)
    Workerman简单开发示例实践(一)
    Web网站实现Google登录
  • 原文地址:https://www.cnblogs.com/happen-/p/6258876.html
Copyright © 2011-2022 走看看