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    https://files.cnblogs.com/files/jquery-angular/AngularTest.zip