Angular学习(一)【Angular-CLI，简单解析】

范志勇

2023-12-01

认识 Angular-CLI

开发 Angular 需要很多的工具，比如 Typescript 、 Webpack 、 Karma 等等，这些工具自己去配置会很麻烦，所以 Angular 官方推出了 Angular-CLI 。

Angular-CLI 不仅仅是一个构建 Angular 的工具，而是一个集成了很多工具的平台。

安装

Angular-CLI 新版本已经更名为 @angular/cli

npm install -g @angular/cli

常用命令

创建项目

ng new my-project

ng new 会自动创建 Angular 项目并安装依赖，安装依赖时可以按住 Ctrl+C 来停止，然后自己科学的安装依赖。

创建模块

ng g cl MyClass
ng g c  MyComponent
ng g d  MyDirective
ng g e  MyEnum
ng g m  MyModule
ng g p  MyPipe
ng g s  MyService

其中 g 是 generate 的缩写，后面的也都是缩写，可以通过 ng g 来创建这些模块，它们会被自动创建到 src/app/ 下面的文件夹下，并且以小驼峰式创建文件夹： src/app/my-component

启动项目

ng serve

ng serve 会启动项目，默认为 4200 端口。但这时是在未编译的状态下运行项目，所以js文件会很大，也可以通过下面的命令来解决这个问题：

ng serve --prod --aot

此时会自动启用 AOT ，此时启动项目就会发现加载的资源很小。

构建项目

ng build

构建项目会在项目下生成一个 dist 的文件夹，构建后的项目就在这个文件夹里了。

测试项目

ng test

会使用karma自动测试项目里的测试用例。

代理设置

@angular/cli 内置了代理，所以开发时不同配置反向代理就可以用，代理文件proxy.conf.json如下：

{
  "/api/*": {
    "target": "http://localhost:9000/api",  // 目标地址
    "changeOrigin": true,   // 将host的源更改为目标URL'。
    "secure": false,    // 
    "logLevel": "debug",  // 显示请求
    "pathRewrite": {
      "^/api": ""
    }
  }
}

当运行项目时，使用以下命令：

$ ng serve --proxy-config proxy.conf.json

这章介绍了 Angular 的基本构造，即 Angular 是怎么运行起来了。这章会一步一步的搭建一个 Hello World 的例子。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { }

app.component.html

<h3>Hello World!</h3>

上述代码中，首先通过 import 从 Angular 的基础包 @angular/core 中引入组件模块 Component ,通过 @Component 装饰器来告诉 Angular 怎样创建这个组件。在组件在中可以定义该组件的 DOM 元素名称，如 selector: 'app-root' ,也可以给组件引入所需要的模板，如 templateUrl: './app.component.html';最后，定义一个组件类并对外输出该类，这样在其他的文件中就可以通过这个类名引用该组件。

app.module.ts

在 Angular 中需要用模块来组织一些功能紧密相关的代码块，每个应用至少有一个模块，习惯上把它叫做 AppModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

@NgModule：用于定义模块用的装饰器;
declarations：导入模块依赖的组件、指令等;
imports：用来导入当前模块所需的其他模块。在这个例子中，几乎每个应用的跟模块都需要导入 BrowserModule 模块，它注册了一些关键的 Provider 和通用的指令，所以在 imports 属性中配置，作为公共模块供全局调用;
bootstrap：标记出引导组件，在 Angular 启动应用时，将被标记的组件渲染到模板中。

main.ts

Angular 项目一般有一个入口文件，通过这个文件来串联起整个项目。

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

platformBrowserDynamic().bootstrapModule(AppModule);

要启动应用，主要依赖于 Angular 自带的 platformBrowserDynamic 函数和应用模块 AppModule ，然后调用 platformBrowserDynamic().bootstrapModule() 方法，来编译启动 AppModule 模块。

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Project01</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>Loading...</app-root>
</body>
</html>

其中的 app-root 标签就是我们在根组件 app.component.ts 中定义的 selector 。

这样就是一个最简单的 Angular 项目了。