angular學習筆記之動態路由

angular自帶的angular-router不支持多級路由，第三方的ui-router是基於state的，雖然支持多級路由，但需要寫N多的state，感覺很不爽有沒有？

其實只要我們搞明白下面幾個問題，自己開發一套路由也是很簡單的：

1、當url改變之后，angular如果捕獲到改變事件？

2、如何裝載新的改變事件？

在angular源碼中搜索onUrlChange(~~!竟然真有這個方法)：

  self.onUrlChange = function(callback) {
    // TODO(vojta): refactor to use node's syntax for events
    if (!urlChangeInit) {
      // We listen on both (hashchange/popstate) when available, as some browsers (e.g. Opera)
      // don't fire popstate when user change the address bar and don't fire hashchange when url
      // changed by push/replaceState

      // html5 history api - popstate event
      if ($sniffer.history) jqLite(window).on('popstate', cacheStateAndFireUrlChange);
      // hashchange event
      jqLite(window).on('hashchange', cacheStateAndFireUrlChange);

      urlChangeInit = true;
    }

    urlChangeListeners.push(callback);
    return callback;
  };

兩個事件popstate,hashchange 。第一個問題就解決了。

再次搜索onUrlChange:

    $browser.onUrlChange(function(newUrl, newState) {//11368行

在這個方法中，我們可以找到兩個通知事件：$locationChangeSuccess，$locationChangeStart，一個是開始改變事件，和改變成功之后的事件，第二個問題也解決。

加上上一篇的動態試圖，再做動態路由就很簡單了。

//ui nodule   pageview  view
(function () {
    var app = angular.module("ui", []);
    //定義個pageview 用於直接綁定頁面
    app.directive("pageView", ["$compile", "$location", function ($compile, $location) {
        return {
            restrict: "E",
            link: function (scope, element, attrs) { 
                scope.$on('$locationChangeSuccess', function () {
                    setTimeout(function () {
                        var url = angular.lowercase($location.$$path);
                        var cacheUrl = $(element).data("url");
                        if (cacheUrl == undefined || url != cacheUrl) {
                            $(element).load(url, function () {
                                if ($(element).contents().length > 0) {
                                    angular.compileView($(element).contents());
                                    scope.$broadcast("$locationChangeSuccess");
                                }
                            });
                            $(element).data("url", url);
                        }
                    }, 0);
                }); 
            }
        };
    }]);
    //定義一個uiview，通過自定義的路由表達式來綁定相應頁面
    app.directive("uiView", ["$compile", "$location", function ($compile, $location) {
        return {
            restrict: "E",
            scope: {
                view: "@",
                exp: "@"
            },
            link: function (scope, element, attrs) {
                scope.$on('$locationChangeSuccess', function () {
                    setTimeout(function () {
                        var path = $.getUrlParam(scope.view);// getUrlParam(scope.view);
                        var url = scope.exp.replace("{view}", path);
                        var cacheUrl = $(element).data("url");
                        if (cacheUrl == undefined || url != cacheUrl) {
                            $(element).load(url, function () {
                                if ($(element).contents().length > 0) {
                                    angular.compileView($(element).contents());
                                    scope.$broadcast("$locationChangeSuccess");
                                }
                            });
                            $(element).data("url", url);
                        }
                    }, 0);
                });
            }
        };
    }]);
})();

demo    http://files.cnblogs.com/files/jquery-angular/AngularTest.zip