Angular框架

今天药忘吃喽~ 2022-11-07 05:48 172阅读 0赞

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)双向数据绑定