与 CRUD 模块关联的多个命名视图

Question

我正在做一个 meanjs 项目。我有我的主视图，我会拆分它在几个 ui 视图中

<div ui-view="section1"></div>
<div ui-view="section2"></div>
<div ui-view="section3"></div>

并且每个 ui-view 必须托管他的各自的 CRUD 模块 视图。

例如，如果 "section1" ui-view 关联到 模块 "articles"，我希望 "section1" ui-view 包含 " list-articles.client.view.html"，但是当我在此列表视图中单击“创建新文章”时，我希望 "create-article.client.view.html" 出现在“section1” ui 视图中。

编辑：我有几个 CRUD 模块（一个用于文章，一个用于快速新闻等......），我希望每个模块在一个独特的页面中都有自己的部分。

我想 angularjs ui-router 可以做到这一点，但我不知道该怎么做。非常感谢您的帮助。

编辑 2：

我尝试了 Tom 下面提出的解决方案，但我确实做错了。

在 /modules/core/client/views/home.client.view.html 中，我有一个像这样的 ng-include：

<div ng-include="'/modules/articles/client/views/list-articles.client.view.html'"></div>

在 /modules/core/client/config/core.client.routes.js 中，我添加了这个：

.state('articles.create', {
  url: '/articles/add',
  templateUrl: 'modules/articles/client/views/create-article.client.view.html'
});

（控制器在文章模块中，在视图中定义）

在/modules/articles/client/views/list-articles.client.view.html中，创建页面的链接定义如下：

<a Href="#/articles/add">create one</a>

顺便说一下 #/articles/add 在地址栏中显示不好，我有类似 /#%2F/articles/add

但是创建页面没有加载到“ng-include”部分，而是代替了主页（我会把它作为部分视图）。

我做错了什么？ 谢谢

Answer 1

对于这种情况，只有一个 ui-view 就足够了。您可以使用 ui-route 插件，然后使用一个 <div ui-view> 元素。

在 AngularJS 配置中的路由定义中，你可以这样做：

angular.module('app', [
        'ui.router'
    ]).config(config);


    function config($stateProvider) {

        //$urlRouterProvider.otherwise('/');

        $stateProvider.state('default', {

            url: '',
            templateUrl: '/list.html',
            controller: ListController,
            controllerAs: 'vm'

        }).state('list', {

            url: '/',
            templateUrl: '/list.html',
            controller: ListController,
            controllerAs: 'vm'

        }).state('edit', {

            url: '/edit/:id',
            templateUrl: '/edit.html',
            controller: EditController,
            controllerAs: 'vm'

        }).state('add', {

            url: '/add',
            templateUrl: '/add.html',
            controller: AddController,
            controllerAs: 'vm'

        });

    }

另外不要忘记在您的应用中定义控制器。

在你的html中，如果你把这个类型的链接放在里面：

<a href="#/edit/23">Edit</a>
<a href="#/add">Add</a>

点击后会自动加载你的edit.html或add.html。

当然，您可以在编辑中访问 id，如下所示：

function EditController($scope, $stateParams) {

  var id = $stateParams.id;
}

如果您要在同一页面中使用多个视图，我建议您改用 ng-include，例如在您的 list.html 中，您可以：

<div ng-include src="'/section1.html'"></div>
<div ng-include src="'/section2.html'"></div>
...

并在一个配置文件中定义所有路由器，但在每个 sectionNN.html 中，您可以根据需要使用不同的视图。