【玩转 Angular】1. Angular-CLI 安装与使用

全局安装 Angular CLI 脚手架并创建项目

1.使用 npm 安装命令

$ npm install -g @angular/cli

2.使用 ng new 项目名 命令创建项目

$ npm new my-app

3.进入创建的项目并运行

$ cd my-app && ng server --open

目录结构解析

项目结构

src 目录结构

app.module.ts 代码分析

// BrowserModule 浏览器解析的模块
    import { BrowserModule } from '@angular/platform-browser';
    
    // angular 核心模块
    import { NgModule } from '@angular/core';
    
    // 根组件
    import { AppComponent } from './app.component';
    
    @NgModule({
        // 引入当前项目运行的组件
        declarations: [
            AppComponent
        ],// 引入当前模块运行依赖的其他模块
        imports: [
            BrowserModule
        ],// 定义的服务
        providers: [],// 根据应用的主视图（称为跟组件）通过引导根 AppModule 来启动应用，这里一般写的都是跟组件
        bootstrap: [ AppComponent ]
        
    })
    
    // 根模块不需要导出任何东西，因为其他组件组件不需要导入根模块，但一定要写
    export class AppModule { }

创建自定义组件

1.通过 ng g component 组件名称 命令创建自定义组件

$ ng g component components/header

2.app.module.ts 会自动添加 header 组件的引用

// BrowserModule 浏览器解析的模块
    import { BrowserModule } from '@angular/platform-browser';
    // angular 核心模块
    import { NgModule } from '@angular/core';

    // 根组件
    import { AppComponent } from './app.component';

    // Header 组件
    import { HeaderComponent } from './components/header/header.component';
    
    
    @NgModule({
      // 引入当前项目运行的组件
      declarations: [
        AppComponent,HeaderComponent
      ],// 引入当前模块运行依赖的其他模块
      imports: [
        BrowserModule
      ],// 定义的服务
      providers: [],// 根据应用的主视图（称为根组件）通过引导根 AppModule 来启动应用，这里一般写的都是根组件
      bootstrap: [AppComponent]
    })

    // 根模块不需要导出任何东西，因为其他组件不需要导入根模块，但一定要写。
    export class AppModule { }

3.打开 app/components/header/header.component.ts

// 引入 angular 核心模块
    import { Component,OnInit } from '@angular/core';
    
    @Component({
        // 在 HTML 中的引用标签名称
        selector: 'app-header',// 组件 html 模板
        templateUrl: './header.component.html',// 组件 css 样式
        styleUrls: ['./header.component.css']
    })
    
    export class HeaderComponent implements OnInit {    // 实现 OnInit 接口
        
        // 构造函数
        constructor() { }
        
        // 初始化加载的生命周期
        ngOnInit() { }
    }

4.在 app/app.component.html 中引入 header 组件

<app-header></app-header>

5.通过命令运行项目

$ ng server --open

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!