3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能
本節我們會通過構建一個簡單的筆記存儲應用（可以載入并修改一組簡單的筆記）來學習如何應用Angular的特性。這個應用用到的特性有：
本應用已經包含了基礎的HTML和CSS代碼，還有一個用Node寫的簡單的RESTful服務器，用于管理筆記，這樣我們就可以專注于Angular而不是API。我們學習的重點是如何把Angular加入其中并學習它的重要特性。
3.2.1 獲取項目文件
首先，我們需要來獲取一下該項目的文件，可以通過git來獲取，執行如下命令：
$ git clone https://github.com/ionic-in-action/chapter3.git（克隆chapter3倉庫）
$ cd chapter3（切換到chapter3目錄）
$ git checkout step1（檢出step1標簽）
（如果你不想使用git，可以直接下載文件：https://github.com/ionic-in-action/chapter3/archive/step1.zip）
3.2.2 啟動開發服務器
由于這個項目搭載的是RESTful服務器，需要你掌握一些NodeJS的知識。在項目server.js文件中可以看到一個簡單的RESTful服務器，它是基于Express.js框架開發的，這樣做的原因是你需要長期管理筆記，通過RESTful API可以讓應用閱讀、創建、編輯和刪除列表中的筆記。服務器還可以通過HTTP請求把文件載入瀏覽器，ionic serve就是通過這種方式來運行你的Ionic應用的。
需要注意的是：
- 服務器運行在3000端口上；
- 服務器會接受請求，根據URL和HTTP方法來修改列表中的筆記；
- 服務器使用JSON文件來作為數據庫（data/notes.json），你可以根據自己的情況使用其他的數據庫；
如果服務器不能運行，則說明你缺少一些必備的node包，解決方法，在終端中進入項目目錄，運行$ npm install，npm會檢查依賴列表并下載依賴。
然后輸入命令$ node server來啟動服務器，如果需要終止服務器可以按Ctrl+S或者直接關閉命令窗口。
? 運行后的基礎模板如下圖所示：
3.2.3 創建Angular應用
Angular開發簡單來說就是用JavaScript創建一個Angular應用并在HTML中使用它。Angular和DOM緊密結合，所以你可以把一個Angular應用嚴格限制在一個DOM元素及其子元素中。在本例中使用的是<html>元素，所有Angular可以訪問整個頁面。Ionic通常使用的是<body>元素。
首先，你必須要先載入Angular庫，然后要創建一個Angular應用，你需要在一個元素上使用ngApp指令并聲明應用名稱。打開index.html文件，并添加ngApp指令：
<html lang="en" ng-app="App">? 現在，你已經把一個名為App的Angular應用附加到了HTML根元素上。這樣Angular就可以訪問整個DOM，不過你也可以把它附加到<body>標簽中。我們建議把它放在<html>或者<body>元素中。
上面我們只是添加了ngApp的指令，還沒有在JavaScript中聲明這個應用，下面我們來完成這一步。Angular有一套模板系統，用來封裝程序代碼。聲明新模塊時，你需要提供名字和一個數組，其中包含所有依賴。Ionic本身也是一個Angular模塊。Angular模塊的聲明方式如下，創建一個新文件js/app.js并寫入下面的代碼：
angular.module('App',[]);? 最后，在index.html文件</body>標簽前添加一個<script>標簽來載入Angular模塊：
<script src="js/app.js"></script>? 你現在已經在頁面中聲明并載入了一個最基本的Angular應用。angular.module()方法會創建模塊并把它附加到ngApp所屬的DOM元素中。這是最基本的Angular應用，實際上它現在沒有任何功能。所有的Angular應用都是用這樣的方式定義的。
3.2.4 添加控制器
控制器：控制數據和業務邏輯
我們需要添加一個控制器來控制應用中多個部分的業務邏輯，它不會改變瀏覽器中應用的樣子，因為控制器只負責管理數據，不影響應用的視覺效果，不過我們需要在管理視覺元素之前搞定控制器。添加控制器之后，它就可以訪問頁面中的某個特定區域。
下面我們來聲明一個簡單的控制器。首先你需要引用App模塊并使用控制器方法來聲明一個控制器。需要傳入控制器的名字以及一個包含控制器邏輯的函數。創建文件js/editor.js：
//編輯控制器 js/editor.js angular.module('App') //引入App模塊并把它引入這個控制器中 .controller('EditorController',function($scope){ //聲明EditorController控制器，傳入一個包含依賴列表的函數$scope.state={ //創建模型的值并存儲到$scope中editing:false}; });? 這個控制器現在非常簡單，只是創建了一個簡單的模型state。$scope服務被注入，所以你可以設置它的屬性。記住，$scope中的值被稱為模型，可以在視圖中訪問。
現在修改index.html文件，把控制器加入應用中，在</body>前引入editor.js文件：
<script src="js/editor.js"></script>? 最后將控制器附加到DOM中。這會給控制器創建一個新的子作用域。我們需要用一條Angular指令來盛勇控制器被附加的位置：
<div class="container" ng-controller="EditorController">? 注：$開頭的服務
Angular中的服務以$符號開頭，Ionic的服務也是如此。以$開頭的服務，按慣例是Angular核心服務或者Ionic服務。
3.2.5 加載數據并將數據顯示在應用中
加載數據：使用控制器來加載數據并顯示在視圖中
下面我們來加載數據并把它顯示到應用中，在應用的基礎模板左側已經有一個創建好的空的筆記列表。然后我們加入一些簡單的筆記，更新控制器從而把數據載入應用。要實現這個功能，需要使用Angular的$http服務，通過$http服務來請求Node服務器的數據。我們來具體操作一下：
先修改控制器，通過HTTP請求訪問服務器的筆記服務并把返回的數據賦值給作用域。打開js/editor.js文件，更新代碼：
angular.module('App') .controller('EditorController', function ($scope,$http) { //把$http服務注入控制器$scope.editing = true;$http.get('/notes').success(function(data){ //使用$http.get加載筆記，如果成功，使用法內的數據$scope.notes = data; //把從http返回的數據賦值給$scope}).error(function(err){ //處理錯誤，存儲錯誤$scope.error = 'Could not load notes';}); });? 注意控制器函數中可以給函數聲明任意數量的參數，Angular會通過名字來定位服務并注入控制器。上面代碼中$http的使用方法叫做依賴注入（DI），是Angular一個非常強大的特性，可以讓你的控制器使用各種服務。由于Angular的服務并不是全局的，所以必須先注入再使用。
這時我們啟動服務，但是在頁面上看不到任何數據，而我們訪問http://localhost:3000/notes，發現json數據可以訪問沒有問題，那是為什么我們看不到數據呢？因為我們需要更新index.html模板文件，用Angular指令把數據從$scope中顯示出來，對index.html文件，我們需要進行如下修改：
<div class="col-sm-3"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title"><button class="btn btn-primary btn-xs pull-right">New</button> My Notes</h3></div><div class="panel-body"><!-- ngIf會根據是否有筆記來判讀是否把這個元素插入DOM --><p ng-if="!notes.length">No notes</p><ul class="list-group"><!-- ngRepeat會循環每個筆記并顯示筆記標題 --><li class="list-group-item" ng-repeat="note in notes">{{note.title}}><br /><!-- 綁定顯示日期，使用過濾器顯示較短的日期 --><small>{{note.date | date:'short'}}</small></li></ul></div></div> </div>說明：模板中{{note.date | date:'short'}}有個| date:'short'，這是一個過濾器，它會在不改動作用域值的前提下修改顯示內容。在表達式中可以通過管道符來使用過濾器，過濾器可以串聯，也就是說可以添加多個過濾器。
加載數據后的筆記截圖：
3.2.6 處理選擇筆記的單擊事件
如果需要單獨查看某條筆記，需要單擊左側列表筆記時，將他們顯示在右側。
使用ngClick可處理用戶的單擊事件，然后把筆記數據賦值給一個新的模型，用來進行顯示，我們來打開模版index.html，修改筆記列表的部分，添加單擊事件處理器：
<ul class="list-group"><!-- ngRepeat會循環每個筆記并顯示筆記標題；ngClick會調用view()并傳入下標；添加ngClass，如果筆記被選中就添加active類 --><li class="list-group-item" ng-repeat="note in notes" ng-click="view($index)" ng-class="{active: note.id == content.id}">{{note.title}}><br /><!-- 綁定顯示日期，使用過濾器顯示較短的日期 --><small>{{note.date | date:'short'}}</small></li> </ul>當單擊筆記時，Angular會嘗試調用$scope.view()函數，ngClass指令可以根據情況向元素添加css類。$index值時ngRepeat提供的特殊變量，被傳入視圖函數里，作用就是告訴你當前被使用的數組元素的下標，此處指的是被單擊元素的下標。
下面我們來創建視圖函數，打開editor.js文件，在控制器函數里添加視圖函數：
$scope.view = function(index){ //聲明一個名為view的新$scope方法，接受被點擊元素的下標$scope.editing = false; //把editing狀態設置為false，因為此時用戶要查看元素$scope.content = $scope.notes[index]; //給content模型設置一個新模型，包含被單擊的筆記};此時，當我們點擊筆記時，click時間會觸發控制器中view()方法，它會根據傳入的下標值找到被點擊的筆記，并將筆記內容賦值給新的content模型，同時，editing模型也會被設置為false。
3.2.7 更新模版顯示被選擇的筆記
此時點擊筆記，右側面板不會有變化，因為我們還沒有修改右側顯示的面板，右側面板有兩種狀態，一個是展示筆記，一個是編輯筆記，$scope.editing屬性將決定顯示哪個面板。再次打開index.html文件作如下修改：
<!-- ngHide會在本條件為真時隱藏頭部，在這里editing為true的時候條件為真 --> <div class="panel panel-default" ng-hide="editing"><div class="panel-heading"><!-- 把title綁定到頭部 --><h3 class="panel-title">{{content.title}} <button class="btn btn-primary btn-xs pull-right">Edit</button></h3></div><!-- 把content綁定到正文 --><div class="panel-body">{{content.content}}</div><!-- 綁定筆記日期并把它傳遞給過濾器 --><div class="panel-footer">{{content.date | date:'short'}}</div> </div> <!-- ngShow會在條件為假時隱藏底部，在這里editing為false的時候條件為假 --> <form name="editor" class="panel panel-default" ng-show="editing">再次運行應用，此時單擊筆記即可實現查看功能，如下圖所示：
3.2.8 創建指令，解析Markdown格式的筆記
要實現把Markdown格式的文本轉換為HTML，需要使用Showdown這個js庫。
打開app.js文件，指令不是控制器的一部分，所以代碼需要被存儲到應用主文件中，具體代碼如下：
//聲明命令并命名為markdown .directive('markdown',function(){//創建showdown轉換器，下面會用到var converter = new Showdown.converter();//命令會返回一個對象，用來聲明命令的設置return {//聲明自定義作用于，等待值被賦給markdown屬性 scope:{markdown:'@'},//聲明link函數，它會把markdown轉換成htmllink:function(scope,element,attrs){//使用作用于觀察器來同步模型改動scope.$watch('markdown',function(){//把markdown轉換成html并存入content變量var content = converter.makeHtml(attrs.markdown);//把轉換好的html內容注入到元素內 element.html(content);});}} });現在我們打開index.html文件，傳入markdown內容：
<div class="panel-body" markdown="{{content.content}}"></div>改為markdown筆記格式的頁面效果如下：
筆記展示功能已完成，下一節來實現編輯功能。
?
轉載于:https://www.cnblogs.com/jiangtengteng/p/6057094.html
總結
以上是生活随笔為你收集整理的3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 20145233 20145228《信息
- 下一篇： bzoj 3743