Angularjs,WebAPI 搭建一個簡易權限管理系統 —— Angularjs名詞與概念（一）
目錄
2. 前言
Angularjs開發CRUD類型的Web系統生產力驚人，與jQuery,YUI,kissy,Extjs等前端框架區別很是大，初學者在學習的過程當中容易以本身以往的經驗來學習Angularjs 每每走入誤區，最典型的特徵是在的開發過程當中，使用大量的 指令（directive） 來實現許多操做DOM的功能，從而失去了angularjs快速開發的特性，最後不得不放棄使用。此係列的文章並不會像其餘介紹Angularjs技術文檔同樣將每一個技術細節通通照顧到，而是經過實戰項目先讓初學者有個大概的瞭解，而後你們在由淺入深逐漸熟悉每個細節。
javascript
Github Angularjs
寫此博客的時候angularjs官方穩定版已經更新到 「1.4.2」，內部測試版更新到「2.0.0-alpha.30」
本篇博客使用angularjs 1.4.2 版本
angularjs 1.4.2下載地址css
首先放一個招牌Demo:html
<!--設置angularjs在頁面上的訪問域-->
<html ng-app="Yiim">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//聲明一個私有函數域
(function () {
//建立一個app模塊（你就想象成C#裏面的一個類庫吧）
var app = angular.module("Yiim", []);
//在app模塊中建立一個"tmplController"控制器
app.controller("tmplController", ["$scope", function ($scope) {
//設置（val）變量值
$scope.val = "Google是最棒的搜索引擎。";
}]);
})()
</script>
</head>
<body>
<!--設置當前div的控制器爲"tmplController"-->
<div ng-controller="tmplController">
<div>{{val}}</div>
</div>
</body>
</html>
點擊此運行前端
3.Angularjs名詞與概念
2.1 單頁Web應用（SinglePage）:
顧名思義，只使用一個頁面的Web應用程序.單頁面應用是指用戶經過瀏覽器加載獨立的HTML頁面，Ajax加載數據頁面無刷新，實現操做各類操做。java
2.2 模板（template）:
這裏的模板是指前端模板，在angularjs 以外已經有很是豐富的JavaScript模板引擎了，例如artTemplate，Mustache，doT.js等。
Angularjs 內置有本身的模板引擎。
經過下面的DEMO咱們一塊兒瞭解一下Angularjs 內置模板引擎：jquery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs 模板解釋</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//聲明一個私有函數域
(function () {
var app = angular.module("Yiim", []); //建立模塊
app.controller("tmplController", ["$scope", function ($scope) {
//給變量val賦值
$scope.val = "Google是最好的搜索引擎";
//給變量list賦值
$scope.list = [
{ title: "博客園", url: "http://www.cnblogs.com" },
{ title: "知乎", url: "http://www.zhihu.com" },
{ title: "codeproject", url: "http://www.codeproject.com/" },
{ title: "google", url: "http://www.google.com/" }
]
//給變量hasValue賦值
$scope.hasValue = false;
}]);
})()
</script>
</head>
<body ng-app="Yiim">
<div ng-controller="tmplController">
<!--普通輸出-->
<div>{{val}}</div>
<!--循環-->
<ul ng-repeat="item in list">
<li><a href="{{item.url}}" rel=nofollow>{{item.title}}</a></li>
</ul>
<!--條件語句-->
<div ng-if="!hasValue">
Angularjs條件語句
</div>
</div>
</body>
</html>
點擊此運行git
以上代碼首先建立一個"Yiim"模塊，而後在模塊中添加了一個名詞爲"tmplController"的控制器，而後給scope添加三個屬性「val」，「list」，「hasValue」，並賦值。
在模板頁面設置angularjs做用域爲"body"標籤內,名詞爲"Yiim"angularjs
<body ng-app="Yiim">
在做用域中設置控制器爲"tmplController"github
<div ng-controller="tmplController">
例子中提供了3種輸出方式（普通輸出，循環，條件語句），固然angularjs不只僅這幾種方式
「ng-repeat」，「ng-if」 這都是經過指令實現。咱們在下一節（2.5 ）將詳細講解web
2.3 控制器（controller）:
控制器能夠理解爲控制頁面某個區塊的方法。其中有一個很是重要的對象 $scope是這個控制器與頁面控制器區域溝通的橋樑。angularjs最精華的部分是雙向綁定，失去了雙向綁定angularjs就失去了本身的靈魂。這也是和其餘以DOM操做的框架比最大的區別。放DEMO
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs控制器介紹</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
(function () {
var app = angular.module("Yiim", []);
app.controller("cntoController", ["$scope", function ($scope) {
var defaults = "知乎 - 與世界分享你的知識、經驗和看法";
//設置值
$scope.val = defaults;
$scope.click = function () {
$scope.val = defaults;
};
}]);
})()
</script>
</head>
<body ng-app="Yiim">
<div ng-controller="cntoController">
<!--綁定值-->
<div><textarea ng-model="val"></textarea></div>
<!--輸出值-->
<div>{{val}}</div>
<!--綁定方法-->
<div><button ng-click="click()">重置</button></div>
</div>
</body>
</html>
控制器演示效果 點擊此運行
與2.2節例子相同是,咱們首先建立了一個模塊，而後在模塊中添加一個控制器方法 "cntoController".
在控制器裏咱們給scope添加了一個屬性"val" 和一個方法 "click"。
在頁面中咱們使用"ng-model"指令綁定控制器中設置的"val"
<div><textarea ng-model="val"></textarea></div>
緊接着咱們把綁定的值輸出處理
<div>{{val}}</div>
經過內置的綁定方法click 咱們重置字符串
$scope.click = function () {
$scope.val = defaults;
};
2.4 路由（route）:
單頁Web應用因爲沒有後端URL資源定位的支持，須要本身實現URL資源定位。angularjs使用瀏覽器URL "#" 後的字符串來定位資源，區分不一樣的功能模塊。
路由並不是在angularjs核心文件內，你須要另外加入一段腳本 「angular-route.min.js」
須要注意的是在建立 「app」 對象是須要填寫對 ngRoute 依賴
var app = angular.module("Yiim", ['ngRoute']);//注意 ngRoute
下面咱們一樣的展現一個demo
主頁面 route.html
<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs路由介紹</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script src="http://files.cnblogs.com/files/Arrays/angular-route.min.js"></script>
<script type="text/javascript">
//聲明一個私有函數域
(function () {
//設置當前模塊依賴，「ngRoute」，用.NET的理解就是給這個類庫添加「ngRoute」引用
var app = angular.module("Yiim", ['ngRoute']);
//配置路由
app.config(['$routeProvider', function ($routeProvider) {
var route = $routeProvider;
//指定URL爲「/」 控制器：「indexController」，模板：「route.html」
route.when('/list', { controller: 'listController', templateUrl: 'route-list.html' });
//注意「/view/:id」 中的 「：id」 用於捕獲參數ID
route.when('/view/:id', { controller: 'viewController', templateUrl: 'route-view.html' });
//跳轉
route.otherwise({ redirectTo: '/list' });
}]);
//建立一個提供數據的服務器
app.factory("service", function () {
var list = [
{ id: 1, title: "博客園", url: "http://www.cnblogs.com" },
{ id: 2, title: "知乎", url: "http://www.zhihu.com" },
{ id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
{ id: 4, title: "google", url: "http://www.google.com/" }
];
return function (id) {
//假如ID爲無效值返回全部
if (!id) return list;
var t = 0;
//匹配返回的項目
angular.forEach(list, function (v, i) {
if (v.id == id) t = i;
});
return list[t];
}
})
//建立控制器 indexController
app.controller("listController", ["$scope", "service", function ($scope, service) {
//獲取全部數據
$scope.list = service();
}]);
//建立查看控制器 viewController, 注意應爲須要獲取URL ID參數 咱們多設置了一個 依賴注入參數 「$routeParams」 經過它獲取傳入的 ID參數
app.controller("viewController", ["$scope", "service", '$routeParams', function ($scope, service, $routeParams) {
$scope.model = service($routeParams.id || 0) || {};
}])
})()
</script>
</head>
<body>
<div><a href="#/list">列表</a></div>
<div ng-view>
</div>
</body>
</html>
列表頁面 route-list.html
<ul ng-repeat="item in list">
<li><a href="#view/{{item.id}}">{{item.title}}</a></li>
</ul>
詳細頁面 route-view.html
<div>
<div>網站ID：{{model.id}}</div>
<div>網站名稱：<a href="{{model.url}}" rel="nofollow">{{model.title}}</a></div>
<div>訪問地址：{{model.url}}</div>
</div>
演示效果：點擊此運行
以上代碼中，咱們首先配置了三條個處理個局部頁面的路由
路由處理列表頁並設置控制器爲"listController",指定模板頁爲"route-list.html"
route.when('/list', { controller: 'listController', templateUrl: 'route-list.html' });
與上面不一樣的是第二條路由中包含":id"用於捕獲URL後面的參數 。
route.when('/view/:id', { controller: 'viewController', templateUrl: 'route-view.html' });
處理全部未匹配到的路由跳轉到 "'/list'"內。
route.otherwise({ redirectTo: '/list' });
咱們還使用了模塊方法 "factory" 建立一個"service" 服務，用於獲取數據列表
後面咱們聲明瞭兩個控制器"listController","viewController",同時配置對"service"的依賴，"viewController" 中咱們還添加對 "$routeParams" 的依賴，用於獲取路由捕獲的id。
須要注意的是咱們再主頁面聲明瞭"ng-view"用於指定局部頁面和控制器做用範圍。
<div ng-view></div>
2.5 指令（directive）:
指令（directive）並非什麼高深的東西，咱們簡單理解爲經過聲明 特殊的標籤，屬性..等來處理瀏覽器沒法渲染的功能。經過JavaScript將指令替換成瀏覽器能夠識別的標籤。
當前這不是它存在的惟一意義。在上面的例子中咱們已經見到了「ng-if」,"ng-repeat"等這些angularjs 內置的指令。固然咱們也能夠定義本身使用的指令。
- 經過指令能夠實現對DOM操做
- 能夠跟加簡潔的實現某些功能
- 經過指令能夠集成其餘插件 例如jQuery插件
<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs指令演示</title>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//聲明一個私有函數域
(function () {
var app = angular.module("Yiim", []);
//建立一個提供數據的服務器
app.factory("service", function () {
var list = [
{ id: 1, title: "博客園", url: "http://www.cnblogs.com" },
{ id: 2, title: "知乎", url: "http://www.zhihu.com" },
{ id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
{ id: 4, title: "google", url: "http://www.google.com/" }
];
return function (id) {
//假如ID爲無效值返回全部
if (!id) return list;
var t = 0;
//匹配返回的項目
angular.forEach(list, function (v, i) {
if (v.id == id) t = i;
});
return list[t];
}
})
//建立指令imCheck 在HTML中的語法爲 im-check
app.directive("imCheck", [function () {
return {
restrict: 'A',
replace: false,
link: function (scope, element) {
var all = "thead input[type='checkbox']";
var item = "tbody input[type='checkbox']";
//當點擊選擇全部事便利全部項目
element.on("change", all, function () {
var o = $(this).prop("checked");
var tds = element.find(item);
tds.each(function (i, check) {
$(check).prop("checked", o);
});
});
//子項修改時的超值
element.on("change", item, function () {
var o = $(this).prop("checked");
var isChecked = true;
if (o) {
element.find(item).each(function () {
if (!$(this).prop("checked")) {
isChecked = false;
return false;
}
return true;
});
}
element.find(all).prop("checked", o && isChecked);
});
}
};
}])
app.controller("dectController", ['$scope', 'service', function ($scope, service) {
$scope.list = service();
}])
})();
</script>
</head>
<body>
<!--注意一下標籤 im-check 指定使用的指令-->
<table ng-controller="dectController" im-check>
<thead>
<tr>
<th><input type="checkbox">選擇</th>
<th>網站ID</th>
<th>網站名稱</th>
<th>連接地址</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td><input type="checkbox"></td>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.url}}</td>
</tr>
</tbody>
</table>
</body>
</html>
演示效果 點擊此運行
上面的例子中，咱們使用模塊建立了一個指令"imCheck",並在指令方法"link"註冊了使用當前指令的dom對象註冊了兩個delegate方法 處理全選和子選擇項狀態改變處理的方法。
"imCheck" 對應在html頁面的屬性爲 "im-check" 注意大小寫。
<table ng-controller="dectController" im-check>
還要注意的是咱們使用了jQuery來操做dom節點。
2.6 前端模塊化開發:
模塊化開發不是什麼新鮮的概念，後端開發過程當中包,類庫這些把功能相近的東西放在一塊兒。前端開發很長一段時間混亂無比，腳本之間的衝突，依賴，變量函數覆蓋各類奇奇怪怪的問題。模塊化開發在前端的定義：將功能相近的組件封裝到一塊，經過前端依賴注入解決依賴順序和變量做用域的問題. 表明框架有Seajs,Requirejs。
使用模塊化編程實現angularjs多種模塊，解決依賴問題
<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs 模塊化開發</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//聲明一個私有函數域
(function () {
//建立一個Yiim.service 模塊
var service = angular.module("Yiim.service", []);
//建立一個Yiim.controller 模塊
var controller = angular.module("Yiim.controller", []);
//指令模塊
var directive = angular.module("Yiim.directive", []);
//過濾器模塊
var filter = angular.module("Yiim.filter", []);
//Yiim.service添加一個服務
service.factory("service", [function () {
return { key: "Service" };
}]);
//Yiim.controller添加一個控制器
controller.controller("indexController", ['$scope', 'service', function ($scope, service) {
$scope.service = service;
}]);
//獲取依賴
var app = angular.module("Yiim", ['Yiim.service', 'Yiim.controller', 'Yiim.directive', 'Yiim.filter']);
})();
</script>
</head>
<body>
<div ng-controller="indexController">{{service.key}}</div>
</body>
</html>
2.7 過濾器（filter）:
angularjs過濾器,用來格式化數據(轉化，排序，篩選等操做)。
<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs 過濾器</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//聲明一個私有函數域
(function () {
var app = angular.module("Yiim", []);
app.controller("namesController", ["$scope", function ($scope) {
$scope.names = [
{ "Name": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" },
{ "Name": "Berglunds snabbköp", "City": "Luleå", "Country": "Sweden" },
{ "Name": "Centro comercial Moctezuma", "City": "México D.F.", "Country": "Mexico" },
{ "Name": "Ernst Handel", "City": "Graz", "Country": "Austria" },
{ "Name": "FISSA Fabrica Inter. Salchichas S.A.", "City": "Madrid", "Country": "Spain" },
{ "Name": "Galería del gastrónomo", "City": "Barcelona", "Country": "Spain" },
{ "Name": "Island Trading", "City": "Cowes", "Country": "UK" },
{ "Name": "Königlich Essen", "City": "Brandenburg", "Country": "Germany" },
{ "Name": "Laughing Bacchus Wine Cellars", "City": "Vancouver", "Country": "Canada" },
{ "Name": "Magazzini Alimentari Riuniti", "City": "Bergamo", "Country": "Italy" },
{ "Name": "North/South", "City": "London", "Country": "UK" },
{ "Name": "Paris spécialités", "City": "Paris", "Country": "France" },
{ "Name": "Rattlesnake Canyon Grocery", "City": "Albuquerque", "Country": "USA" },
{ "Name": "Simons bistro", "City": "København", "Country": "Denmark" },
{ "Name": "The Big Cheese", "City": "Portland", "Country": "USA" },
{ "Name": "Vaffeljernet", "City": "Århus", "Country": "Denmark" },
{ "Name": "Wolski Zajazd", "City": "Warszawa", "Country": "Poland" }
];
}])
})()
</script>
</head>
<body>
<div ng-controller="namesController">
<p>輸入過濾：</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'Country'">
{{ (x.Name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
</body>
</html>
演示效果 點擊此運行
咱們使用angularjs內置的過濾器 "filter","orderBy"。
x in names | filter:name | orderBy:'Country'
含義爲將集合 "names" 傳入過濾器 "filter"匹配字符串爲"name"的項目，而後將匹配後的集合傳入 "orderBy"過濾器，以"Country"屬性進行排序。
在輸出變量時咱們使用"uppercase"過濾器轉化大小寫
x.Name | uppercase
若是這篇文章對你有幫助,麻煩幫忙點個推薦啦。
相關文章
- 1. Angularjs,WebAPI 搭建一個簡易權限管理系統 —— Angularjs 前端主體結構(五)
- 2. AngularJs系列實戰 Angularjs名詞與概念（一）【轉】
- 3. Angularjs,WebAPI 搭建一個簡易權限管理系統 —— 基本功能演示(二)
- 4. [後端人員耍前端系列]AngularJs篇：使用AngularJs打造一個簡易權限系統
- 5. 第三章 搭建一個通用的權限管理系統
- 6. express搭建權限管理系統
- 7. Angular與AngularJS概念區分
- 8. AngularJS基礎概念介紹
- 9. angularJs(一)簡介
- 10. 權限管理系統簡單模型
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Angularjs,WebAPI 搭建一個簡易權限管理系統 —— Angularjs 前端主體結構(五)
- 2. AngularJs系列實戰 Angularjs名詞與概念（一）【轉】
- 3. Angularjs,WebAPI 搭建一個簡易權限管理系統 —— 基本功能演示(二)
- 4. [後端人員耍前端系列]AngularJs篇：使用AngularJs打造一個簡易權限系統
- 5. 第三章 搭建一個通用的權限管理系統
- 6. express搭建權限管理系統
- 7. Angular與AngularJS概念區分
- 8. AngularJS基礎概念介紹
- 9. angularJs(一)簡介
- 10. 權限管理系統簡單模型