angular8创建应用

一、学习 Angular8 必备基础

  • 必备基础:html 、css 、js、es6
  • 如果有 Typescript 基础更容易理解,没有 Typescript 基础也可以学此教程Typescript 语法会详细讲解。
  • Typescript 基础入门教程: https://www.itying.com/goods-905.html

二、Angular 环境搭建

1、安装前准备工作:

  1. 安装 nodejs 安装 angular 的计算机上面必须安装最新的 nodejs--注意安装 nodejs 稳定版本

  2. 安装 cnpm npm 可能安装失败建议先用 npm 安装一下

    cnpm 用淘宝镜像安装 https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 2、使用 npm/cnpm 命令安装 angular/cli (只需要安装一次) npm install -g @angular/cli 或者 cnpm install -g @angular/cli

三、创建项目

1. 打开命令行工具找到你要创建项目的目录

2. 创建项目

ng new 项目名称 ng new angulardemo

  • 如果要跳过 npm i 安装: ng new angulardemo --skip-install

3. 运行项目

cd angulardemo ng serve --open

四、项目结构

  • 项目文件介绍
|-- e2e                            // 项目构建(webpack)相关代码
|   |-- src                   
|-- src                              // 源码目录*
|   |-- app                          // 组件 以及app.module.ts定义模块*
|   |-- assets                       // 静态资源
|   |-- environments                 // 包含各个目标环境准备的文件
|   |-- favicon.ico                  // vue的路由管理
|   |-- index.html                   // 主页面*
|   |-- polyfills.ts                 // 填充库(polyfills)帮我们把这些不同点标准化
|   |-- styles.less                  // 这里是你的全局样式*
|   |-- test.ts                      // 
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .angular.json                    // Angular-cli 配置文件
|-- README.md                        // 项目说明
|-- browserslist                      
|-- package.json                     // 项目基本信息,包依赖信息等
|-- karma.conf.js                    // 给karma的单元测试配置
|-- tsconfig.app.json                 // 单元测试的主要入口点
|-- tsconfig                          // TypeScript编译器的配置
|-- tsconfig.spec.json                // TypeScript编译器的配置文件
|-- tslint.json                       // 代码风格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

五、app.module.ts、 组件分析

1. app.module.ts

/*这个文件是Angular 根模块,告诉angular如何组装应用 */

//BrowserModule,浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
//Angular核心模块
import { NgModule } from '@angular/core';
//数据双向绑定模块
import { FormsModule } from '@angular/forms';
//路由模块
import { AppRoutingModule } from './app-routing.module';
//根组件
import { AppComponent } from './app.component';

/*@NgModule装饰器,@NgModule接受一个元数据对象,告诉Angular如何编译和启动应用*/
@NgModule({
  declarations: [ //配置当前项目运行的组件
    AppComponent
  ],
  imports: [  //配置当前模块运行依赖的其他模块
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],  //配置项目所需要的服务
  bootstrap: [AppComponent] //指定应用的主视图(称为根组件) 通过引导根AppModule来启动应用
})
//根模块不需要导出任何东西, 因为其他组件不需要导入根模块,但是一定要写
export class AppModule { }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2. 自定义组件

https://cli.angular.io/

  • 创建组件: ng g component components/header
  • 组件内容详解:
import { Component, OnInit } from '@angular/core';  //引入angular核心

@Component({
  selector: 'app-header',  //使用这个组件的名称
  templateUrl: './header.component.html',  //html模板
  styleUrls: ['./header.component.less']   //css模板
})
export class HeaderComponent implements OnInit {   //实现接口

  constructor() {  //构造函数

  }  

  ngOnInit() {  //初始化加载的生命周期函数
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17