刚学没多久，作了一个小项目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. 集线器hub、交换机switch、路由器router 的区别

    原文链接:http://blog.csdn.net/thq0201/article/details/7782319 首先说HUB,也就是集线器.它的作用可以简单的理解为将一些机器连接起来组成一个局域网 ...

  2. MySQL忘记密码，或：root密码重置报错：mysqladmin: connect to server at 'localhost' failed的解决方案

    MySQL root密码重置报错:mysqladmin: connect to server at 'localhost' failed的解决方案   1  登陆失败,mysqladmin修改密码失败 ...

  3. Web开发须知：URL编码与解码

    通常如果一样东西需要编码,说明这样东西并不适合传输.原因多种多样,如Size过大,包含隐私数据,对于Url来说,之所以要进行编码,是因为Url中有些字符会引起歧义. 例如,Url参数字符串中使用key ...

  4. redis动态修改参数配置

    ./redis-cli -h 10.10.10.11 -p 6401   save  # 保存当前快照   # 列出所有当前配置 config get *   # 查看指定配置 config get  ...

  5. popupWindow弹出来后，背景变暗,半透明

    /** * 点击评分,如果评分后,显示的弹出框 */ private void showMakeGradeMarkedWindow() { View view = LayoutInflater.fro ...

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

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

  7. runc start container流程分析

    1.runc/start.go Action: func(context *cli.Context) error 该函数首先调用container, err := getContainer(conte ...

  8. jquery中attr和prop的区别（转）

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  9. 【转】UVALive 5964 LCM Extreme --欧拉函数

    题目大意:求lcm(1,2)+lcm(1,3)+lcm(2,3)+....+lcm(1,n)+....+lcm(n-2,n)+lcm(n-1,n)解法:设sum(n)为sum(lcm(i,j))(1& ...

  10. 【转】Python 列表排序

    很多时候,我们需要对List进行排序,Python提供了两个方法 对给定的List L进行排序, 方法1.用List的成员函数sort进行排序 方法2.用built-in函数sorted进行排序(从2 ...