Angular DAY01

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 文件所在的目录

分两种方式:

1. 成功安装了ng脚手架: ng v 有反应的
   ng serve ;

2. 脚手架没有安装成功, 解压缩别人的项目包
   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, 加载新模块 必须重启服务!