angular知识点梳理第一篇

文章目录

• • • • 背景介绍
      • 初识Angular
      • • 官网
      • 学习前提知识
      • • ts官网
        • 环境
        • node官网
      • 创建一个angular项目
      • • 安装angular脚手架
        • 创建项目
        • 启动项目
        • 启动默认页
        • 初始化编辑器
        • vscode安装angular插件
        • 认识项目目录
        • 认识入口配置文件
      • 写到最后

背景介绍

初识Angular

官网

Angular

学习前提知识

• javascript
• css
• html
• typescript

ts官网

typescript

环境

• node

node官网

nodejs

创建一个angular项目

安装angular脚手架

• 命令行1 使用npm安装

npm install -g @angular/cli

• 命令行2 使用yarn安装

yarn global add @angular/cli

创建项目

• 命令行

ng new csdndemo [csdndemo是你自己的项目名字]

启动项目

• 命令行

ng serve --open

启动默认页

初始化编辑器

• 这里使用的是vscode进行代码编写，我们引入刚才创建的项目，为了让该编辑器对angular项目进行一个比较友好的提示处理，我们需要进行安装一个angular的插件

vscode安装angular插件

认识项目目录

认识入口配置文件

// 核心模块
import { NgModule } from '@angular/core';
// 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// 路由解析模块
import { AppRoutingModule } from './app-routing.module';
// 根组件
import { AppComponent } from './app.component';
// @NgModules 是angular的一个装饰器，他接受一个元数据对象，告诉该应用如何编译和启动应用
@NgModule({
  // 配置当前项目运行的组件
  declarations: [
    AppComponent
  ],
  // 配置当前模块运行所依赖的其他模块
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // 配置项目所需要的服务
  providers: [],
  // 指定应用的主视图（根组件） 通过引导AppModules来启动应用，这里一般写的是根组件 也就是app下面直接可以看到的那个组件
  bootstrap: [AppComponent]
})
// 根组件不需要导出任何东西，因为其他组件不需要引入它
export class AppModule { }

写到最后