angular實例教程(用來熟悉指令和過濾器的編寫) - diligenceday－IT工程師數位筆記本

文章出處

　　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>