HETF-HAP20 快速入门手册-精品文档资料整理.docx

《HETF-HAP20 快速入门手册-精品文档资料整理.docx》由会员分享，可在线阅读，更多相关《HETF-HAP20 快速入门手册-精品文档资料整理.docx（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、,Hap2.0入门手册Author:WenhaoCreation Date:2016-08-04Last Updated:2016-08-29Document Ref:Hap2.0快速入门Version:1.0Note: Title, Subject, Last Updated Date, Reference Number, andVersion are marked by a Word Bookmark so that they can be easily reproduced in the header and footer of documents. When you change an

2、y of these values, be careful not to accidentally delete the bookmark. You can make bookmarks visible by selecting Tools-OptionsView and checking the Bookmarks option in the Show region.1. To add additional approval lines, press Tab from the last cell in the table above.Note: You can delete any elem

3、ents of this cover page that you do not need for your document. For example, Copy Number is only required if this is a controlled document and you need to track each copy that you distribute.文档控制更改记录31日期作者版本更改参考内容目录文档控制21.AngularJS快速入门41.1.AngularJS简介41.2.AngularJS特点42.AngularJS指令52.1.指令：ng-app52.2.

4、指令：ng-init52.3.AngularJS表达式62.4.指令：ng-model62.5.指令：ng-bind62.6.指令：ng-click73.模型和控制器83.1.MVVM简介83.2.控制器84.常用指令114.1.ng-hide指令114.2.ng-repeat指令114.3.过滤器125.jqLite135.1.jqLite简介135.2.选择符问题135.3.jQuery库的兼容性135.4.扩展方法135.5.扩展的事件136.Hap2.0开发步骤146.1.数据库146.2.后端146.3.前端176.4.资源的访问权限256.5.运行截图257.Hap2.0开发拓展2

5、77.1.服务器277.2.客户端287.3.界面展示301.未结与已结问31未结问题31已结问题311. AngularJS快速入门官网地址:https:/angularjs.org/1.1. AngularJS简介 AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。AngularJS引入了三个主要的概念，期望让前端开发更系统化一些：声明式界面开发、双向数据绑定、使用依赖注入解耦。1.2. AngularJS特点（1）双向数据

6、绑定 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。（2）模板 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。 （3）MVVM 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。 （4）依赖注入 AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。 （5）指令 可以用来创建自定义的标签，也可以用来装

7、饰元素或者操作DOM属性。2. AngularJS指令 AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得 HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM 编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM 指定行为，或者改变它。 AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之 为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定 controller及$scope对象、操作DOM，等等。 AngularJS指令指示的是“当关联的HT

8、ML结构进入编译阶段时应该执行的操作”， 它本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以写在元素的名称 里，属性里，css类名里，注释里。 当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样 被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析 HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性 函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。 Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、 ng-init、ng-model、ng-b

9、ind、ng-repeat等等。2.1. 指令：ng-appng-app指令来标明一个AngularJS应用程序，并通过AngularJS完成自动初始化应用和标记应用根作用域，同时载入和指令内容相关的模块，并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。 如上引用，一个AngularJS应用程序初始化就完成了并标记了作用域，也就是div元素就是AngularJS应用程序的所有者，在它里面的指令也就会被Angular编译器所编译、解析了。2.2. 指令：ng-initng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器

10、或模块来代替它，后面我们会介绍有关控制器和模块的知识。如下所示，我们为应用程序变量name赋定初始值。我们不仅可以赋值字符串，也可以赋值为数字、数组、对象，而且可以为多个变量赋初始值，如下所示：/或者2.3. AngularJS表达式AngularJS框架的核心功能之一 数据绑定，由两个花括号组成，可以把数据绑定到HTML，类似Javascript代码片段，可以包含文字、运算符和变量，通常在绑定数据中用到，表达式可以绑定数字、字符串、对象、数组，写在双大括号内： expression 。如前面的示例，我们就可以使用表达式这样调用初始化的变量值，如下。 当然我们也可以使用表达式输出数字、数组等等

11、，如下所示：2.1. 输出数字，如下示例：总价： quantity * price 2.2. 输出对象，如下示例：名字为： names0 2.4. 指令：ng-model在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。如下示例，使用ng-model指令对数据进行绑定。名字为： names0 ng-model把相关处理事件绑定到指定标签上，这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。2.5. 指令：ng-bind指令ng-bind和AngularJS表达式有异曲同工之妙，

12、但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。如下使用ng-bind指令绑定把应用程序数据。请输入一个名字：Hello PS：使用花括号语法时，因为浏览器需要首先加载页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容，所以对于首个页面中的数据绑定操作，建议采用ng-bind，以避免其未被渲染的模板被用户看到。2.6. 指令：ng-clickAngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：隐藏/显示请输入一个

13、名字：Hello PS：ng-hide=true，设置HTML元素不可见。ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上，当浏览器在该DOM元素上鼠标触发点击事件时，Angular就会调用相应的方法。3. 模型和控制器3.1. MVVM简介1.什么是MVVM?针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不同的人可能意味不同的东西 ,AngularJS并不执行传统意义上的MVC，更接近于MVVM。MVVM模式是Model-View-ViewMode模式的简称。由视图(View)

14、、视图模型(ViewModel)、模型(Model)三部分组成，通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。Model将和ViewModel互动(通过$scope对象)，将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的 代码。View可以通过$routeProvider对象来支配，所以你可以深度的链接和组织你的View和Controller，将他们变成导航 URL。AngualrJS同时提供了无状态的Controller，可以用来初始化和控制$scope对象。Model与MVC模式一样，Model用于封装与应用程序的业务逻辑相关的数据以及对

15、数据的处理方法。它具有对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和ViewModel，也就是说，模型不关心会被如何显示或是如何被操作，模型也不能包含任何用户使用的与界面相关的逻辑。ViewModel是一个用来提供特别数据和方法从而维护指定view的对象,。ViewModel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。Controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。View是AngularJ

16、S解析后渲染和绑定后生成的HTML。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。2.使用MVVM模式有几大好处1)低耦合：View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。2)可重用性：可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。3)独立开发：开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。4)可测试性

17、：可以针对ViewModel来对界面(View)进行测试。3.2. 控制器AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用

18、域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。1.控制器属性现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：请输入一个名字：Hello function MyController($scope) $scope.person = name: World;如上所述，我们通过ng-controller指令创建了一个JavaScript对象 MyController并带有name属性，那参数$scope是什么呢，代表什么意思呢。现在我们就来解答MyController对象参数 $scope。$scope就是把

19、一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢，就是作为$scope的数据属性关联到DOM上的，并且能在需要调试的时候被获取到。要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。所有$scope都遵循原型继承，这意味着它们都能访问父$scope们,对任何属性和方法，如果AngularJS在当前$scope上找不到，就会到父$scope上去找，如果在父$scope上也没找到

20、，就会继续向上回溯，一直到$rootScope上，这个$rootScope是最顶级的$scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。2.控制器方法控制器不仅声明属性也可以声明方法，如下所示：Your name:打招呼greetingfunction MyController($scope) $scope.username = World;$scope.sayHello = function() $scope.greeting= Hello

21、 + $scope.username + !;参考以上代码，赶快动手试试控制器的使用方法吧！当然如果是开发条件的需要，我们也可以将控制器写在外部文件中，那如上示例该怎么做呢，很简单，如下简单引用即可：4. 常用指令4.1. ng-hide指令ng-hide指令，用于控制部分HTML元素可见(ng-hide=false)和不可见状态(ng-hide=true)，如下：我变显示了。隐藏了。ng-show指令和ng-hide用法相同但行为相反，这里就不做详细介绍了。扩展内容：当我们面对一些长列表数据,可能会通过默认隐藏点击显示的形式来展现数据内容，当内容中也会伴随很多数据绑定，这个在页面渲染的时候非

22、常影响性能。举一个列子,比如说通常angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将其中100的model通过ng-show设置为不显示,你会发现还是很卡。然后你试着将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用,这是为什么呢，原因就在于ng-show指令虽然隐藏了但还是会执行其中的所有绑定，而ng-if就不同了，它只会在等于true的时候也就是显示的时候才去执行其中的绑定，这样一来性能就有很大的提高，所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧！4.2

23、. ng-repeat指令ng-repeat指令，遍历一个数据集合中的每个数据元素，并且加载HTML模版把数据渲染出来，当我们要向HTML容器节点中添加更多类似DOM元素的时候，使用ng-repeat是再好不过了。使用方法，如下示例： Name：+ x.name + ，Age：+ x.age ng-repeat指令对于集合中(数组中)的每一项都会渲染一次HTML元素。4.3. 过滤器1.使用AngularJS过滤器可以实现对字符串的大小写转换、货币格式的转换、数组的过滤等等。用法：管道字符(|)+过滤器名。过滤器currency，可以将数字转换成货币格式。过滤器uppercase、lowerc

24、ase对字符串转换大、小写，如下所示：请输入: 结果为： name | uppercase2.filter过滤器可以过滤数组并从中选择出一个子集出来，用法是“filter:模型名称”，示例如下：输入过滤: 姓名，年龄 x.name + , + x.age 看到输出结果了吧，filter过滤器是不是很强大而且用法超简单就实现了对数据的简单过滤，如果不使用它，那我们想要实现这个数据过滤效果是不是要相当麻烦(可以自己试试如何实现)，而现在只需那么简单，足以彰显AngularJS是多么的给力呀！5. jqLite5.1. jqLite简介 jqLite以angular.element接口提供出来，兼容

25、jQuery API的一个子集。 在AngularJS的所有API中的element对象，都不是纯粹的DOM对象，而是经过jqLite 封装过的。5.2. 选择符问题var tpl = document.querySelector(#clock);angular.element(tpl).text(.);5.3. jQuery库的兼容性 如果某种原因你不愿意使用jqLite，也可以在AngularJS之前引入jQuery库。 AngularJS自动地将jqLite升级成jQuery，angular.element等同于 $ 。 这样又可以使用熟悉的选择符了。5.4. 扩展方法jqLite包括一

26、些额外的方法以适应AngularJS框架：controller(name) - 获得元素对应的控制器对象injector() - 获得元素对应的注入器对象scope() - 获得元素对应的作用域对象isolateScope() - 获得元素对应的隔离作用域对象，如果有的话。inheritedData() - 和data()一样，但如果当前元素没有指定的数据，会向上级 节点继续找。5.5. 扩展的事件 jqLite还提供一个$destroy事件，当DOM对象被从DOM树删除时，AngularJS将触发这个事件，以便指令进行一些善后清理工作。_的代码已经悄悄地将jQuery库改成了AngularJ

27、S，注意一下其中angular.element 的使用。6. Hap2.0开发步骤 开发环境搭建，新建项目，开发规范详情请参见“hap_developer_guide”。在此，我通过一个自己做的CRUD小例子,初步介绍hap2.0框架。6.1. 数据库我数据库选用的是mysql，测试数据如下：CREATE TABLE book ( id int(11) NOT NULL AUTO_INCREMENT, book_name varchar(255) DEFAULT NULL, book_type varchar(255) DEFAULT NULL, created_at datetime DEF

28、AULT NULL, updated_by bigint(20) DEFAULT NULL, created_by bigint(20) DEFAULT NULL, version bigint(20) DEFAULT NULL, updated_at datetime DEFAULT NULL, PRIMARY KEY (id) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;insert into book(id,book_name,book_type,created_at,updated_by,created_by,version,

29、updated_at) values (1,作文1,语文1,NULL,1,NULL,1,2016-08-13 17:12:56),(2,数列,数学,NULL,NULL,NULL,0,NULL),(3,疯狂英语,英语,NULL,NULL,NULL,0,NULL),(4,1,1,2016-08-13 17:27:20,1,1,0,2016-08-13 17:27:20);6.2. 后端我选用的是eclipse软件开发。1. BookMapper.xml BookMapper.xml文件代码如下：2. BookMapper.java3. BookMapper.java文件代码如下：package h

30、test.core.mapper;import hap.core.mapper.AutoMapper;import htest.core.dto.Book;public interface BookMapper extends AutoMapper 3.BookServiceImpl.java BookServiceImpl.java文件代码如下：package htest.core.service.impl;import hap.core.service.impl.BaseServiceImpl;import htest.core.dto.Book;import htest.core.ser

31、vice.BookService;public class BookServiceImpl extends BaseServiceImpl implements BookService 4.BookService.java BookService.java文件代码如下：package htest.core.service;import hap.core.service.BaseService;import htest.core.dto.Book;public interface BookService extends BaseService 5.Book.java Book.java文件代码如

32、下：package htest.core.dto;import java.io.Serializable;import hap.core.dto.BaseAuditDto;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;import javax.persistence.SequenceGenerator;import javax.persistence.Table;EntityTa

33、ble(name = book)SequenceGenerator(name = book_seq)public class Book extends BaseAuditDto implements SerializableIdColumnGeneratedValueprivate Long id;Columnprivate String bookName;Columnprivate String bookType;public Long getId() return id;public void setId(Long id) this.id = id;public String getBoo

34、kName() return bookName;public void setBookName(String bookName) this.bookName = bookName;public String getBookType() return bookType;public void setBookType(String bookType) this.bookType = bookType; 6.BookCoontroller.java BookCoontroller.java文件代码如下：package htest.core.controller;import hap.core.con

35、troller.BaseController;import htest.core.dto.Book;import org.springframework.stereotype.Controller;Controllerpublic class BookController extends BaseController 7.ModuleService.xml 配置service的实现类。 ModuleService.xml文件中加入如下代码： 8.routes.conf 配置前后端数据交互对应路由。 routes.conf文件中加入如下代码：GET /api/book/index bookController.indexPOST /api/book bookController.createDELETE /api/book/id bookController.deleteGET /api/book/id bookController.editGET /api/book/show/code bookController.showPUT /ap