AngularJS Navigation #255 | Support Center

john_kattenhorn created 8 years ago

Hi,

Sorry if this sounds like a too simple question :-)

I've extended Tenant but I'd like the edit or create to go to new pages rather than dialogue panel.

I figure I need to modify:

vm.editTenant and vm.createTenant js funcitons in index.js, is there a sample in AbpBoilerPlate that would give me a correct implementation of the navigation.

Thanks

John

9 Answer(s)

0

hikalkan created 8 years ago
Support Team

Hi,

You can create your angular controller and view as normal pages (not like modals) and define a route in app.js (like others). You can use _empty controller and view template as starting point. Then in the user list grid, when user press edit, you can use ui-router to change current state (there are documentation of angular ui-router for that). It should be easy. Please try it and check docs of ui-router. If you can not do, I try to write some sample code snippets for you.

Have a nice day :)

john_kattenhorn created 8 years ago

OK, I've made some headway, but I think I've not done the routing correctly :

if (abp.auth.hasPermission('Pages.Tenants')) {
            $urlRouterProvider.otherwise("/host/tenants"); // Entrance page for the host
            $stateProvider.state('host.tenants', {
                url: '/tenants',
                templateUrl: '~/App/host/views/tenants/index.cshtml',
                menu: 'Organisations'
            });

            $stateProvider.state('host.tenants.create', {
                url: '/tenants/create',
                templateUrl: '~/App/host/views/tenants/create.cshtml'
            });

            $stateProvider.state('host.tenants.edit', {
                url: '/tenants/edit/:tenantId',
                templateUrl: '~/App/host/views/tenants/edit.cshtml'                
            });

        }

On the create button I have:

<div class="col-xs-6 text-right">
            <button ng-if="vm.permissions.create" class="btn btn-primary blue" href="#/tenants/create/"><i class="fa fa-plus"></i> @L("CreateNewTenant")</button>
        </div>

I think I have the navigation routes wrong maybe, I'm just going to have some dinner and then I will come back to it :-)

john_kattenhorn created 8 years ago

So I'm still stuck, I've read up on the ui-router and it looks really clever, I like it but I cannot make it work for me. I get on JS errors it simple refuses to do anything.

Here is the snippet from the app.js

if (abp.auth.hasPermission('Pages.Tenants')) {
            $urlRouterProvider.otherwise("/host/tenants"); // Entrance page for the host
            $stateProvider.state('host.tenants', {
                url: '/tenants',
                templateUrl: '~/App/host/views/tenants/index.cshtml',
                menu: 'Organisations'
            });

            $stateProvider.state('host.tenants.create', {
                url: '/create',
                templateUrl: '~/App/host/views/tenants/create.cshtml'
            });

            $stateProvider.state('host.tenants.edit', {
                url: '/edit/:tenantId',
                templateUrl: '~/App/host/views/tenants/edit.cshtml'                
            });

        }

        if (abp.auth.hasPermission('Pages.Administration.Host.Settings')) {
            $stateProvider.state('host.settings', {
                url: '/settings',
                templateUrl: '~/App/host/views/settings/index.cshtml',
                menu: 'Administration.Settings.Host'
            });
        }

I'm hoping that the nesting of host.tenants and host.tenants.create and host.tenants.edit gove the urls #/host/tenant, #/host/tenant/create and #host/tenant/edit respectively.

This is how I'm trying to call the create function (it doesn't work even if you try the url manually though).

<div class="col-xs-6 text-right">
            <a ng-if="vm.permissions.create" class="btn btn-primary blue" ng-href="#/host/tenants/create/"><i class="fa fa-plus"></i> @L("CreateNewTenant")</a>
        </div>

The Create.cshtml

<div ng-controller="host.views.tenants.create as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>PAGE_NAME</span> <small>PAGE_NAME_INFO</small>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button class="btn btn-primary blue" @*ng-click="vm.doIt1()"*@><i class="fa fa-plus"></i> ACTION_ONE</button>
            <button class="btn btn-primary blue" @*ng-click="vm.doIt2()"*@><i class="fa fa-plus"></i> ACTION_TWO</button>
        </div>
    </div>
    <div class="portlet light">
        <div class="portlet-body">
            <p>PAGE_CONTENT_HERE</p>
        </div>
    </div>
</div>

The create js file :

(function () {

    appModule.controller('host.views.tenants.create', [
         '$scope', '$modal', 'uiGridConstants', 'abp.services.app.tenant',
         function ($scope, $modal, uiGridConstants, tenantService) {
             var vm = this;

             $scope.$on('$viewContentLoaded', function () {
                 Metronic.initAjax();
             });
             

            //start from here...
        }
    ]);
})();

I'd really appreciate some help on this as I've now spent an entire day on this function and it's running late.

Thanks

0

hikalkan created 8 years ago
Support Team

Hi,

I'll check your codes, apply same for me and reply in a short time.

Thanks.
0

john_kattenhorn created 8 years ago

Thanks ever so much, it's probably something to do with my lack of experience for AngularJS but I really appreciate your help.
0

hikalkan created 8 years ago
Support Team

I haven't try it yet but I suppose that I found the reason. You should define an abstract 'host.tenants' state in order to define 'host.tenants.create' state. This is AngularJs stuff, not related to ABP. Or you can simply define your stane as 'host.createTenant'.
0
hikalkan created 8 years ago
Support Team
OK, this route worked for me:

if (abp.auth.hasPermission('Pages.Tenants')) { $urlRouterProvider.otherwise("/host/tenants"); //Entrace page for the host $stateProvider.state('host.tenants', { url: '/tenants', templateUrl: '~/App/host/views/tenants/index.cshtml', menu: 'Tenants' }); $stateProvider.state('host.createTenant', { url: '/tenants/create', templateUrl: '~/App/host/views/tenants/create.cshtml', menu: 'Tenants' }); }

And to go to page either go to #/host/tenants/create or change state (route) like that:

vm.createTenant = function () { $state.go('host.createTenant'); };

(after injecting $state service)

To be able to make a route (state) like 'host.tenants.create', you should make 'host.tenants' abstract but there is a state named 'host.tenants'. So, first change it as 'host.tenants.index' and then create the abstract state.

I suggest to read <a class="postlink" href="https://github.com/angular-ui/ui-router/wiki">https://github.com/angular-ui/ui-router/wiki</a> documentation and learn ui-router better since it's very powerful.
0

john_kattenhorn created 8 years ago

I went with the conversion of the tenants to abstract and it worked a treat!

What is the right way to control navigation on the save and cancel, should I use $state.go ?

Thanks again!

John
0

hikalkan created 8 years ago
Support Team

$state.go is good in javascript side. links is better on html side.

Have a nice day ;)

Have an answer to this question? Log in and write your answer.