AngularJs系列實戰 Angularjs名詞與概念（一）【轉】

時間 2019-11-16

原文原文鏈接

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 ``` html <!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;
};
}]);
})()

```
控制器演示效果點擊此運行

與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」 用於捕獲參數IDroute.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/"} ];returnfunction (id) {//假如ID爲無效值返回全部if (!id) return list;var t =0;//匹配返回的項目angular.forEach(list,function (v, i) {if (v.id== id) t = i;});return list[t];}}) //建立控制器 indexControllerapp.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/"} ];returnfunction (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-checkapp.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;returnfalse;}returntrue;});}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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。