整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ngularjs簡單介紹和特點
首先angular是一個mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去組織代碼, 會將一個html頁面分成若干個模塊, 每個模塊都有自己的scope, service, directive, 各個模塊之間也可以進行通信, 但是整體結構上是比較清晰的, 就是說其代碼組織是模塊化的, angular的view可能僅僅是一個框架, , 對view的dom操作或者時間監聽都是在directive中實現的, 而且一般情況下很少直接去寫dom操作代碼, 只要你監聽model, model發生變化后view也會發生變化, 就是雙向綁定機制, angularjs適用于單頁面開發
在angularJS中，一個模板就是一個HTML文件。但是HTML的內容擴展了，包含了很多幫助你映射model到view的內容。
HTML模板將會被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。所有的指令都負責針對view來設置數據綁定。
auguarJS并不把模板當做String來操作。輸入angularJS的是DOM而非string。數據綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區別于其它的框架的最大原因。使用DOM允許你擴展指令詞匯并且可以創建你自己的指令，甚至開發可重用的組件。angular占用的內存較小, 可以兼容主流的瀏覽器, 他擁有內置的依賴注入的子系統, 可以幫助開發人員更容易開發, 理解和測試和應用, DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找創建并且提供給我們。那么AngularJS可以做到。指令可以用來創建自定義的標簽。它們可以用來裝飾元素或者操作DOM屬性。
**vuejs簡單介紹特點 **
官網: http://cn.vuejs.org/
vue是一個漸進式的框架, 是一個輕量級的框架, 也不算是一個框架, 他核心只關注圖層, 是一個構建數據驅動的web界面,易于上手, 還便于于第三方庫或與既有項目整合,也能夠為復雜的單頁應用程序提供驅動
1. vue的核心
是一個允許采用簡潔的模板語法來聲明式的將數據渲染進dom
先創建一個后綴名為.html的文件
代碼如下:
html: <div id="app"></div>
js里面的
var app=new Vue({
el: '#app',
data: {
msg: 'Hello Vue!'
}
})
在瀏覽器窗口上出現的內容: Hello Vue
數據和ＤＯＭ已經綁定在一起, 驗證是否是響應式的, 修改控制臺里面app.msg, 你就會看到上面渲染是列子也更新了
出來文本插值, 還可以用綁定DOM 元素屬性
<div id="app-2"> <span v-bind:title="message"> 查看此處動態綁定提示信息！ </span> </div>
js代碼:
var app2=new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date()
}
})
2. vue指令
指令帶有前綴v-, 以表示他們是Vue提供的特殊屬性, 他們會在渲染的DOM上應用特殊的響應式行為
v-bind: v-bind : str="msg" 將這個元素的節點的str屬性和vue實例對象的msg屬性保持一致
v-if=布爾值 條件渲染指令, 根據其后表達式的布爾值進行判斷是否渲染該元素, v-if只會渲染他身后表達式為true的元素
v-show=布爾值 和v-if類似,只是會渲染他身后表達式為false的元素, 而且會給這樣的元素添加css的代碼, style="display:none"
v-else 必須v-if/v-show指令后, 不然就不會起作用, 如果v-if/v-show的指令表達式為true, 則else就不顯示, 如果v-if/v-show指令的表達式為false, 則else元素會顯示在頁面上
v-for 類似于js的遍歷, 用法為 v-for="(item,index) in imgs" :key="index", items是數組, item為數組中的數組元素, index是索引號, key是為了更高效的查找到指定元素
v-on 用于監聽指定元素的DOM事件 v-on:click="greet"
3. vue的雙向數據綁定
vueJS是使用ES5提供的Object.defineProperty()方法, 監控對數據的操作, 從而可以自動觸發數據, 并且, 由于是在不同的數據上觸發同步, 可以精確的將變更發送給綁定的視圖, 而不是對所有的數據都執行一次檢測
vue和angular中, 都是通過在html中添加指令的方式, 將視圖元素與數據的綁定關系進行聲明
<from id="app"> <input type="test" v-model="name"> </from>
以上的html代碼表示該input元素與name數據進行綁定, 在js代碼總可以這樣進行初始化
var vm=new Vue({
el: "#app",
data:{
name: "請輸入你的名字"
}
})
代碼執行正確后, 頁面上input元素對應的位置會顯示上面的代碼給出的初始值 "請輸入你的名字", 由于雙向綁定數據已經建立, 因此, 在vm.name="小米", 則input也會更新為小明, 在頁面input上輸入小明, 則vm.name獲取的值為小明
4. vue的插件化
插件通常會為vue添加全局功能, 插件的范圍沒有限制
添加全局的方法或者屬性 vue-element 這個我并不是很懂
添加全局資源 指令/過濾器/ 過渡
添加vue實例的辦法, 將他們添加到vue-prototype上實現
引入一個庫, 來提供自己的api, 同時提供上面的一個或者多個功能, 如 vue-router
import vueRouter from ''vue-router'; //使用webpack的單文件組件打包的方式 會調用vue.component來注冊全局組件或者vue.components注冊局部組件如果是后者，每個單文件組件中都不需要引入 vue,
因為單文件組件經 webpack 打包后，生成的模塊只是一個組件選項對象，被其他組件或 Vue 實例注冊時使用語法糖，只需要 字面量對象的 組件選項對象就可以了。
使用插件:
vue.use(vueRouter); /通過全局方法Vue.use()使用插件, 會阻止注冊相同插件多次, 只會注冊一次該插件
angular和jquery的區別
angular中是盡量避免操作DOM, angular是基于數據驅動, 適合做數據操作比較繁瑣的項目,angular適用于單頁面開發,是一個比較完善的mvvm框架, 包含模板和雙向數據綁定, 路由, 模塊化, 服務, 過濾器, 依賴注入等所有功能,但是angular驗證功能比較薄弱, 需要寫很多模板標簽, 而且ngview只能有一個, 不能嵌套多個視圖,angular的兼容性比較好, jquery是基于操作DOM, 適用于操作DOM比較多的項目, jquery是一個庫, 比較大,兼容大部分瀏覽器, 有豐富的插件, 可拓展性強, jquery不能向后兼容, 使用插件時,可能會有沖突,
angular和vue的差別
一angular是mvvm框架, 而vue是一個漸進式的框架, 相當于view層, 都有雙向數據綁定, 但是angular中的雙向數據綁定是基于臟檢查機制, vue的雙向數據綁定是基于ES5的getter和setter來實現, 而angular是有自己實現一套模板編譯規則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學習成本低, vue需要一個el對象進行實例化, 而angular是整個html頁面下的,單頁面應用, 而vue可以有過個vue實例
以下是總結出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學習資料。
天這篇文章將會向你介紹如何使用Java EE 7和Angular JS來構建一個非常簡單的應用。在此之前，先給大家講一個故事。
我必須承認，我從來都不是一個Javascript的超級粉絲，但我始終記得我第一使用它的情景。我不太記得確切的年份，不過大概是90年代的中期。我的一個頁面里有3個frame（是的，frame！記得這個東西嗎？那個時候非常流行的），而我想做的是在點擊了第3個frame上的一個鏈接時，能夠重新加載前兩個frame。那個時候，Javascript是用來在頁面上做一些花哨的東西的。不是所有的瀏覽器都支持，有些瀏覽器甚至需要你手動打開。時至今日，這個情景已經有了顯著變化，Javascript成為一門全棧的開發語言。你甚至可以僅僅用Javascript就能開發出一個完整的應用。但對于我來說，有時我還是會回想到90年代的情形，很難給予Javascript足夠的信任，所以這是我為了更好的了解Javascript所做出的嘗試。
好吧，我喜歡Java，并且新的Java EE版本非常好用，配合Wildfly或Glassfish使得它簡潔而且運行快速。Java EE7的規范可以滿足你所有需求，是Java編程中的標準。
這里我大概是追隨了Angular JS的熱潮。因為我在Javascript方面沒有太多的經驗，不太了解各類的JS庫，所以這里只是采納了一些朋友的建議。而且我也注意到了在最近一次Devoxx大會上對于Angular得到了廣泛的接納，關于Angular的演講的每一個房間都爆滿。所以我想用它嘗試一下，也給我自己一個認識的機會。
這個應用是一個簡單的包含分頁的列表，以及一個REST服務用于提供列表中的數據。每當我開始一個新的企業級應用的時候，這通常是我們開始編碼時所做的第一件事：創建一張表，存入一些數據，然后列出一些隨機數據，所以我認為這個應用是非常合適的。
從后端開始，讓我們定義一個簡單的Entity類（為了簡潔省略了部分代碼）：
Persion.java
@Entity
public class Person {
@Id
private Long id;
private String name;
private String description;
}
如果你不是很熟悉Java EE的JPA規范，這里就稍作解釋。這段代碼使用了@Entity注解，從而使一個對象類連接到數據庫中同名的表，并產生映射關系，注解@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中的兩個特性：現在，你可以使用javax.persistence.schema-generation.*屬性來標準化的調用sql。并且，如果你不提供一個數據源的話，它就會綁定到一個默認的數據源。所以在這個例子中，它將會使用內部的Wildfly H2的數據源。
最后，為了提供列表數據，我們需要查詢數據庫并以REST服務的形式暴露出來：
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的注解來增強行為。@ApplicationPath("/resources")和@Path("persons")會通過yourdomain/resources/personsurl來暴露REST服務，@GET標志了這個邏輯通過http的GET方法調用，@Produces(MediaType.APPLICATION_JSON)把REST響應格式化為JSON格式。僅僅用少量注解就能完成這些操作是很酷的。
為了更容易的獲得分頁列表所需的數據，我還創建了下面這個包裝類：
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;
}
現在，后端的事情我們已經完成了。
我們使用Angular JS來展示數據。Angular遵循了MVC模式，通過添加一些自定義的標簽屬性來綁定數據和Javascript中出現的變量，從而擴展了傳統的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來展示數據，用UI Bootstrap提供分頁功能。ng-grid其實同樣包含了分頁的組件，但是我更喜歡UI Bootstrap提供的組件。
這里還缺少了一個文件——一個js文件來是實現功能：
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
};
});
這個Javascript代碼非常簡潔，整體性很好。請注意每部分是如何加入到應用的控制器中的，這讓你能夠分開關注業務邏輯的多個部分。為了實現所需的功能，我們僅僅需要添加少量的方法，包括通過調用REST服務來刷新列表，以及監控表格中的數據來刷新視圖。這是最終的結果：
這個系列的下一篇文章中，我打算：
你可以從我的github庫中clone一個完整的拷貝，然后部署到Wildfly上，關于如何部署，也可以在上面找到指導，同樣，它也應該能在Glassfish上運行。Java EE – Angular JS Source
同時，我還根據管理Javascript依賴一文來更新了我的源碼，請通過 release 1.0來下載源碼，同樣可以clone這個repo，并使用git checkout 1.0命令來下載release 1.0版本的源碼。
希望你喜歡這篇文章，如果你有任何評論或意見請告訴我。
個基礎課程將介紹知名的Google前端開發框架AngularJS的基礎使用，包括：基本概述，數據綁定，指令，表達式，控制器，過濾器等基礎內容
課程內容：
AngularJS核心功能
數據綁定：自動同步視圖和模式組件的數據
作用域：這些對象參考模式。作為控制器和視圖的紐帶
控制器：這些JS方法綁定到指定的作用域中
服務：AngularJS帶有一些內建的服務，例如，$http來處理XMLHttpRequests. 這些都是Singleton對象，只需要實例化一次
過濾器：這些用來處理數組的子集并且返回新的數組
指令集: 指令集是DOM元素的標示（例如，元素，屬性，CSS等等）。這些指令集可以用來定義自定義的HTML標簽，生成新的自定義的組件。AngularJS定義了一些內建的指令集（ngBind, ngModal等等）
模板：這些組件用來幫助將數據生成頁面視圖。一個頁面可以有一個或者多人模板。
路由: 用來切換不同視圖的機制。
Model ViewWhatever：MVC是一個用來將程序分割為不同部分的設計模式，每一個有自己獨立的功能。AngularJS實現的并非是傳統意義上的MVC架構，而是類似MVVM(Model-View-ViewModel)，AngularJS團隊戲稱為MVW(Model ViewWhatever)
深度鏈接：允許你編碼狀態到URL中，這樣可以方便的收藏地址。程序可以從URL中恢復保存時的狀態
依賴注入：AngularJS內建的依賴注入子系統，幫助開發人員更容易的創建開發，測試和理解代碼和結構
若需觀看相關課程，請猛力點擊下面“相關鏈接”地址
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
