anglar实例教程(用来熟悉指令和过滤器的编写)

  angular的插件太少了,  所以很多指令过滤器都要自己写,  所以对指令传进来的参数, 以及angular编译的流程更加熟悉才行写出好的插件, 有些简单的指令是参考angularUI里面, 作为自己的angular指令笔记;

  1:angular的字符串截取指令

  2:angular的国际化

  3:angular的xhr案例

  4:自己写angular中的for指令书写;

  第一个是truncate, 这就是溢出隐藏的效果, css中是通过text-overflow:ellipsis; overflow:hidden; display:block 实现的, 如果JS要实现这些效果,也很简单, 现在通过angular的指令实现了, 感觉爽爽哒, 因为是在chrome下写的demo所以没有做别的浏览器兼容,chrome的开发工具太强大了啦 , 自己点击打开即可查看啦, 啦啦啦, 你懂的, 为什么要这么多"啦"啦;

<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
    </head>
<body ng-controller="test0Controller">
    <ul>
        <li ng-repeat="s in strs">
            {{s | characters:8}}
        </li>
    </ul>
    <script type="text/javascript">
        var app = angular.module("app",["truncate"]);
        app.controller("test0Controller" , function($scope) {
            $scope.strs = [
                "test0Controller",
                "test20Con2troller1",
                "2test20Controller2",
                "tes2t0Contr2oller"
            ];
        });
        angular.module("truncate",function(){})
        .    filter("characters",function(){
            return function(input , number) {
                return typeof input === "string" ?
                    input.length < number ?
                    input : (input.slice(0,number-4) + "....")
                : input
            }
        });
    </script>
</body>
</html>

  angular有个大名鼎鼎的国际化(angular国际化)的插件都知道了,但是用的人不多啊, 如果要自己实现国际化该如何实现呢, 可以参考我的指令, 10行代码就足够了;

<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
    </head>
<body>
    <div translatediv ng-controller="tr">
        {{hehe}}//
        <br>
        <button ng-click="setLanguage(‘ch‘)">
            ch
        </button>
        <button ng-click="setLanguage(‘en‘)">
            en
        </button>
        <button ng-click="setLanguage(‘default‘)">
            default
        </button>
    </div>

    <script type="text/javascript">
        var app = angular.module("app",["translate"]);
        app.controller("tr", function($scope,$timeout) {
            $scope.trans = {
                en : {"hehe" : "enenen"},
                ch : {"hehe" : "chchch"},
                default : {"hehe" : "nimo"}
            };
        });
        angular.module("translate",function() {})
        .factory("cache", function() {
            var arr = [];
            return {
                set : function(arg) {arr.push(arg); return arr.splite(arr.indexOf(arg),1) },
                del : function(arg) { return arg === arr.splite(arr.indexOf(arg),1)  }
            }
        })
        .directive("translatediv",["cache","$timeout",function(cache,$timeout) {
            return {
                link : function($scope, $elem, $attr) {
                    var trans = $scope.trans;
                    $scope.setLanguage = function(arg) {
                        //alert($scope)
                        for(var prop in trans) {
                            if(arg === prop) {
                                for(var nameVar in trans[prop]) {
                                    $scope[nameVar] = trans[prop][nameVar];
                                };
                            };
                        };
                    };

                    $timeout(function(){
                        $scope.setLanguage("default");
                    },0);
                }
            }
        }])
    </script>
</body>
</html>

  实现要说的是filltext这个网站真心不错,老外真是无聊到家了, 前台只要请求一个url就返回一堆假数据(mock),比如:http://filltext.com/?rows=10&fname={firstName}&lname={lastName}&callback=JSON_CALLBACK , 这个例子非常简单, 话说angular和jQ思想真的差别很大啊;

<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
    </head>
<body>
    <div ng-controller="refresh">
        <angular-refresh url="http://filltext.com/?rows=10&fname={firstName}&lname={lastName}&callback=JSON_CALLBACK" ng-model="people" interval="5000" method="jsonp">
        </angular-refresh>
        <ul ng-repeat="person in people">
            <li>{{person.fname}} {{person.lname}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("refresh", function() {

        });
        app.directive("angularRefresh",function($http,$timeout,$parse) {
            return {
                restrict : "AE",
                transclude : true,
                template : "<div></div>",
                compile : function(elem, attrs) {
                    var interval = attrs.interval;
                    return function($scope, $elem, $attrs ) {
                        var xhr = function() {
                            $http[$attrs.method]($attrs.url).then(function(data){
                                $parse($attrs.ngModel).assign($scope,data.data);
                            },function(){alert("wrong")})
                        };

                        $timeout(function() {
                            xhr();
                        }, parseInt($attrs.interval) || 5000 );
                    }
                }
            }
        });
    </script>
</body>
</html>

  angular中的for指令真是太好用了, 如果自己实现一个岂不是更好。 其实angular最厉害还是双向绑定, 和指令联合在一起 ,从另一种方面来说就是:“酷炫”:

<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
    </head>
<body>
    //自定义指令实现forin循环
    <div ng-controller="forin">
        <div>
            {{xs | json}}
        </div>
        <for x in xs>
            <p>{{ x }}</p>
        </for>
        <button ng-click="xs = [1,2,3,4,5,6,7,8]">change</button>
    </div>
    <script type="text/javascript">
        var app = angular.module("app", []);

        app.controller("forin", function( $scope ) {
            $scope.xs = ["0adsf22","1sdf","sdf2","3adsf","4sdf"];
        });
        app.directive("for", function($compile) {
            return {
                restrict : "AE",
                replace : true,
                compile : function(ele, attrs, cloneTransclude) {
                    var outerHTML = ele.get(0).outerHTML;
                    //debugger;
                    var regResult = outerHTML.match(/for([\s\w=\"]*)in([\s\w=\"]*)/i);
                    var prop  = regResult[1].match(/[a-z]/g).join("");
                    var props  = regResult[2].match(/[a-z]/g).join("");
                    var compile = $compile(ele.html())
                    ele.empty();
                    return function($sc, $ele, $attrs) {
                        //这个有报了一个undefined, 不知道是什么原因, 你们知道的话指导我下;

                        //监听这个对象是否发生改变;
                        $sc.watch(props,function() {
                            for(var i=0, len = $sc[props].length ;i<len;i++) {
                                var newSc = $sc.$new();
                                newSc[prop] = $sc[props][i];
                                var node = compile(newSc,angular.noop);
                                $ele.append(node);
                            };
                        });
                    }
                }
            }
        });
    </script>
</body>
</html>

  上次大概浏览了angular的源代码, 对写出更好的指令还是有帮助的, 就像用jq看jQ源码一样的。

时间: 2024-09-29 01:06:01

anglar实例教程(用来熟悉指令和过滤器的编写)的相关文章

Python并发编程实例教程

有关Python中的并发编程实例,主要是对Threading模块的应用,文中自定义了一个Threading类库. 一.简介 我们将一个正在运行的程序称为进程.每个进程都有它自己的系统状态,包含内存状态.打开文件列表.追踪指令执行情况的程序指针以及一个保存局部变量的调用栈.通常情况下,一个进程依照一个单序列控制流顺序执行,这个控制流被称为该进程的主线程.在任何给定的时刻,一个程序只做一件事情. 一个程序可以通过Python库函数中的os或subprocess模块创建新进程(例如os.fork()或

BPEL 实例教程

http://www.oracle.com/technetwork/cn/articles/matjaz-bpel1-090722-zhs.html BPEL 实例教程 作者:Matjaz Juric 了解如何创建一个将一系列虚拟的.与旅行相关的 web 服务结合起来的示例业务流程,然后将其部署到 Oracle BPEL Process Manager 运行时环境. 本文相关下载  示例代码 Oracle BPEL Process Manager 和 Designer 面向 Web 服务的业务流

C#基础与实例教程最简单的C#快速入门教程【转自:http://www.82011433.com/Html/?6982.html】

c#基础与实例教程最简单的C#快速入门教程 在一小时内学会C#.使用例程,简单却完整的探索C#语言的构造和特点.本文特别适合有C++基础却没有太多精力学习C#的读者. 简介 C#是一种具有C++特性,Java样式及BASIC快速建模特性的编程语言.如果你已经知晓C++语言,本文将在不到一小时的时间内带你快速浏览C#的语法.如果熟悉Java语言,Java的编程结构.打包和垃圾回收的概念肯定对你快速学习C#大有帮助.所以我在讨论C#语言构造的时候会假设你知道C++. c#基础与实例教程最简单的C#快

vue.js基础知识篇(1):简介、数据绑定、指令、计算属性、表单控件绑定和过滤器

目录第一章:vue.js是什么? 代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实现了Observer. 2.它与angular.js的区别 相同

React 入门实例教程

React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的

室外设计 3D室外效果图教程 Sketchup园林景观教程 室外漫游动画实例教程 景观设计手绘教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

室内设计 3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

php页面get方法实现ajax,入门实例教程

ajax,入门实例教程 本例针对php页面,做了一个小的demo加深对ajax的理解 1.文档结构: 共有ajax.php 和action.php 2个页面. 2.源码如下: /*ajax.php页面*/<!DOCTYPE html> <html lang="en"> <head> <title> ajax</title> <script type="text/javascript"> func

Omnet++ 4.0 入门实例教程

http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用.照着做就能完成,有些小地方不同而已 Omnet++ 4.0 入门实例教程根据http://omnest.com/webdemo/ide 上的实例,自己动手做了做.新版本的4.0 跟它视频上的版本有些差别,配图说明一下我的操作过程,供大家一起学习.现在开始.首先,开发环境选择simulation 的视