剛學沒多久，作了一個小項目APP，微信企業號開發與微信服務號的開發，使用的是AngularJS開發，目前項目1.0版本已經完結，但是項目純粹為了趕工，並沒有發揮AngularJS的最大作用，這幾天項目到了測試那邊，自己正好閑下來了，可以把項目優化一下，目標是做成SPA（單頁面應該程序），因為Android版本實在是卡得不行，iPhone上面運行還可以見得了人。不得不優化，SPA做完了，還要做本地化存儲。OK，把今天的筆記寫下來，回家再完善
##ListController.js
/// <reference path="../angular.js" /> /*創建liveModule模塊*/ var liveModule = angular.module('liveModule', []); /*創建控制器*/ liveModule.controller('liveListController', function ($scope, Book) { //自定義服務 Book.GetList().then(function (data) { $scope.list = data; }); }); //過濾器，調用方式：綁定字段|changeColorFilter liveModule.filter('changeColorFilter', function () { var changeColor = function (input) { var str = '<span style="color:red">' + input + "</span>"; return str; }; return changeColor; }); /*創建指令*/ liveModule.directive('BookList', function () { return { restrict: "AE", controller: function ($scope, Book) { var list = Book.GetList().then(function (data) { $scope.BookList = data; $scope.ddlBook = data[0]; }); }, template:'<select ng-model="ddlBook" ng-options="t.BookName for t in BookList"></select>' }; });
##listService.js(自定義服務類),請求服務器，Promise 模式異步請求（推薦做法）
//創建服務,調用方式：Books.query(); liveModule.factory('Books', function () { var teachers = {}; teachers.query = function () { return [ { bookname: '笑傲江湖',author:'金庸' }, { bookname: 'c語言程序設計', author: '譚浩強' }, { bookname: '小李飛刀', author: '古龍' }, ]; } return teachers; }); //與服務器交互的服務，調用方式：Book.GetList(); liveModule.factory('Book', function ($http, $q) { return { GetList: function () { var defer = $q.defer(); $http({ url: '/ashx/datacenter.ashx', method: 'post' }).success(function (data, status, headers, config) { defer.resolve(data); }).error(function (msg) { defer.reject(msg); }); return defer.promise; } }; });
##index.html
<!DOCTYPE html> <html ng-app="liveModule"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="Scripts/angular/angular.js"></script> <script> </script> <script src="Scripts/controllers/LiveController.js"></script> <script src="Scripts/common.js"></script> <script src="Scripts/services/liveService.js"></script> <title></title> </head> <body > <br /> <br /> <br /> <br /> <ul ng-controller="liveListController"> <li ng-repeat="item in list"> <span ng-bind="item.BookName"></span> </li> </ul> </body> </html>
##datacenter.ashx
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.ashx { /// <summary> /// DataCenter 的摘要說明 /// </summary> public class DataCenter : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; List<Book> books = new List<Book>(); books.Add(new Book() { Author = "徐譽兵", BookName = "AngularJS 從入門到精通" }); books.Add(new Book() { Author = "譚浩強", BookName = "C 語言程序設計" }); books.Add(new Book() { Author = "金庸", BookName = "天龍八部" }); context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(books)); } public bool IsReusable { get { return false; } } class Book { public string BookName { get; set; } public string Author { get; set; } } } }
運行結果：
