CODEWITHSUNDEEP
angularjsnestedangular-ui-routerviewmeanjs
user2968425
user2968425

Reputation: 51

Multiple named views associated to CRUD modules

I'm working on a meanjs project. I've my home view, and I would split it in several ui-view

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

And each ui-view must host his respective CRUD module views.

For exemple, if "section1" ui-view is associated to the module "articles", I would that "section1" ui-view contains "list-articles.client.view.html", but when I click on "Create a new article" in this list view, I want that the "create-article.client.view.html" appears in the "section1" ui-view.

EDIT: I have several CRUD modules (one for articles, one for quick news etc ...), and I want that each module has his own part in an unique page.

I suppose that is possible with angularjs ui-router but I don't know how to do it. Thanks a lot for your help.

EDIT 2:

I tried the solution proposed below by Tom, and I'm certainly doing something bad.

In /modules/core/client/views/home.client.view.html, I've an ng-include like this :

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

In /modules/core/client/config/core.client.routes.js, I've added this :

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

(The controller is in the articles modules and defined in the view)

And in /modules/articles/client/views/list-articles.client.view.html, the link to the create page is defined like this :

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

By the way #/articles/add is not well displayed in address bar, I've something like /#%2F/articles/add

But the create page is not loaded in the "ng-include" part, but take the place of the home page (I would have it as a partial view).

What am I doing wrong ? Thanks

Upvotes: 0

Views: 132

Answers (1)

Tom
Tom

Reputation: 4662

Only one ui-view is enough for this case. You can use ui-route plugin, and then by using one <div ui-view> element.

In the route define in AngularJS config, you can do something like this:

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'

        });

    }

Also don't forget to define the Controller inside your app as well.

In your html, if you put this type link in it:

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

It will automatically load your edit.html or add.html when click them.

Of cause you can access the id in edit, like this:

function EditController($scope, $stateParams) {

  var id = $stateParams.id;
}

If you are going to use multiple views in the same page, I recommend that you use ng-include instead, e.g. in your list.html, you can have:

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

And define all routers in one Config file, but inside each sectionNN.html, you can use different view for your purpose.

Upvotes: 1

Related Questions