开始学习Angular(准备)

Angular程序架构

组件:是Angular应用的基本构建块，你可以把一个组件理解为一段带有业务逻辑和数据的html。

模块:用来将应用中不同的部分组织成一个Angular框架可以理解的单元。

服务:用来封装可重用的业务逻辑。

指令：允许你向html元素添加自定义行为。

搭建Angular开发环境

安装Nodejs,Angular CLI,WebStorm

使用Angular CLI创建并运行Angular项目

  Angular CLI命令可用的命令:
  add Adds support for an external library to your project.
  analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering.
  build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  deploy Invokes the deploy builder for a specified project or for the default project in the workspace.
  config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  extract-i18n (i18n-extract, xi18n) Extracts i18n messages from source code.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular application.
  run Runs an Architect target with an optional custom builder configuration defined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angular.io/
  version (v) Outputs Angular CLI version.

比较常用的有：
ng new my-app 创建my-app
ng serve 启动服务
ng g component navbar

安装Angular CLI后，新增了ng命令，可以使用ng v命令测试当前Angular CLI版本。

使用ng new my-app（生成以my-app为名称的项目）

创建项目报错setTimeout is not defined因为我之前安装angular脚手架是通过cnpm安装的，所以通过上面提示的解决办法，我就通过以下的步骤来实现：卸载angular/cli，使用npm install -g @angular/cli安装脚手架

分析Angular项目的目录结构及Angular CLI生成的基础代码

e2e 端到端测试
package.json npm配置文件，引入第三方包
index.html 单页应用中的单页,和vue一样，这里就是打包编译结果的出口
main.ts 模块的启动入口，相当于vue中的main.js的作用1.加载根模块2.启动执行模块系统
app.module.ts 描述跟组件的重要特性，加载其他资源，声明根组件，组织了其他组件或服务

//从angular/core核心模块中导入装饰器组件Componet
import { Component } from '@angular/core';


//组件元数据装饰器
@Component({
//css选择器，这个组件可以通过app-root标签来调用
 selector: 'app-root',
//组件展示app.component.html模板的布局和内容
 templateUrl: './app.component.html',
//组件模板中用到的样式
 styleUrls: ['./app.component.css']
})
//AppComponent是一个标准ts类，使用@Component注解告诉
//Angular这是一个组件
export class AppComponent {
 //模板中逻辑都编写在这里面
 //数据绑定(将模板与控制器联系起来)在模板中替换插值表达式{{title}}中的title值
 title = 'auction';
}


//声明模块需要的组件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
//声明AppModule是一个模块
//组装模块资源：组件、指令、服务
@NgModule({
   //这个元数据声名组件，指令和管道
  declarations: [
    AppComponent
  ],
  //这个声明了应用运行需要的模块，依赖模块
  imports: [
    BrowserModule
  ],
  //声明模块提供了什么服务
  providers: [],
  //声明了模块的主组件是什么，指定启动的根组件
  bootstrap: [AppComponent]
})
//带着装饰器的ts类，将这个模块导出，外部可以使用
export class AppModule { }

启动过程

{
“$schema”: “./node_modules/@angular/cli/lib/config/schema.json”,
“version”: 1,
“newProjectRoot”: “projects”,
“projects”: {
“auction”: {
“projectType”: “application”,
“schematics”: {},
“root”: “”,
“sourceRoot”: “src”,
“prefix”: “app”,
“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/auction”,
“index”: “src/index.html”,
“main”: “src/main.ts”,

//关闭开发者模式
import { enableProdMode } from '@angular/core';
//告诉angular使用哪个模块启动应用
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//命令行模块生成的主模块
import { AppModule } from './app/app.module';
//导入环境配置（多环境支持）
import { environment } from './environments/environment';
//如果是生产环境关闭开发者模式
if (environment.production) {
  enableProdMode();
}
//向bootstrapModule传入AppModule模块，作为启动模块来启动应用。
//加载AppModule模块后再加载AppModule依赖的模块
//AppModule指定的主组件AppModule.module对应的CSS选择器app-root，找到app-root标签后，使用模板app.template.html替换掉app-root标签。
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

通过终端运行第一个angular程序

PS I:\frontworkbench\auction> ng s
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   2.43 MB
polyfills.js          | polyfills     | 474.99 kB
styles.css, styles.js | styles        | 347.03 kB
main.js               | main          |  55.19 kB
runtime.js            | runtime       |   6.15 kB

                      | Initial Total |   3.30 MB

Build at: 2021-04-06T14:51:43.036Z - Hash: 20826b4cd44a989e2b39 - Time: 6987ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.