整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ngularjs簡單介紹和特點(diǎn)
首先angular是一個(gè)mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去組織代碼, 會(huì)將一個(gè)html頁面分成若干個(gè)模塊, 每個(gè)模塊都有自己的scope, service, directive, 各個(gè)模塊之間也可以進(jìn)行通信, 但是整體結(jié)構(gòu)上是比較清晰的, 就是說其代碼組織是模塊化的, angular的view可能僅僅是一個(gè)框架, , 對(duì)view的dom操作或者時(shí)間監(jiān)聽都是在directive中實(shí)現(xiàn)的, 而且一般情況下很少直接去寫dom操作代碼, 只要你監(jiān)聽model, model發(fā)生變化后view也會(huì)發(fā)生變化, 就是雙向綁定機(jī)制, angularjs適用于單頁面開發(fā)
在angularJS中，一個(gè)模板就是一個(gè)HTML文件。但是HTML的內(nèi)容擴(kuò)展了，包含了很多幫助你映射model到view的內(nèi)容。
HTML模板將會(huì)被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會(huì)遍歷DOM模板來生成一些指導(dǎo)，即，directive（指令）。所有的指令都負(fù)責(zé)針對(duì)view來設(shè)置數(shù)據(jù)綁定。
auguarJS并不把模板當(dāng)做String來操作。輸入angularJS的是DOM而非string。數(shù)據(jù)綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區(qū)別于其它的框架的最大原因。使用DOM允許你擴(kuò)展指令詞匯并且可以創(chuàng)建你自己的指令，甚至開發(fā)可重用的組件。angular占用的內(nèi)存較小, 可以兼容主流的瀏覽器, 他擁有內(nèi)置的依賴注入的子系統(tǒng), 可以幫助開發(fā)人員更容易開發(fā), 理解和測試和應(yīng)用, DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個(gè)東西，DI負(fù)責(zé)找創(chuàng)建并且提供給我們。那么AngularJS可以做到。指令可以用來創(chuàng)建自定義的標(biāo)簽。它們可以用來裝飾元素或者操作DOM屬性。
**vuejs簡單介紹特點(diǎn) **
官網(wǎng): http://cn.vuejs.org/
vue是一個(gè)漸進(jìn)式的框架, 是一個(gè)輕量級(jí)的框架, 也不算是一個(gè)框架, 他核心只關(guān)注圖層, 是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面,易于上手, 還便于于第三方庫或與既有項(xiàng)目整合,也能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)
1. vue的核心
是一個(gè)允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn)dom
先創(chuàng)建一個(gè)后綴名為.html的文件
代碼如下:
html: <div id="app"></div>
js里面的
var app=new Vue({
el: '#app',
data: {
msg: 'Hello Vue!'
}
})
在瀏覽器窗口上出現(xiàn)的內(nèi)容: Hello Vue
數(shù)據(jù)和ＤＯＭ已經(jīng)綁定在一起, 驗(yàn)證是否是響應(yīng)式的, 修改控制臺(tái)里面app.msg, 你就會(huì)看到上面渲染是列子也更新了
出來文本插值, 還可以用綁定DOM 元素屬性
<div id="app-2"> <span v-bind:title="message"> 查看此處動(dòng)態(tài)綁定提示信息！ </span> </div>
js代碼:
var app2=new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date()
}
})
2. vue指令
指令帶有前綴v-, 以表示他們是Vue提供的特殊屬性, 他們會(huì)在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為
v-bind: v-bind : str="msg" 將這個(gè)元素的節(jié)點(diǎn)的str屬性和vue實(shí)例對(duì)象的msg屬性保持一致
v-if=布爾值 條件渲染指令, 根據(jù)其后表達(dá)式的布爾值進(jìn)行判斷是否渲染該元素, v-if只會(huì)渲染他身后表達(dá)式為true的元素
v-show=布爾值 和v-if類似,只是會(huì)渲染他身后表達(dá)式為false的元素, 而且會(huì)給這樣的元素添加css的代碼, style="display:none"
v-else 必須v-if/v-show指令后, 不然就不會(huì)起作用, 如果v-if/v-show的指令表達(dá)式為true, 則else就不顯示, 如果v-if/v-show指令的表達(dá)式為false, 則else元素會(huì)顯示在頁面上
v-for 類似于js的遍歷, 用法為 v-for="(item,index) in imgs" :key="index", items是數(shù)組, item為數(shù)組中的數(shù)組元素, index是索引號(hào), key是為了更高效的查找到指定元素
v-on 用于監(jiān)聽指定元素的DOM事件 v-on:click="greet"
3. vue的雙向數(shù)據(jù)綁定
vueJS是使用ES5提供的Object.defineProperty()方法, 監(jiān)控對(duì)數(shù)據(jù)的操作, 從而可以自動(dòng)觸發(fā)數(shù)據(jù), 并且, 由于是在不同的數(shù)據(jù)上觸發(fā)同步, 可以精確的將變更發(fā)送給綁定的視圖, 而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測
vue和angular中, 都是通過在html中添加指令的方式, 將視圖元素與數(shù)據(jù)的綁定關(guān)系進(jìn)行聲明
<from id="app"> <input type="test" v-model="name"> </from>
以上的html代碼表示該input元素與name數(shù)據(jù)進(jìn)行綁定, 在js代碼總可以這樣進(jìn)行初始化
var vm=new Vue({
el: "#app",
data:{
name: "請輸入你的名字"
}
})
代碼執(zhí)行正確后, 頁面上input元素對(duì)應(yīng)的位置會(huì)顯示上面的代碼給出的初始值 "請輸入你的名字", 由于雙向綁定數(shù)據(jù)已經(jīng)建立, 因此, 在vm.name="小米", 則input也會(huì)更新為小明, 在頁面input上輸入小明, 則vm.name獲取的值為小明
4. vue的插件化
插件通常會(huì)為vue添加全局功能, 插件的范圍沒有限制
添加全局的方法或者屬性 vue-element 這個(gè)我并不是很懂
添加全局資源 指令/過濾器/ 過渡
添加vue實(shí)例的辦法, 將他們添加到vue-prototype上實(shí)現(xiàn)
引入一個(gè)庫, 來提供自己的api, 同時(shí)提供上面的一個(gè)或者多個(gè)功能, 如 vue-router
import vueRouter from ''vue-router'; //使用webpack的單文件組件打包的方式 會(huì)調(diào)用vue.component來注冊全局組件或者vue.components注冊局部組件如果是后者，每個(gè)單文件組件中都不需要引入 vue,
因?yàn)閱挝募M件經(jīng) webpack 打包后，生成的模塊只是一個(gè)組件選項(xiàng)對(duì)象，被其他組件或 Vue 實(shí)例注冊時(shí)使用語法糖，只需要 字面量對(duì)象的 組件選項(xiàng)對(duì)象就可以了。
使用插件:
vue.use(vueRouter); /通過全局方法Vue.use()使用插件, 會(huì)阻止注冊相同插件多次, 只會(huì)注冊一次該插件
angular和jquery的區(qū)別
angular中是盡量避免操作DOM, angular是基于數(shù)據(jù)驅(qū)動(dòng), 適合做數(shù)據(jù)操作比較繁瑣的項(xiàng)目,angular適用于單頁面開發(fā),是一個(gè)比較完善的mvvm框架, 包含模板和雙向數(shù)據(jù)綁定, 路由, 模塊化, 服務(wù), 過濾器, 依賴注入等所有功能,但是angular驗(yàn)證功能比較薄弱, 需要寫很多模板標(biāo)簽, 而且ngview只能有一個(gè), 不能嵌套多個(gè)視圖,angular的兼容性比較好, jquery是基于操作DOM, 適用于操作DOM比較多的項(xiàng)目, jquery是一個(gè)庫, 比較大,兼容大部分瀏覽器, 有豐富的插件, 可拓展性強(qiáng), jquery不能向后兼容, 使用插件時(shí),可能會(huì)有沖突,
angular和vue的差別
一angular是mvvm框架, 而vue是一個(gè)漸進(jìn)式的框架, 相當(dāng)于view層, 都有雙向數(shù)據(jù)綁定, 但是angular中的雙向數(shù)據(jù)綁定是基于臟檢查機(jī)制, vue的雙向數(shù)據(jù)綁定是基于ES5的getter和setter來實(shí)現(xiàn), 而angular是有自己實(shí)現(xiàn)一套模板編譯規(guī)則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學(xué)習(xí)成本低, vue需要一個(gè)el對(duì)象進(jìn)行實(shí)例化, 而angular是整個(gè)html頁面下的,單頁面應(yīng)用, 而vue可以有過個(gè)vue實(shí)例
以下是總結(jié)出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學(xué)習(xí)資料。
天這篇文章將會(huì)向你介紹如何使用Java EE 7和Angular JS來構(gòu)建一個(gè)非常簡單的應(yīng)用。在此之前，先給大家講一個(gè)故事。
我必須承認(rèn)，我從來都不是一個(gè)Javascript的超級(jí)粉絲，但我始終記得我第一使用它的情景。我不太記得確切的年份，不過大概是90年代的中期。我的一個(gè)頁面里有3個(gè)frame（是的，frame！記得這個(gè)東西嗎？那個(gè)時(shí)候非常流行的），而我想做的是在點(diǎn)擊了第3個(gè)frame上的一個(gè)鏈接時(shí)，能夠重新加載前兩個(gè)frame。那個(gè)時(shí)候，Javascript是用來在頁面上做一些花哨的東西的。不是所有的瀏覽器都支持，有些瀏覽器甚至需要你手動(dòng)打開。時(shí)至今日，這個(gè)情景已經(jīng)有了顯著變化，Javascript成為一門全棧的開發(fā)語言。你甚至可以僅僅用Javascript就能開發(fā)出一個(gè)完整的應(yīng)用。但對(duì)于我來說，有時(shí)我還是會(huì)回想到90年代的情形，很難給予Javascript足夠的信任，所以這是我為了更好的了解Javascript所做出的嘗試。
好吧，我喜歡Java，并且新的Java EE版本非常好用，配合Wildfly或Glassfish使得它簡潔而且運(yùn)行快速。Java EE7的規(guī)范可以滿足你所有需求，是Java編程中的標(biāo)準(zhǔn)。
這里我大概是追隨了Angular JS的熱潮。因?yàn)槲以贘avascript方面沒有太多的經(jīng)驗(yàn)，不太了解各類的JS庫，所以這里只是采納了一些朋友的建議。而且我也注意到了在最近一次Devoxx大會(huì)上對(duì)于Angular得到了廣泛的接納，關(guān)于Angular的演講的每一個(gè)房間都爆滿。所以我想用它嘗試一下，也給我自己一個(gè)認(rèn)識(shí)的機(jī)會(huì)。
這個(gè)應(yīng)用是一個(gè)簡單的包含分頁的列表，以及一個(gè)REST服務(wù)用于提供列表中的數(shù)據(jù)。每當(dāng)我開始一個(gè)新的企業(yè)級(jí)應(yīng)用的時(shí)候，這通常是我們開始編碼時(shí)所做的第一件事：創(chuàng)建一張表，存入一些數(shù)據(jù)，然后列出一些隨機(jī)數(shù)據(jù)，所以我認(rèn)為這個(gè)應(yīng)用是非常合適的。
從后端開始，讓我們定義一個(gè)簡單的Entity類（為了簡潔省略了部分代碼）：
Persion.java
@Entity
public class Person {
@Id
private Long id;
private String name;
private String description;
}
如果你不是很熟悉Java EE的JPA規(guī)范，這里就稍作解釋。這段代碼使用了@Entity注解，從而使一個(gè)對(duì)象類連接到數(shù)據(jù)庫中同名的表，并產(chǎn)生映射關(guān)系，注解@Id用于定義表中的主鍵。
接下來是persistence.xml文件：
persistence.xml
<?xml version="1.0" encoding="UTF-8"?>
<persistence version="2.1"
xmlns="http://xmlns.jcp.org/xml/ns/persistence"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd">
<persistence-unit name="myPU" transaction-type="JTA">
<properties>
<property name="javax.persistence.schema-generation.database.action" value="drop-and-create"/>
<property name="javax.persistence.schema-generation.create-source" value="script"/>
<property name="javax.persistence.schema-generation.drop-source" value="script"/>
<property name="javax.persistence.schema-generation.create-script-source" value="sql/create.sql"/>
<property name="javax.persistence.schema-generation.drop-script-source" value="sql/drop.sql"/>
<property name="javax.persistence.sql-load-script-source" value="sql/load.sql"/>
</properties>
</persistence-unit>
</persistence>
這里有我最喜歡的Java EE 7中的兩個(gè)特性：現(xiàn)在，你可以使用javax.persistence.schema-generation.*屬性來標(biāo)準(zhǔn)化的調(diào)用sql。并且，如果你不提供一個(gè)數(shù)據(jù)源的話，它就會(huì)綁定到一個(gè)默認(rèn)的數(shù)據(jù)源。所以在這個(gè)例子中，它將會(huì)使用內(nèi)部的Wildfly H2的數(shù)據(jù)源。
最后，為了提供列表數(shù)據(jù)，我們需要查詢數(shù)據(jù)庫并以REST服務(wù)的形式暴露出來：
PersonResource.java
@Stateless
@ApplicationPath("/resources")
@Path("persons")
public class PersonResource extends Application {
@PersistenceContext
private EntityManager entityManager;
private Integer countPersons() {
Query query=entityManager.createQuery("SELECT COUNT(p.id) FROM Person p");
return ((Long) query.getSingleResult()).intValue();
}
@SuppressWarnings("unchecked")
private List<Person> findPersons(int startPosition, int maxResults, String sortFields, String sortDirections) {
Query query=entityManager.createQuery("SELECT p FROM Person p ORDER BY " + sortFields + " " + sortDirections);
query.setFirstResult(startPosition);
query.setMaxResults(maxResults);
return query.getResultList();
}
public PaginatedListWrapper<Person> findPersons(PaginatedListWrapper<Person> wrapper) {
wrapper.setTotalResults(countPersons());
int start=(wrapper.getCurrentPage() - 1) * wrapper.getPageSize();
wrapper.setList(findPersons(start,
wrapper.getPageSize(),
wrapper.getSortFields(),
wrapper.getSortDirections()));
return wrapper;
}
@GET
@Produces(MediaType.APPLICATION_JSON)
public PaginatedListWrapper<Person> listPersons(@DefaultValue("1")
@QueryParam("page")
Integer page,
@DefaultValue("id")
@QueryParam("sortFields")
String sortFields,
@DefaultValue("asc")
@QueryParam("sortDirections")
String sortDirections) {
PaginatedListWrapper<Person> paginatedListWrapper=new PaginatedListWrapper<>();
paginatedListWrapper.setCurrentPage(page);
paginatedListWrapper.setSortFields(sortFields);
paginatedListWrapper.setSortDirections(sortDirections);
paginatedListWrapper.setPageSize(5);
return findPersons(paginatedListWrapper);
}
}
這里的代碼非常像普通的Java POJP，但是使用了Java EE的注解來增強(qiáng)行為。@ApplicationPath("/resources")和@Path("persons")會(huì)通過yourdomain/resources/personsurl來暴露REST服務(wù)，@GET標(biāo)志了這個(gè)邏輯通過http的GET方法調(diào)用，@Produces(MediaType.APPLICATION_JSON)把REST響應(yīng)格式化為JSON格式。僅僅用少量注解就能完成這些操作是很酷的。
為了更容易的獲得分頁列表所需的數(shù)據(jù)，我還創(chuàng)建了下面這個(gè)包裝類：
PaginatedListWrapper.java
public class PaginatedListWrapper<T> {
private Integer currentPage;
private Integer pageSize;
private Integer totalResults;
private String sortFields;
private String sortDirections;
private List<T> list;
}
現(xiàn)在，后端的事情我們已經(jīng)完成了。
我們使用Angular JS來展示數(shù)據(jù)。Angular遵循了MVC模式，通過添加一些自定義的標(biāo)簽屬性來綁定數(shù)據(jù)和Javascript中出現(xiàn)的變量，從而擴(kuò)展了傳統(tǒng)的HTML。那么， 讓我們來看看我們的html頁面：
index.html
<!DOCTYPE html>
<!-- Declares the root element that allows behaviour to be modified through Angular custom HTML tags. -->
<html ng-app="persons">
<head>
<title></title>
<script src="lib/angular.min.js"></script>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/ui-bootstrap-0.10.0.min.js"></script>
<script src="lib/ng-grid.min.js"></script>
<script src="script/person.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="lib/ng-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="grid">
<!-- Specify a JavaScript controller script that binds Javascript variables to the HTML.-->
<div ng-controller="personsList">
<!-- Binds the grid component to be displayed. -->
<div class="gridStyle" ng-grid="gridOptions"></div>
<!-- Bind the pagination component to be displayed. -->
<pagination direction-links="true" boundary-links="true"
total-items="persons.totalResults" page="persons.currentPage" items-per-page="persons.pageSize"
on-select-page="refreshGrid(page)">
</pagination>
</div>
</div>
</body>
</html>
除了Javascript和CSS聲明之外，這里只有很少的代碼。讓人印象深刻的是，Angular還擁有非常廣泛的即插即用的組件，所以，我使用了ng-grid來展示數(shù)據(jù)，用UI Bootstrap提供分頁功能。ng-grid其實(shí)同樣包含了分頁的組件，但是我更喜歡UI Bootstrap提供的組件。
這里還缺少了一個(gè)文件——一個(gè)js文件來是實(shí)現(xiàn)功能：
persion.js
var app=angular.module('persons', ['ngGrid', 'ui.bootstrap']);
// Create a controller with name personsList to bind to the html page.
app.controller('personsList', function ($scope, $http) {
// Makes the REST request to get the data to populate the grid.
$scope.refreshGrid=function (page) {
$http({
url: 'resources/persons',
method: 'GET',
params: {
page: page,
sortFields: $scope.sortInfo.fields[0],
sortDirections: $scope.sortInfo.directions[0]
}
}).success(function (data) {
$scope.persons=data;
});
};
// Do something when the grid is sorted.
// The grid throws the ngGridEventSorted that gets picked up here and assigns the sortInfo to the scope.
// This will allow to watch the sortInfo in the scope for changed and refresh the grid.
$scope.$on('ngGridEventSorted', function (event, sortInfo) {
$scope.sortInfo=sortInfo;
});
// Watch the sortInfo variable. If changes are detected than we need to refresh the grid.
// This also works for the first page access, since we assign the initial sorting in the initialize section.
$scope.$watch('sortInfo', function () {
$scope.refreshGrid($scope.persons.currentPage);
}, true);
// Initialize required information: sorting, the first page to show and the grid options.
$scope.sortInfo={fields: ['id'], directions: ['asc']};
$scope.persons={currentPage : 1};
$scope.gridOptions={
data: 'persons.list',
useExternalSorting: true,
sortInfo: $scope.sortInfo
};
});
這個(gè)Javascript代碼非常簡潔，整體性很好。請注意每部分是如何加入到應(yīng)用的控制器中的，這讓你能夠分開關(guān)注業(yè)務(wù)邏輯的多個(gè)部分。為了實(shí)現(xiàn)所需的功能，我們僅僅需要添加少量的方法，包括通過調(diào)用REST服務(wù)來刷新列表，以及監(jiān)控表格中的數(shù)據(jù)來刷新視圖。這是最終的結(jié)果：
這個(gè)系列的下一篇文章中，我打算：
你可以從我的github庫中clone一個(gè)完整的拷貝，然后部署到Wildfly上，關(guān)于如何部署，也可以在上面找到指導(dǎo)，同樣，它也應(yīng)該能在Glassfish上運(yùn)行。Java EE – Angular JS Source
同時(shí)，我還根據(jù)管理Javascript依賴一文來更新了我的源碼，請通過 release 1.0來下載源碼，同樣可以clone這個(gè)repo，并使用git checkout 1.0命令來下載release 1.0版本的源碼。
希望你喜歡這篇文章，如果你有任何評(píng)論或意見請告訴我。
個(gè)基礎(chǔ)課程將介紹知名的Google前端開發(fā)框架AngularJS的基礎(chǔ)使用，包括：基本概述，數(shù)據(jù)綁定，指令，表達(dá)式，控制器，過濾器等基礎(chǔ)內(nèi)容
課程內(nèi)容：
AngularJS核心功能
數(shù)據(jù)綁定：自動(dòng)同步視圖和模式組件的數(shù)據(jù)
作用域：這些對(duì)象參考模式。作為控制器和視圖的紐帶
控制器：這些JS方法綁定到指定的作用域中
服務(wù)：AngularJS帶有一些內(nèi)建的服務(wù)，例如，$http來處理XMLHttpRequests. 這些都是Singleton對(duì)象，只需要實(shí)例化一次
過濾器：這些用來處理數(shù)組的子集并且返回新的數(shù)組
指令集: 指令集是DOM元素的標(biāo)示（例如，元素，屬性，CSS等等）。這些指令集可以用來定義自定義的HTML標(biāo)簽，生成新的自定義的組件。AngularJS定義了一些內(nèi)建的指令集（ngBind, ngModal等等）
模板：這些組件用來幫助將數(shù)據(jù)生成頁面視圖。一個(gè)頁面可以有一個(gè)或者多人模板。
路由: 用來切換不同視圖的機(jī)制。
Model ViewWhatever：MVC是一個(gè)用來將程序分割為不同部分的設(shè)計(jì)模式，每一個(gè)有自己獨(dú)立的功能。AngularJS實(shí)現(xiàn)的并非是傳統(tǒng)意義上的MVC架構(gòu)，而是類似MVVM(Model-View-ViewModel)，AngularJS團(tuán)隊(duì)?wèi)蚍Q為MVW(Model ViewWhatever)
深度鏈接：允許你編碼狀態(tài)到URL中，這樣可以方便的收藏地址。程序可以從URL中恢復(fù)保存時(shí)的狀態(tài)
依賴注入：AngularJS內(nèi)建的依賴注入子系統(tǒng)，幫助開發(fā)人員更容易的創(chuàng)建開發(fā)，測試和理解代碼和結(jié)構(gòu)
若需觀看相關(guān)課程，請猛力點(diǎn)擊下面“相關(guān)鏈接”地址
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
