刚学没多久，作了一个小项目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. hibernate查询方式

    hibernate查询方式:1.本地SQL查询 2.HQL查询 3.QBC查询 HQL查询:是面向对象的查询语言,是使用最广的一种查询方法 QBC查询:Query by Criteria是一套接口来实 ...

  2. 01_蚂蚁感冒(第五届蓝桥预赛本科B组第8题 nyoj 990)

    问题来源:第五届蓝桥预赛本科B组第8题 问题描述:有在一条定长(100cm)的直杆上有n(1<n<50)只蚂蚁(每只蚂蚁的起点都不一样),他们都以相同的速度(1cm/s)向左或者向右爬,  ...

  3. log4j日志优先级问题的后续

    前文:http://www.cnblogs.com/chyu/p/4280440.html 出现一处吐槽失误,当时还想怎么会设置成warn级别.. <appender name="ST ...

  4. 【Android Demo】悬浮窗体实现

    突然对悬浮窗体感兴趣,查资料做了个小Demo,效果是点击按钮后,关闭当前Activity,显示悬浮窗口,窗口可以拖动,双击后消失.效果图如下: 它的使用原理很简单,就是借用了WindowManager ...

  5. java 空指针异常(java.lang.NullPointerException)

    在Java中对值为null的指针调用任何方法,就会引发空指针异常(java.lang.NullPointerException).空指针异常绝对 是Java中最难查找和调试的一种异常,你永远无法得到任 ...

  6. HDU 4964 Emmet --模拟

    题意:给你一个字符串,要求把它按语法转化成HTML格式. 分析:这题其实不难,就是一个递归的事情,当时忽略了括号嵌套的情况,所以一直WA,后来加上这种情况后就过了.简直醉了. 处理id和class时, ...

  7. 在3D Max中查看模型引用的贴图

    需求 假如在Max中有一个模型,想查看贴图 操作步骤 1.右上角点击 2.在弹出材质编辑器中 点击吸管 3.把吸管点击在角色模型上,然后点击M 4.点击查看图像 5.就能查看到模型使用的贴图

  8. Java 枚举活用

    /** * 联盟神兽.神兽资源枚举 * * @author TonyCody * @author 13-9-22 * @time 下午5:35 */ public enum LegionDogzTyp ...

  9. smarty插件开发代替注册插件方法registerPlugin

  10. DevExpress主从表 按组分页一组不足一页为一页--以此记录

    本文的主要是说明Dev的报表的主从表,主从表的每一组显示在一页,当一组超出一页,第二页只显示第一组的. 一.每上报表设置图 简单设计图如上 二.后台代码 报表页代码 public partial cl ...