1. 简介
-
为什么使用Angular?
-
Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用.
-
支持TypeScript语法,进行代码的编译,可以有效的减少代码编写时的错误
-
Angular是一套用于构建用户界面的javaScript 框架.有Google开发和维护,主要被用来开发单页面应用程序
-
类似于Vue.js
- MVVM
- 组件化
- 模块化
- 指令
- …
-
-
这里附上官网地址: https://angular.cn/guide/setup-local
1.1 版本问题
-
Angular1 因为当时的大环境需求,出现了一些困境
- 饱受诟病的性能问题
- 脏检查
- 落后于当前web发展理念
- 组件化,模块化支持不够友好
- 对移动端支持不够友好
- 饱受诟病的性能问题
-
Angular1 因为问题太多,重构几乎不可能,之后就开发了Angular2
-
因为Angular2 因为几乎重写了Angular1,所以后来的官方就把Angular 称为Angular
- 优点:
- 相比于ng1性能够好
- 更贴近未来标准
- es6,web
- TypeScript
- …
- 优点:
2. 安装
2.1 配置依赖环境
2.1.1 安装 Node.js
-
下载地址: https://nodejs.org/en/download
//查看是否安装完成 node -v
2.1.2 安装 npm
- npm会随着 Node 的安装被一起安装
//查看是否安装完成 npm -v
2.1.3 安装 Python
-
下载地址: www.python.org
扫描二维码关注公众号,回复: 11129472 查看本文章//查看是否安装完成 python -version
2.1.4 安装C++编译工具
//安装指令
npm install --global --production windows-build-tools
2.1.4 安装 cnpm
-
使用npm 下载速度太慢,建议使用国内的镜像网站
//安装指令 npm i -g cnpm --registry=https://registry.npm.taobao.org
2.2 安装脚手架工具
- Angular Cli 是 Angular 官方开发的一个类似与 Vue Cli 的脚手架工具,他可以帮我们集成各种服务
//安装指令 cnmp i -g @angular/cli //查看是否安装完成 ng --version
3. 创建项目
-
创建一个项目文件夹
//初始化项目 ng new 项目名
-
注意: ng命令使用的是 npm,下载速度过慢可能会导致创建失败
-
需要打断安装/Ctrl + c
//使用cnpm安装 cd 项目名 cnpm install
-
-
启动项目: ng serve
3.1 目录结构
ese 端到端测试
node_modules npm安装的第三方包
src 业务源代码
.angular-cli.json 脚手架配置工具
.editorconfig 针对编译器的代码风格约束
.gitignore Git仓库忽略配置项
karma.conf.js 测试配置文件
parckage.json 项目包说明文件
protractor.conf.js 端到端测试配置文件
README.md 项目说明文件
tsconfig.json TypeScript配置文件
tslint.json TypeScript代码风格校验工具配置文件
4. 组件
-
组件(Component)是整个框架的核心,也是终极目的
- 分支: 可以吧各种逻辑封装在内部,避免混在一起
- 复用: 封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用
-
创建组件指令:
- cd 切换到项目根目录
- ng generate component 组件名
-
app.component.ts
import { Component } from '@angular/core'; // 在Angular 中,组件就是一个类 (构造函数的另一种写法) // [@Component](https://my.oschina.net/u/3907912) 组件的装饰器 // selelctor 组件的名称 // templateUrl 用来指定组件的模板文件 // styleUrls 一个数组,用来存放组件相关的样式 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // 存放数据的区域 title = 'angular-demo01 谢明安 曾鹏程Zz'; count = 0; selfIncrement = () => { this.count ++ } }
5. 模块
-
模块 (AgModule) 就是按照你自己的业务场景,把组件,服务,路由器打包到模块中,形成一个整体
-
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { FooComponent } from './foo/foo.component'; @NgModule({ // 组装模块资源: 组件, 指令, 服务 declarations: [ AppComponent, FooComponent ], imports: [ // 依赖模块 BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] // 指定启动的根组件 }) // 导出文件 export class AppModule { }