MVVM框架的组成:
数据绑定、指令系统、组件式编程、路由和导航、状态保持、第三方组件库
Angular框架
AngularJS v1.x官网:https://angularjs.org/
AngularJS v2.x~v8.x官网:https://angularjs.io
AngularJS 中文镜像网站:https://www.angular.cn/
是由Google 2009年开发的MVVM框架,最新版为8.2,可用于开发web、移动、桌面应用的中大型框架
Vue.js开发方式:1.script引入vue.js 2.脚手架方式
AngularJS v1.x 开发方式:1.script引入vue.js 2.脚手架方式
AngularJS v2.x开发方式:1.脚手架方式
小知识:
使用第三方NPM下载仓库
查看当前NPM默认的下载仓库地址:
npm config get registry
修改NPM默认的下载仓库地址为国内镜像网站
npm config set registry 新仓库地址
例如:可以使用淘宝提供的NPM镜像:
npm config set registry https://registry.npm.taobao.org
搭建Angular开发环境
前提:NG需要Node.jsV10.x以上
1.下载并安装脚手架工具
npm install -g @angular/cli
此步骤会下载全局工具ng.cmd
2.运行脚手架工具创建空白项目
ng new myngapp01
3.进入空白项目并运行开发服务器
cd myngapp01
npm start
4.客户端访问测试
http://127.0.0.1:4200
下载脚手架工具常见错误:
1.ENOENT:no such file or directory,access to C:/user/...Roaming/npm
解决方案:使用管理员账户重新登录
2.npm ERR:Cannot read property resolve of undefined
解决方案:稍后重试,或者更改仓库地址
3.-4048 EPERM:operation not permitted unlink
解决方案:使用管理员账户重新登录
4.git命令没有找到
解决方案:在电脑安装Git软件,并配置用户名和邮箱
英语单词:
Model:模型,即数据,MVVM中第一个M
Module:模块,1.Node.js 2.ES6 3.NG中
Modal:模态对话框
Angular.js项目启动过程分析:
(1)angular.json:NG项目的配置
index.js:./src/index.html <app-root></app-root>
main: ./src/main.ts
(2)main.js >bootstrapModule(AppModule)
(3)app.module.ts >bootstrap:[AppComponent]
(4)app.component.ts > selector:'app-root'
>templateUrl:'app.component.html'
(5)app.component.html >HTML片段....
2.Angular核心概念之一:模块
Module:不同于Node.js或ES6中的模块,NG中的模块就是一个抽象的容器,用于对组件进行分组。
整个应用初始时有且只有一个主组件:AppModule
3.Angular核心概念之二:组件
组件:是一段可以反复使用的页面片段,如页头、轮播、手风琴....
组件(Component)=模板(Template)+脚本(Script)+样式(Style)
提示:NG中,任何一个组件都必须声明在一个模块中!
自定义组件步骤:
1.创建组件 class
@Component({
selector:'myc01',
template:'<h2></h2>'
})
export class MyC01Component{ }
2.在某个模块中注册组件class
//app.module.ts
declaration:[AppComponent,MyC01Component]
3.使用已经注册过的组件
//app.component.html
<myc01></myc01>
Angular提供的创建组件的简化工具:
ng generate component 组件名
npx ng generate component 组件名
上述命令可以简化为:
ng g comonent 组件名
npx ng g component 组件名 命令行辅助工具(ng)
Node.js官方安装的工具:
npm:第三方模块的维护工具
npx:第三方可执行文件的执行工具,Node Package Executor npx 可用于执行当前项目中 node_modules/.bin 目录下的可执行文件
4.Angular核心概念之三:数据绑定
(1)HTML绑定:{{NG表达式}}
测试:NG表达式中可以执行哪些代码?
算术运算? ----可以
比较运算? ----可以
逻辑运算?----可以
三目运算符 ----可以
调用函数? ----不可以,NG表达式中禁止出现new关键字
JSON序列化? ----不可以,NG表达式中JSON是undefined
(2)属性绑定: Vue.js: v-bind或简写为:
形式1:直接在属性上用{{}} <p title="{{msg}}"></p>
形式2:使用[]做属性绑定 <p [title]="msg"></p>
(3)指令绑定
(4)事件绑定:
Vue.js: v-on或简写为@
(5)双向数据绑定