AngularJS - UI-router - 如何配置动态视图 [英] AngularJS - UI-router - How to configure dynamic views

问题描述

我很难找到任何关于通过数据库动态使用 ui-router 的文档.课程标准，一切都是硬编码的.

我的 Json:

<预><代码>[{"name": "root","url": "/",父母":"，抽象":真实，意见":[{"name": "header", "templateUrl": "/app/views/header.html"},{"name" :"footer", "templateUrl": "/app/views/footer.html" }]},{"name": "家","网址": "",抽象":假，父母":根"，意见":[{"name": "container@", "templateUrl": "/app/views/content1.html"},{"name" :"left@", "templateUrl": "/app/views/left1.html" }]},{"name": "关于","url": "/关于",抽象":假，父母":根"，意见":[{"name": "container@", "templateUrl": "/app/views/content2.html"},{"name" :"left@", "templateUrl": "/app/views/left2.html" }]}]

我的应用:

'use strict';var $stateProviderRef = null;var $urlRouterProviderRef = null;var app = angular.module('app', ['ngRoute', 'ui.router']);app.factory('menuItems', function ($http) {返回 {全部:函数(){返回 $http({url: '/app/jsonData/efstates.js',方法:'获取'});}};});app.config(function ($locationProvider, $urlRouterProvider, $stateProvider) {$urlRouterProviderRef = $urlRouterProvider;$stateProviderRef = $stateProvider;$locationProvider.html5Mode(false);$urlRouterProviderRef.otherwise("/");});app.run(['$q', '$rootScope', '$state', 'menuItems',功能($q，$rootScope，$state，menuItems){menuItems.all().success(function (data) {angular.forEach(数据，函数(值，键){$stateProviderRef.state(name = value.name, {网址":value.url，父母":value.parent，抽象":value.abstract，意见":{//不想要下面的硬编码，我想循环//通过相应的 json 数组对象并填充状态 &意见//我可以用除了视图之外的所有东西来做到这一点.//第一个循环'header': { 'templateUrl': '/app/views/header.html' },'footer': { 'templateUrl': '/app/views/footer.html' },//第二个循环'left@': { 'templateUrl': '/app/views/left1.html' },'container@': { 'templateUrl': '/app/views/container1.html' },//第三个循环'left@': { 'templateUrl': '/app/views/left2.html' },'container@': { 'templateUrl': '/app/views/container2.html' },}});});$state.go("home");});}]);

我很难动态地配置我的视图.有什么想法吗?

<小时>

更新:

我根据 Radim Köhler 的回答为感兴趣的人制作了一个 Plunker.感谢您的帮助.

我认为 ui-router 是 angular 的事实上的路由器，通过它的动态性，它将使大型应用程序更易于管理.

解决方案

有一个 plunker 展示了我们如何可以动态配置视图..run() 的更新版本将是这样的:

app.run(['$q', '$rootScope', '$state', '$http',函数 ($q, $rootScope, $state, $http){$http.get("myJson.json").成功(功能(数据){angular.forEach(数据，函数(值，键){变量状态 = {网址":value.url，父母":value.parent，抽象":value.abstract，意见":{}};//这里我们配置视图angular.forEach(value.views, 函数(视图){state.views[view.name] = {templateUrl : view.templateUrl,};});$stateProviderRef.state(value.name, state);});$state.go("home");});}]);

检查所有操作这里

I have had difficultly finding any documentation on utilizing the ui-router dynamically via a database. Par for the course, everything is hard coded.

My Json:

[
   {
       "name": "root",
       "url": "/",
       "parent": "",
       "abstract": true,
       "views": [
            {"name": "header", "templateUrl": "/app/views/header.html"},            
            {"name" :"footer", "templateUrl": "/app/views/footer.html" }
       ]
   },
    {
        "name": "home",
        "url": "",
        "abstract" : false,
        "parent": "root",
        "views": [
            {"name": "container@", "templateUrl": "/app/views/content1.html"},            
            {"name" :"left@", "templateUrl": "/app/views/left1.html" }
       ]
    },
    {
        "name": "about",
        "url": "/about",
        "abstract": false,
        "parent": "root",
        "views": [
             {"name": "container@", "templateUrl": "/app/views/content2.html"},            
             {"name" :"left@", "templateUrl": "/app/views/left2.html" }
            ]
    }
]

My App:

'use strict';

var $stateProviderRef = null;
var $urlRouterProviderRef = null;

var app = angular.module('app', ['ngRoute', 'ui.router']);


 app.factory('menuItems', function ($http) {
    return {
      all: function () {
        return $http({
            url: '/app/jsonData/efstates.js',
            method: 'GET'
        });
    }
  };
 });


  app.config(function ($locationProvider, $urlRouterProvider, $stateProvider) {
    $urlRouterProviderRef = $urlRouterProvider;
    $stateProviderRef = $stateProvider;
    $locationProvider.html5Mode(false);
    $urlRouterProviderRef.otherwise("/");
  });


  app.run(['$q', '$rootScope', '$state', 'menuItems',
  function ($q, $rootScope, $state, menuItems) {
      menuItems.all().success(function (data) {
          angular.forEach(data, function (value, key) {                
              $stateProviderRef.state(name = value.name, {
                  "url": value.url,
                  "parent" : value.parent,
                  "abstract": value.abstract,
                  "views": {
                     // do not want the below hard coded, I want to loop
                     // through the respective json array objects and populate state & views 
                     // I can do this with everything but views.

                     // first loop
                     'header': { 'templateUrl': '/app/views/header.html' },
                     'footer': { 'templateUrl': '/app/views/footer.html' },

                     // second loop
                     'left@':  { 'templateUrl': '/app/views/left1.html' },
                     'container@': { 'templateUrl': '/app/views/container1.html' },

                     // third loop
                     'left@':  { 'templateUrl': '/app/views/left2.html' },
                     'container@': { 'templateUrl': '/app/views/container2.html' },
                }
            });
        });
        $state.go("home");
    });
 }]);

I am having difficultly configuring my views dynamically. Any ideas?

---

UPDATE:

I made a Plunker per Radim Köhler's answer for anyone interested. I appreciate the help.

I think ui-router is the defacto router for angular and by being dynamic it will make a large app much easier to manage.

解决方案

There is a plunker showing how we can configure the views dynamically. The updated version of the .run() would be like this:

app.run(['$q', '$rootScope', '$state', '$http',
  function ($q, $rootScope, $state, $http) 
  {
    $http.get("myJson.json")
    .success(function(data)
    {
      angular.forEach(data, function (value, key) 
      { 
          var state = {
            "url": value.url,
            "parent" : value.parent,
            "abstract": value.abstract,
            "views": {}
          };

          // here we configure the views
          angular.forEach(value.views, function (view) 
          {
            state.views[view.name] = {
              templateUrl : view.templateUrl,
            };
          });

          $stateProviderRef.state(value.name, state);
      });
      $state.go("home");    
    });
}]);

Check that all in action here

这篇关于AngularJS - UI-router - 如何配置动态视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！