Angular

Angular-cli

2021-05-23  本文已影响0人  浅忆_0810

1.创建应用

  1. 安装 angular-cli

    npm install @angular/cli -g

  2. 创建应用

    ng new angular-test --minimal --inlineTemplate false

    --skipGit=true // 不创建初始化 git 仓库
--minimal=true // 创建精简的 angular 项目 不包含测试文件,组件类 组件样式 组件模板被放置在一个文件中 如下图二
--skip-install // 不自动安装依赖
--style=css // 使用什么方式编写样式
--routing=false // false: 不创建路由文件
--inlineTemplate // 让组件模板是一个单独文件 如下图三
--inlineStyle // true: 组件类文件和组件样式文件合并为一个文件
--prefix // 默认前缀  app-
--skip-tests // 不创建测试文件（.spec.ts）
    完整项目 --minimal --inlineTemplate

  3. 运行应用：ng serve

    1. --open=true 应用构建完成后在浏览器中运行
    2. --hmr=true 开启热更新
    3. hmrWarning=false 禁用热更新警告
    4. --port 更改应用运行端口

2. 默认代码解析

2.1 main.ts 

// enableProdMode 方法调用后将会开启生产模式
import { enableProdMode } from "@angular/core"
// Angular 应用程序的启动在不同的平台上是不一样的
// 在浏览器中启动时需要用到 platformBrowserDynamic 方法, 该方法返回平台实例对象
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
// 引入根模块 用于启动应用程序
import { AppModule } from "./app/app.module"
// 引入环境变量对象 { production: false }
import { environment } from "./environments/environment"

// 如果当前为生产环境
if (environment.production) {
  // 开启生产模式
  enableProdMode()
}
// 启动应用程序
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err))
platformBrowserDynamic

2.2 environment.ts 

// 在执行 ng build --prod 时, environment.prod.ts 文件会替换 environment.ts 文件
// 该项配置可以在 angular.json 文件中找到, projects -> angular-test -> architect -> configurations -> production -> fileReplacements

export const environment = {
  production: false
}

2.3 environment.prod.ts 

export const environment = {
  production: true
}

2.4 app.module.ts 

// BrowserModule 提供了启动和运行浏览器应用所必需的服务
// CommonModule 提供各种服务和指令, 例如 ngIf 和 ngFor, 与平台无关
// BrowserModule 导入了 CommonModule, 又重新导出了 CommonModule, 使其所有指令都可用于导入 BrowserModule 的任何模块 
import { BrowserModule } from "@angular/platform-browser"
// NgModule: Angular 模块装饰器
import { NgModule } from "@angular/core"
// 根组件
import { AppComponent } from "./app.component"
// 调用 NgModule 装饰器, 告诉 Angular 当前类表示的是 Angular 模块
@NgModule({
  // 声明当前模块拥有哪些组件
  declarations: [AppComponent],
  // 声明当前模块依赖了哪些其他模块
  imports: [BrowserModule],
  // 声明服务的作用域, 数组中接收服务类, 表示该服务只能在当前模块的组件中使用
  providers: [],
  // 可引导组件, Angular 会在引导过程中把它加载到 DOM 中
  bootstrap: [AppComponent]
})
export class AppModule {}

2.5 app.component.ts 

import { Component } from "@angular/core"

@Component({
  // 指定组件的使用方式, 当前为标记形式
  // app-home   =>  <app-home></app-home>
    // [app-home] =>  <div app-home></div>
  // .app-home  =>  <div class="app-home"></div>
  selector: "app-root",
  // 关联组件模板文件
  // templateUrl:'组件模板文件路径'
    // template:`组件模板字符串`
  templateUrl: "./app.component.html",
  // 关联组件样式文件
  // styleUrls : ['组件样式文件路径']
    // styles : [`组件样式`]
  styleUrls: ["./app.component.css"]
})
export class AppComponent {}

2.6index.html 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularTest</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

3. 共享模块

共享模块当中放置的是 Angular 应用中模块级别的需要共享的组件或逻辑。

  1. 创建共享模块： ng g m shared

  2. 创建共享组件：ng g c shared/components/Layout

  3. 在共享模块中导出共享组件

    @NgModule({
  declarations: [LayoutComponent],
  exports: [LayoutComponent]
})
export class SharedModule {}

  4. 在根模块中导入共享模块

    @NgModule({
  declarations: [AppComponent],
  imports: [SharedModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

  5. 在根组件中使用 Layout 组件

    @Component({
  selector: "app-root",
  template: `
    <div>App works</div>
    <app-layout></app-layout>
  `,
  styles: []
})
export class AppComponent { }
上一篇下一篇

猜你喜欢

热点阅读