angular学习-1

前端三大框架的angular 的安装和初始化

angular 和vue、react一样得先安装node,因为需要使用到npm和一些node包的使用
node的安装我就不说了
angular他推荐使用的就是typescript(ts),我们就使用ts进行编写

angular的安装需要先安装ts 和cli
1
2
3
4
5
6
7
8
npm install -g typescript //安装ts
npm install -g @angular/cli //安装脚手架
/*** -g 是安装在全局,有时候安装的时候他会问你需不需要做一个关于谷歌的用户体验反馈好像是,
* 意思就是你用angular
* 可以向谷歌反馈写问题我一般选择n
*/
**/
ng v 或者ng --version//查看是否安装成功

创建个项目和大多数的创建项目差不多

1
2
ng new demo//ng new 项目名字
/** 安装时候他会问你是否要开启严格的语法校验和问你要不要路由routing和要不要scss*/

安装好进入demo 运行

1
2
cd demo
ng serve

运行后会在4200的端口查看你的页面
我们看下结构demo里有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
src
app
app.component.html
app.component.scss
app.component.spec.ts //单元测试.spec.ts源文件的单元测试
app.component.ts //根组件
app.module.ts //主模块
app-routing.module.ts 路由模块
assets
environments
index.html //根页面
main.ts //入口点
favicon.ico
polyfill.ts
styles.scss
test.ts

单元测试看这
创建组件

1
ng generate component stock/stock-item //文件夹和文件

*.component.html 组件模板
*.component.ts 组件的定义
*.component.css 组件的样式
*.component.spec.ts 组件单元测试脚手架
创建这些文件的同时会在app.module.ts里加入引入
在app.component.html文件里写上就可以使用了

1
<app-stock-item></app-stock-item>

×

写着玩做笔记

扫码支持
小编不易来个几毛也是钱

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
,