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.客户端访问测试
下载脚手架工具常见错误:
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)双向数据绑定