hello, angular

开始系统学习一下angular!首先是hello world。根据官网给出的例子，我们一下做出下面这个东西：

<!DOCTYPE html>
<html ng-app>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="angular.js"></script>
        <script>
            function aaaCtrl($scope) {
                $scope.name = "World"
            }
        </script>
    </head>
    <body ng-controller="aaaCtrl">
        <h1>Hello {{name}}!</h1>
    </body>
</html>

这里要注意三个地方：

• 必须指定ng-app，如果页面上只有一个应用，可以匿名
• 根据ng-controller划分ＶＭ的作用域范围
• 如果应用是匿名的，那么可以直接在全局作用域下定义控制器。控制器为一个函数，用于生成VM, 要求函数名必须以Ctrl结束，并且它的第一个参数必须叫做$scope，否则报错，因为它是基于静态编译，取其toString()来注入各种服务与处理依赖关系。

但上面这种方式基本不可能用于生产环境，我们看下面的例子：

<!DOCTYPE html>
<html ng-app="test">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="angular.js"></script>
          <script>
            angular.module("test",[]).controller("aaaCtrl",function($scope){
                $scope.name = "World"
            })
        </script>
    </head>
    <body ng-controller="aaaCtrl">
         <h1>Hello {{name}}!</h1>
    </body>
</html>

这时控制器可以随便命名，但第一个参数还是要叫$scope

这是输出结果，其中最重要的是{{}}插值表达式。

{{}}插值表达式相当于knockout的text绑定或avalon的ms-text绑定，当然avalon也可以直接用{{}}插值表达式。它是用于填空文本，当我们要填空HTML时，就要用到另一种绑定了，这在knockout可以用html绑定，avalon可以用{{xxx|html}}或ms-html绑定。在angular, ng-bind-html好像不能用了(看评论，是出ＢＵＧ了，但至今还没有修复好，此绑定会删提所有内联事件与script标签)，但可以用ng-bind-html-unsafe。此外还有一个ng-bind, 它的效果同{{}} 插值表达式。但对于HTML绑定，它都依赖于某一个元素节点，不能做到avalon的{{xxx|html}}的效果。我们可以在这里看实时运行效果，点我

pw:ruby

<!DOCTYPE html>
<html ng-app="test">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="angular.js"></script>
        <script>
            angular.module("test", []).controller("aaaCtrl", function($scope) {
                $scope.xxx = "<strong>dddd</strong>"
            })
        </script>
    </head>
    <body ng-controller="aaaCtrl">
        1<p>{{xxx}}</p>
        2<p ng-bind-html-unsafe="xxx"></p>
        3<p ng-bind-html="xxx"></p>
        4<p ng-bind="xxx"></p>
        <hr/>
    </body>
</html>

循环渲染一组数组

<!DOCTYPE html>
<html ng-app="test">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="angular.js"></script>
        <script>
        //angular会对函数进行静态编译，但那些参数可能被压缩掉，
        //因此我们需要在函数前添加相关的服务名,这里不能直接用setTimeout，要用$timeout服务，
        //总之angular这样的隐性知识非常多，是目前最难上手的框架，自己制头造了许多概念
            angular.module("test", []).controller("aaaCtrl", ["$scope", "$timeout", function($scope, $timeout) {
                    $scope.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
                    $timeout(function() {
                        $scope.friends.push({name: "add", age: 10})
                    }, 1000)
            }])
            //如果不担心被压缩可以这样
            //angular.module("test", []).controller("aaaCtrl", function($scope, $timeout) {
            //    $scope.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
            //    $timeout(function() {
            //        $scope.friends.push({name: "add", age: 10})
            //    }, 1000)
            //})

        </script>
    </head>
    <body ng-controller="aaaCtrl">
        I have {{friends.length}} friends. They are:
        <ul>
            <li ng-repeat="friend in friends">
                [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
            </li>
        </ul>
    </body>
</html>

如果不想用$timeout服务，可以这样写

<!DOCTYPE html>
<html ng-app="test">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="angular.js"></script>
        <script>
            var a
            angular.module("test", []).controller("aaaCtrl", ["$scope", "$timeout", function($scope, $timeout) {
                    $scope.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
                    a = $scope
                }])
            setTimeout(function() {
                a.friends.push({name: "dsfs", age: 44})
                a.$digest()//这个不能漏
            }, 1000)

        </script>
    </head>
    <body ng-controller="aaaCtrl">
        I have {{friends.length}} friends. They are:
        <ul>
            <li ng-repeat="friend in friends">
                [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
            </li>
        </ul>
    </body>
</html>

如果用avalon是这样实现的

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js"></script>
        <script>
            var a = avalon.define("aaa", function(vm) {
                vm.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
            })
            setTimeout(function() {
                a.friends.push({name: "dsfs", age: 44})
            }, 1000)

        </script>
    </head>
    <body ms-controller="aaa">
        I have {{friends.length}} friends. They are:
        <ul ms-each-friend="friends">
            <li >
                [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
            </li>
        </ul>
    </body>
</html>

事件绑定

<!DOCTYPE html>
<html ng-app="test">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="angular.js"></script>
        <script>
            angular.module("test", []).controller("SpicyCtrl", function($scope) {
                $scope.spice = 'very';
                $scope.chiliSpicy = function() {
                    $scope.spice = 'chili';
                }
                $scope.jalapenoSpicy = function() {
                    $scope.spice = 'jalape?o';
                }
            })
        </script>
    </head>

    <body ng-controller="SpicyCtrl">
        <button ng-click="chiliSpicy()">Chili</button>
        <button ng-click="jalapenoSpicy()">Jalape?o</button>
        <p>The food is {{spice}} spicy!</p>
    </body>
</html>

avalon的实现与它大同小异

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js"></script>
        <script>
            avalon.define("SpicyCtrl", function($scope) {
                $scope.spice = 'very';
                $scope.chiliSpicy = function() {
                    $scope.spice = 'chili';
                }
                $scope.jalapenoSpicy = function() {
                    $scope.spice = 'jalape?o';
                }
            })
        </script>
    </head>

    <body ms-controller="SpicyCtrl">
        <button ms-click="chiliSpicy">Chili</button>
        <button ms-click="jalapenoSpicy">Jalape?o</button>
        <p>The food is {{spice}} spicy!</p>
    </body>
</html>

创建一个服务

所谓“服务”者，其实类似于jQuery插件这样的东西，但angular需要以“注入”方式来调用的这些功能（说句不好听的，因此害怕压缩让其静态编译失败，才用到这么绕的方式）

我们看如何创建一个应用。有两种方式，都需要调用angular.module实例的一些方法生成。

var myModule = angular.module(‘app’,[]);
//使用实例的factory方法
myModule.factory(‘serviceName’,function() {
       var someService;
       //工厂方法体，构建someService
       return someService;

});

angular.module(‘app’,[],function($provide) {
//使用$provide服务的factory方法
       $provide.factory(‘serviceId’,function() {
              var someService;
              //工厂方法体，构建someService
              return someService;
        });
});

示例：

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
    <head>
        <meta charset="UTF-8">
        <title>services</title>
    </head>
    <body>
        <div ng-controller="MyController">
            <input type="text" ng-model="msg"/>
            <button ng-click="saveMsg()">保存信息</button>
            <ul>
                <li ng-repeat="msg in msgs">{{msg}}</li>
            </ul>
        </div>
        <script src="angular.js" ></script>
        <script type="text/javascript">
            var app = angular.module("MainApp", [])
            app.factory("$notify", ["$window", "$timeout", function(win, timeout) {
                    var msgs = [];
                    return function(msg) {
                        msgs.push(msg);
                        //只有等到消息条数到达３条时，才一起弹出来
                        if (msgs.length == 3) {
                            timeout(function() {
                                win.alert(msgs.join("\n"));
                                msgs = [];
                            }, 10);
                        }
                    }
                }])

            app.controller("MyController",["$scope", "$notify", function($scope, $notify) {
                $scope.msgs = [];
                $scope.msg = ""
                $scope.saveMsg = function() {
                    $scope.msgs.push($scope.msg);//这里的$scope可改成this
                    $notify($scope.msg);
                    $scope.msg = "";
                };
            }]);
        </script>
    </body>
</html>

websocket服务

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
    <head>
        <meta charset="UTF-8">
        <title>services</title>
    </head>
    <body>
        <div ng-controller="MyController">
            <input type="text" ng-model="msg"/>
            <button ng-click="saveMsg()">保存信息</button>
            <ul>
                <li ng-repeat="msg in msgs">{{msg}}</li>
            </ul>
        </div>
        <script src="angular.js" ></script>
        <script src="jquery2.02.js" ></script>
        <script type="text/javascript">
            var app = angular.module("MainApp", [])
            app.factory("$socket", ["$window", "$timeout", function($window, $timeout) {
                    return function(obj) {
                        obj.open = obj.open || function() {
                            console.log("open websocket")
                        }
                        obj.close = obj.close || function() {
                            console.log("close websocket")
                        }
                        obj.timeout = obj.timeout || 1000
                        obj.maxTime = obj.maxTime || 10
                        var flag = false;
                        if (flag && $window.WebSocket) {
                            var wsServer = 'ws://' + document.domain + "/" + obj.url.replace(/^\//, "")
                            var websocket = new WebSocket(wsServer)
                            websocket.onopen = obj.open
                            websocket.onclose = obj.close
                            websocket.onmessage = function(e) {
                                obj.success(e.data)
                            }
                            websocket.onerror = function(e) {
                                obj.error(e)
                            }
                        }
                        else {
                            var success = obj.success
                            delete obj.success
                            var error = obj.error
                            delete obj.error
                            var errorTime = 0
                            function callback() {
                                $.ajax(obj).done(function() {
                                    success.apply(this, arguments)
                                    promise = $timeout(callback, obj.timeout);
                                }).fail(function(a, b) {
                                    errorTime++
                                    if (errorTime > obj.maxTime) {
                                        arguments[1] = "unconnect"
                                    }
                                    error.apply(this, arguments)
                                    if (errorTime > obj.maxTime || b == "timeout") {
                                        $timeout.cancel(promise)
                                        obj.close()
                                    } else {
                                        promise = $timeout(callback, obj.timeout);
                                    }
                                })
                            }
                            var promise = $timeout(callback, obj.timeout);
                            obj.open()
                        }
                    }
                }])

            app.controller("MyController", ["$scope", "$socket", function($scope, $socket) {
                    $scope.msgs = [];
                    $scope.msg = ""
                    $scope.saveMsg = function() {
                        $socket({url: "/resource/region/list", success: function() {
                                console.log(arguments)
                            }, error: function() {
                                console.log(arguments)
                            }})
                    };
                }]);
        </script>
    </body>
</html>

更多关于websocket的东西