刚学没多久，作了一个小项目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. MFC添加右键菜单

    本文原创转载请注明作者及出处 本文链接:http://blog.csdn.net/wlsgzl/article/details/42147277 --------------------------- ...

  2. 【原】基于 HAproxy 1.6.3 Keeplived 在 Centos 7 中实现mysql mariadb galera cluster 集群分发读写 —— 上篇

    前言 有一段时间没有写blogs,乘着周末开始整理下haproxy + keeplived 实现 mysql mariadb galera cluster 集群访问环境的搭建工作. 本文集中讲hapr ...

  3. html插入链接

    每个网页都已一个地址,用URL()标识,通常在网站内部创建链接时,通常使用相对地址 内部链接 <a href="链接地址" target="目标窗口的打开方式(-s ...

  4. jsp页面img利用tomcat配置访问服务器绝对路径显示图片

    1.打开tomcat下的server.xml文件,路径\apache-tomcat-7.0.62\conf文件夹下. 2.下<host></host>加入<Context ...

  5. getElementsByName()以及获取checkbox对应文本text，

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Windows Live Writer离线编写博客

    WLW最新版本为2012,官网下载 Windows Live Writer配置步骤 使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结 L ...

  7. [转]jQuery Popup Login and Contact Form

    本文转自:http://www.formget.com/jquery-popup-form/ Pop up forms are the smart way to present your site. ...

  8. Android逆向工程初步（一） 15.4.24

    最近看了看Android的逆向工程,破解的书,像是<Android Hack‘s Book>之类的,感觉挺有意思的,看了看一些smali的语法,试着自己写了个demo玩玩: 1.工具: 最 ...

  9. 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

    一:网页中插入flash代码如下:  当然里面的很多属性可以去掉,根据具体的需求而定.  我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...

  10. python中怎么查看当前工作目录和更改工作目录

    查询当前目录:os.getcwd() 更改当前目录:os.chdir()