刚学没多久，作了一个小项目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; }
} }
}
运行结果：
