Angular–day01
Angular
身为目前的 三大WEB框架之一: Vue Angular React
出身:
• Vue: 由 Google 离职程序员开发
• Angular: 由Google公司开发
与Vue相同, 都需要安装脚手架 并且 通过脚手架生成项目包; 然后在项目包中进行开发!
安装脚手架
先确保npm
是中国镜像 以及 node
版本
node尽量是最新版本: 至少>=10.9
下载地址: http://nodejs.cn/download/
node -v
检查npm
镜像是否为中国镜像
重装node
都会重置镜像
查看当前镜像
npm config get registry
设置为淘宝镜像
npm config set registry http://registry.npm.taobao.org/
安装angular脚手架
安装过程中, 可能有询问. 直接回车即可!
npm install -g @angular/cli
常见报错: 如果电脑上已经安装过angular, 则再次安装需要覆盖之前的; 此时如果登录账号的权限低, 可能无法覆盖产生错误:
ERR! code EEXIST
解决方案: 手动删除之前安装的包即可
查看报错中的如下字样:
ERR! dest
已安装文件的路径
复制已安装文件的路径 到文件夹的地址栏, 类似于下方; 但不同电脑可能略有差异!
C:\Users\web\AppData\Roaming\npm
需要删除 npm
目录下 带有 ng 字样的
需要删除 npm/node_modules
下 带有 ng 字样的
删除之后重新安装即可!
查看已安装angular
angular 简称 ng
ng v
生成项目包
注意, 项目包会生成在 cmd
执行所在的目录下:
ng new 包名
例如:ng new ngpro
;
所有询问都回车, 使用默认项. 因为默认项 就是用的最多的选项
出现下方字样即可:
注意: 如果电脑没有安装 git
软件; 下方会有额外提示; 这没有任何关系,不影响开发!
因为种种原因: 系统问题, 配置问题, 防火墙, 网络… 都可能导致 无法安装 脚手架 和 生成包!!
终极方案 就是重装系统, 肯定OK
启动项目
必须在项目的根目录下执行启动命令
根目录 就是 package.json
文件所在的目录
分两种方式:
-
成功安装了
ng
脚手架:ng v
有反应的
ng serve
; -
脚手架没有安装成功, 解压缩别人的项目包
npx ng serve
;
npx
: 是npm
的一个命令. 代表优先执行项目包中的命令 如果没有才执行全局的命令
详说启动命令
记得关闭防火墙!
angular的理念: 尽量让用户简单些 ----- 懒
记住: 只启动一个服务, 因为端口号不能复用!!! 关闭旧的 才能开启新的
命令行有以下这些:
基础版本: ng serve
;
简化版: ng s
;
自动开启 默认浏览器 版本: -o
代表自动弹出浏览器
ng s -o
;
插件
注意: vscode
插件不是越多越好; 太多插件会导致冲突!
运行的另一种方式
格式化工具
启动流程:
Angular与Vue相同, 是 SPA 项目; Single web Page Application 单页网页应用;
网站只有一个页面. 是通过路由来局部切换网页中的内容.
优点: 不用刷新整个页面 就可以切换内容. 服务器压力小, 用户体验佳!
TypeScript
是一门由微软公司 , 在 JS 基础上开发的语言: 具有所有JS的语法和特性, 然后新增了很多 JAVA 的特性… 比JS更强大.
.ts 文件
• 访问 http://localhost:4200/
– 域名: localhost
• 域名: 是指计算机 在网络中的名字. 其中 localhost 代表自己; 当做 我 字
– 端口号: 4200
• 端口号: 计算机上的每个程序的唯一标识; 类似于身份证
• 在浏览器中书写: localhost:4200
就是让浏览器访问当前计算机上 代号是4200 的程序
• 4200的程序就是: ng s
启动的那个服务器
• 服务器的默认配置:
– 类似于: 每个公司都有一个 前台人员. 负责接待来访客户
– 每个服务器都有一个 index.html
的文件, 负责接待来访
• index.html
中含有一个 自定义组件: <app-root></app-root>
• webpack
: 这款打包工具默认被集成到项目中. 会自动打包 main.ts
文件引入到 index.html
里
• 根组件: app.component.ts
angular文件的命令规范: 自注释 的命名方式
文件名.作用.类型
app.component.ts : 文件名app component代表是组件 ts代表是js文件
focus.pipe.ts : 文件名focus pipe代表是过滤器 {{xxx|过滤器} ts代表是js文件
hide.directive.ts: 文件名 hide directive 代表指令 ts 代表类型.
组件的ts文件: app.component.ts
组件的创建命令
angular
的作者把 懒 字发挥到极致…
发现: 组件的制作方式 是固定的: 制作文件夹 -> 包3个文件-> 注册
必须在项目根目录下执行:
ng generate component 组件名
;
缩写: ng g c 组件名
;
例如 ng g c myc04
;
用npx
方式的同学, 要写 npx ng g c myc04
;
值的绑定
同 小程序 和 vue: 把 JS 中的变量 绑定到 HTML 中显示, 都使用:
{{ 变量 }}
属性的绑定
新建myc05组件:
在项目的根目录下执行:
ng g c myc05
<p>myc05 works!</p>
<!--
vue中对应的知识点:
v-bind:属性名="值"
:属性名="值"
:title="title"
-->
<!--
angular使用: [属性名]="值"
-->
<div [title]="title">班级</div>
<!-- 也支持 {{}} -->
<div title="{{ title }}">班级</div>
<img [src]="img" alt="" />
<img src="{{ img }}" alt="" />
事件
创建组件: myc06
在项目的根目录下执行:
ng g c myc06
<p>myc06 works!</p>
<!--
vue中:
v-on:事件名="方法名"
@事件名='方法名'
例如: @click=""
-->
<!-- 要求方法必须用 () 结尾 -->
<!-- (事件名)="方法名()" -->
<button (click)="showName()">点我</button>
<!-- click="执行这里的代码.." -->
<button (click)="num = num + 1">{{ num }}</button>
双向数据绑定
form表单中的标签需要与用户进行交互: 可以通过UI修改数据
vue中: v-model
创建组件: myc07
ng g c myc07
<p>myc07 works!</p>
<!--
在vue中: v-model 实现双向绑定
-->
<!--
快捷提示: ng-model
[(ngModel)]="变量"
-->
<!--
默认不加载 Form 模块, 无法使用 双向绑定功能
必须手动加载: app.module.ts
-->
<input type="text" [(ngModel)]="name" />
<p>{{ name }}</p>
内容回顾
Angular是 三大框架之一: vue angular react
• vue: 开源
• angular: google
• react: Facebook
angular也是需要安装脚手架之后, 生成项目包使用; — 同vue
• 启动命令
ng s
:单纯启动
ng s -o :启动同时 在默认浏览器打开
• 默认地址: localhost:4200
• 组件的组成:
由3个文件组成; html css ts
ts文件负责 整合 html 和 css
使用前必须要注册全局: app.module.ts 中
快捷生成命令: ng g c 组件名 必须在根目录下执行
• 双标签的内容: {{}}
• 标签的属性: [属性名]="" 或 属性名="{{ 值 }}"
• 事件: (事件名)=“方法名()”
• 双向数据绑定: [(ngModel)]=“值”
– 注意: 必须在配置文件中加载 Forms模块, 否则不可用!!!
– 配置文件: app.module.ts, 加载新模块 必须重启服务!