Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

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

    }
}

运行结果：