刚学没多久，作了一个小项目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. JQ工具函数

    在jQuery中,工具函数是指直接依附于jQuery对象,针对jQuery对象本身定义的方法,即全局性的,我们统称为工具函数,或Utilites函数 主要作用于:字符串.数组.对象 API:工具函数 ...

  2. Linux运维工程师入门须掌握的10个技术点

    本人是linux运维工程师,对这方面有点心得,现在我说说要掌握哪方面的工具吧 说到工具,在行外可以说是技能,在行内我们一般称为工具,就是运维必须要掌握的工具. 我就大概列出这几方面,这样入门就基本没问 ...

  3. Docker 基础命令 简要入门

    本文出自:http://www.cnblogs.com/scoter2008,本文将持续更新所有docker都可以通过man查看帮助:man docker [ps|top|run|...]1.列出正在 ...

  4. 开启mysql慢查询

    Linux查看mysql 安装路径一.查看文件安装路径由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址).这里以mysql为例.比如说我安装了mysql,但是不知道文件都安装在哪些 ...

  5. Python语言100例

    Python版本:python 3.2.2 电脑系统:win7旗舰 实例来源:python菜鸟教程100例 #!/usr/bin/python # -*- coding: UTF-8 -*- impo ...

  6. ipc之消息队列

    消息队列以链表的方式将消息存储于内核中,调用msgsnd,msgrcv函数往消息队列里面投送,取出指定的消息. 创建一个消息队列 生成一个消息队列或者获取已有消息队列id #include <s ...

  7. [转]比NPOI更討喜的Excel元件-EPPlus

    本文转自:http://blog.darkthread.net/post-2012-05-12-epplus.aspx 前陣子發表 [潛盾機]將檔案結構匯成Excel文件,從網友佑翔的留言(特此感謝) ...

  8. zookeeper适用场景：配置文件同步

    问题导读:1.本文三个角色之间是什么关系?2.三个角色的作用是什么?3.如何代码实现这三个角色的作用? 在 zookeeper适用场景:zookeeper解决了哪些问题有关于分布式集群配置文件同步问题 ...

  9. Ubuntu查看系统的信息

    转载自:http://blog.chinaunix.net/uid-25885064-id-3440641.html 系统信息 # uname -a # 查看内核/操作系统/CPU信息 # cat / ...

  10. mysql 防止update/delete误操作

    身为一php开发攻城狮,常常涉及在应用中写update/delete语句,忘记加where,后果不堪设想. 还会出现在cml下直接操作mysql的情况,如果mysql 权限够大,一个update/de ...