刚学没多久，作了一个小项目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; } } } }
运行结果：
查看更多关于【angular】的文章
