刚学没多久，作了一个小项目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 JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)的更多相关文章

  1. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  2. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  3. Angular.js学习笔记 （二）

    用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...

  4. Angular.JS学习笔记——1

    内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...

  5. Angular JS 学习笔记（二）

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

  6. Angular JS 学习笔记（一）

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  7. angular.js学习笔记--概念总结

    好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...

  8. angular.js学习笔记：实现商品价格计算实例

    <!DOCTYPE html> <html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部--> &l ...

  9. Angular.js学习笔记 （一）

    - angular中最重要的概念是指令(directive)- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系### 模块(Mo ...

随机推荐

  1. Linux Shell 01 脚本与变量

    一 脚本的创建和执行 1. 创建文件*.sh,文件后缀为sh 2. 编辑脚本 首行必须为:#!/bin/bash   #指定解释脚本的shell 3. 赋权 chmod u+x a.sh 4. 执行 ...

  2. mac下 home-brew安装及php,nginx环境安装及配置

    Homebrew官网 http://brew.sh/index_zh-cn.html Homebrew是神马 linux系统有个让人蛋疼的通病,软件包依赖,好在当前主流的两大发行版本都自带了解决方案, ...

  3. Azure 上为Liunx VM 挂载File类型的存储。

    1. Create a storage account in Azure, copy the storage account endpoint URL (with postfix of "f ...

  4. Mongodb 主从复制与副本集实验

    1.实验主从复制,并验证复制成功,抓图实验过程  Step1:创建相应的目录 Mkdir -p ./dbs/master Mkdir -p ./dbs/slave Step2:开启主服务 ./bin/ ...

  5. Unity3D 实现简单的语音聊天 [iOS版本]

    现在很多手机游戏中的聊天系统都加入语音聊天的功能,相比于传统的文字聊天,语音聊天在MMORPG中显得尤为重要,毕竟直接口头交流总比你码字快得多了,也更直观些. 实现语音聊天的方法很多,U3D中有不少第 ...

  6. Hello world S.B.S.

    #include <iostream> #include <conio.h> #include<cstdio> #include<cstring> #i ...

  7. Vim tips

    1.光标移动: (1).NG -> 移动到第N行,或者使用:N (2).gg -> 移动到第一行 (3).G -> 移动到最后一行 (4).单词移动: w -> 移动到下一个单 ...

  8. 【MVC 4】7.SportsSore：完成购物车

    作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> 本文将继续构建 SportsStore 示例应用程序.在上一章中,添加了对购物车的基本支持,现在打 ...

  9. 深度优先搜索 codevs 1031 质数环

    codevs 1031 质数环  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 一个大小为N(N<=17)的质数环是 ...

  10. 设计模式笔记感悟 - Creational篇

    body,td,p { // 这对大括号里描述网页的背景 margin-left:40px; margin-right:40px; font-size: 10pt; } div.vim { width ...