Ionic 动态配置url路由的设置

随着Ionic App功能的不断增加，需要路由的url设置就越来越多，不喜欢在config函数中写一堆硬代码，一则不美，二则维护起来也麻烦，能不能把这些数据独立出来呢？

经过查找资料与各种实验，最终找出了可行的方案，在此记录并分享。

1.声明全局性的变量，尤其是 $stateProviderRef变量

var $stateProviderRef = null;
 
var app = angular.module("ionicApp", ["ionic","ui.router", "ionicApp.services", "ionicApp.controllers"]);

2.config函数中设置延迟加载，并初始化变量$stateProviderRef

app.config(function($locationProvider,$stateProvider, $urlRouterProvider)
{
  /*
       Url replace by dynamic load urls.json 2016.10.25
  */
  $urlRouterProvider.deferIntercept();
  $urlRouterProvider.otherwise('tab/home');
  $locationProvider.html5Mode({enabled: false});
  $stateProviderRef = $stateProvider;
 
})

3.在run函数中使用http访问json文件，加载json文件里面的url路径数据,请注意data/urls.json路径，不要写成/data/urls.json,否则真机上无法加载，此处是一坑。

app.run(function ($http, $urlRouter,$state)
 {
      $http.get("data/urls.json").success(function(data)
      {
        angular.forEach(data, function (value, key)
        {
          $stateProviderRef.state(value.name, value.value);
        });
        /*Configures $urlRouter's listener *after* your custom listener*/
        $urlRouter.sync();
        $urlRouter.listen();
      });
});

对应的urls.json数据内容格式为,每个项目不一样，请根据自己的情况修改对应的数据参数

[
  {
    "name"  :  "tabs",
    "value" :  {
                  "url": "/tab",
                  "abstract": true,
                  "templateUrl": "templates/basic/tabs.html"
                }
  },
  {
    "name"  :  "tabs.home",
    "value" :  {
                  "url": "/home",
                  "views": {
                              "home-tab": {
                                              "templateUrl": "templates/basic/home.html",
                                              "controller": "HomeController"
                                          }
                            }
                }
  },
  {
    "name"  :  "tabs.user",
    "value" :  {
      "url": "/user",
      "views": {
        "user-tab": {
          "templateUrl": "templates/user/user.html",
          "controller": "UserInfoController"
        }
      }
    }
  },
  {
    "name"  :  "login",
    "value" :  {
                  "url": "/login/:flag",
                  "templateUrl": "templates/basic/login.html",
                  "controller": "LoginController"
               }
  },
  {
    "name"  :  "register",
    "value" :  {
                  "url": "/register/:flag",
                  "templateUrl": "templates/basic/register.html",
                  "controller": "RegisterController"
               }
  },
  {
    "name"  :  "extendPage",
    "value" :  {
                  "url": "/extendPage/:link",
                  "templateUrl": "templates/basic/outerHtmlFrame.html",
                  "controller": "OuterHtmlFrameController"
                }
  }
]

然后编译打包发布apk安装测试，实现了根据json文件的配置加载路由，我的app.js文件一下子就清爽了许多。

进一步思考之后，如果我想实现类似腾讯新闻可以配置的方式，即用户自己配置关心的内容(比如娱乐,军事，财经等)，那如何实现呢？

思路是在某个app的地方，用户选中了一些关心的内容，然后保存设定到一个json文件中，app启动的时候再去读取这个文件路由,就像上面的步骤一样。

此处实现的关键点是用户设置后路由马上能否生效的问题，经测试可行。

4.在按钮中设置一个按钮，事件就是将路由加载到$stateProvider变量中

$scope.addUrl = function()
              {
                    var url =  {
                              "name"  :  "testUrl",
                              "value" :  {
                                            "url": "/testUrl",
                                            "templateUrl": "templates/basic/testUrl.html",
                                            "controller": "TestUrlController"
                                          }
                            };
                console.log("add dynamic url");
                $stateProviderRef.state(url.name, url.value);
              };

此url事先并不在之前的urls.json文件中，此处的$stateProviderRef是第1步的全局变量。

5.在另一按钮事件中，测试是否可以马上跳转到这个testUrl.html页面

$scope.goNewUrl= function()
              {
                    console.log("go dynamic url");
                    $state.go("testUrl");
              };

编译打包apk,测试方案可以跳转到testUrl.html页面。

接下来的问题是，将默认的url内容和用户配置的url内容合并到一块customerUrs.json中，下次打开app的时候，加载这个customerUrs.json文件，而不是之前的urls.json.

如何实现在客户端的customerUrs.json的操作呢？研究中.......