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

雨点打透心脏的1/2处 2021-06-26 16:06 422阅读 0赞

# 认识 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 项目了。