第五章 angularjs简介.pptx

angularjs简介 基础 概念 AngularJS是由Google开发的一个客户端框架。它是由JavaScript编写的，采用的是jQuery库的一个简化版本：jQuery Lite AngularJS背后的理念是：提供一个框架，它可以使用MVC框架帮助开发者实现设计良好、结构良好的 Web页面和应用。 核心功能 1.数据绑定：模型和视图组件之间的自动同步 2.作用域:Scope(作用域)是应用在HTML(视图)和JavaScript(控制器)之间的纽带 3.控制器:将js函数绑定到特定的范围 4.服务:angularjs有多个内置服务 5.过滤器:uppercase/lowercase current number data 常见功能 AngularJS 把应用程序数据绑定到HTML元素。 AngularJS 可以克隆和重复HTML元素。 AngularJS 可以隐藏和显示HTML元素。 AngularJS 可以在HTML元素背后添加代码。 AngularJS 支持输入验证。 一些内置指令 ng-app 为html元素定义一个应用(未命名) ng-controller 为元素定义一个控制器 ng-repeat 循环 ng-click 绑定一个点击事件 ng-show 显示元素 ng-hide 隐藏元素 ng-disabled 禁用元素 模型视图 模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型，视图和控制器)，每个都有不同的职责。 AngularJS并没有传统意义上的实现MVC，而是更接近于MVVM(模型 - 视图 - 视图 - 模型)。 AngularJS团队将它作为模型视图 路由 页面中引入angular.js、angular-route.js 页面中声明模板页面的容器 div ng-view/div 创建多个模板页面——不是完整的页面，只包含几个div即可 声明路由字典——即每个模板页面对应的路由地址 模板页面间的切换方法——本质都是修改URL中的路由地址： (1)使用超链接进行切换a href=#/路由地址/a (2)使用JS进行切换$location.path(/路由地址); 优点 --数据绑定：AngularJS有一个非常清晰的方法，可以使用它强大的作用域机制将数据绑定到HTML元素 清晰：AngularJS强迫你编写清晰、有逻辑的代码。 可重用的代码 兼容性：AngularJS是基于JavaScript编写的，与 jQuery有着紧密的关系。AngularJS框架的结构中重用现有代码将变得更加容易。 Angularjs在开发中的优势 AngularJS HTML模板的声明式风格让HTML的意图变得更加直观，也使HTML便于维护。AngularJS的模型部分是基本的JavaScript对象，这使它易于操作、访问和实现。 AngularJS将使用声明的方式扩展HTML的功能，传递到视图时，可以轻松地对数据进行格式化。 与传统js相比AngularJS少了很多DOM操作。 AngularJS提供的内置服务，可以使用结构化和可重用的方式实现自己的应用。这将使代码变得更易于维护和测试。 mvc MVC中有三个组件：模型是数据源，视图是渲染的页面，控制器将处理模型和视图之间的交互。 主要目的：分离JavaScript代码中的责任，使代码变得清晰和易于理解。 AngularJS是最好的MVC框架之一，因为它使MVC 的实现变得非常容易 modular模块提供名称空间，通过这种方式，可以基于模块名称引用指令、作用域和其他组件。这使打包和重用应用的部件变得更加简单。 mvc （1）采用MVC模式 Model：模型，即业务数据，Angular中用变量来表示数据 View：视图，即数据的呈现，Angular中由“HTML+指令”来作视图 Controller：控制器，负责操作(增、删、改、查)数据，Angular中由function来担当 (2)双向数据绑定(3)依赖注入(4)模块化设计 模块 模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的容器。 控制器通常属于一个模块 你可以通过AngularJS的angular.module函数来创建模块 作用域$scope AngularJS中作用域是用于填充Web页面上展示的视图。该数据可以来自任何源，例如数据库、远程Web服务。 作用域只是普通JS对象，这意味着AngularJS 代码中，可以轻松地按需要对它们进行操作。另外，也可以通过嵌套作用域的方式组织数据 数据绑定 AngularJS最棒的功能之一就是内置的数据绑定。这是将模型的数据与Web页面中显示的内容链接在一起的过程。这个过程提供了一个清晰的接口，用于将模型数据链接