Angular框架

简介: Angular框架

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


目录
相关文章
|
3月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
4月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
186 4
|
5月前
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
326 6
|
5月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
67 0
|
5月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
75 0
|
5月前
|
开发者 缓存 数据库
【性能奇迹】Wicket应用的极速重生:揭秘那些让开发者心跳加速的调优秘技!
【8月更文挑战第31天】在软件开发中,性能优化是确保应用快速响应和高效运行的关键。本书《性能调优:Apache Wicket应用的速度提升秘籍》详细介绍了如何优化Apache Wicket应用,包括代码优化、资源管理、数据库查询优化、缓存策略及服务器配置等方面。通过减少不必要的组件渲染、优化SQL查询、使用缓存和调整服务器设置等方法,本书帮助开发者显著提升Wicket应用的性能,确保其在高并发和数据密集型场景下的稳定性和响应速度。
52 0
|
5月前
|
JavaScript 前端开发 开发者
深入解析Angular装饰器:揭秘框架核心机制与应用——从基础用法到内部原理的全面教程
【8月更文挑战第31天】本文深入解析了Angular框架中的装饰器特性,包括其基本概念、使用方法及内部机制。装饰器作为TypeScript的关键特性,在Angular中用于定义组件、服务等。通过具体示例介绍了`@Component`和`@Injectable`装饰器的应用,展示了如何利用装饰器优化代码结构与依赖注入,帮助开发者构建高效、可维护的应用。
45 0
|
5月前
|
缓存 前端开发 JavaScript
Angular邂逅PWA:一场关于如何利用现代Web技术栈中的明星框架与渐进式理念,共同编织出具备原生应用般丝滑体验、离线访问及桌面集成能力的未来Web应用的探索之旅
【8月更文挑战第31天】本文详细介绍如何利用Angular将传统Web应用升级为渐进式Web应用(PWA),克服后者在网络依赖、设备集成及通知功能上的局限。通过具体命令行操作与代码示例,指导读者从新建Angular项目到配置`manifest.json`和服务工作进程,最终实现离线访问、主屏添加及推送通知等功能,显著提升用户体验。适合各水平开发者学习实践。
49 0
|
5月前
|
设计模式 JavaScript 前端开发
现代JavaScript框架比较:React、Vue和Angular
在现代Web开发中,JavaScript框架已成为开发高效、动态用户界面的关键工具。本文将深入比较三大主流框架:React、Vue和Angular。通过探讨它们的核心特性、优缺点和适用场景,帮助开发者根据项目需求选择最合适的框架。重点分析包括性能、学习曲线、社区支持和生态系统等方面,以便开发者能够做出明智的决策,优化开发流程并提升应用性能。
|
7月前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
70 2