@arvand-owji
I'm going to recommend a hybrid approach. Use a userModule.js file like this, you can add it from the UI settings page. We are going to add a parent state which you can then nest custom pages inside of. The myApp.home state etc will be nested inside the <div ui-view> element of the myApp state. The "page" that is linked to from the myApp state is the menu,
define(['angular', 'require'], function(angular, require) {
'use strict';
var userModule = angular.module('userModule', ['maUiApp']);
userModule.config(['maUiMenuProvider', (maUiMenuProvider) => {
maUiMenuProvider.registerMenuItems([{
name: 'myApp',
url: '/my-app',
template: '<ma-ui-page-view xid="d012dd15-0b4e-4539-8e8a-e0235c08411d"></ma-ui-page-view><div ui-view></div>',
menuText: 'My app base',
//menuHidden: true,
abstract: true
}]);
}]);
return userModule;
}); // define
Menu "page":
<div class="ma-designer-root" id="cd40a324-2725-42fa-9778-12255ebb5a62" style="width: 1024px; height: 48px; position: relative;">
<ma-button id="54f9db80-3064-4c61-8db4-59380f86df6e" style="position: absolute; left: 104px; top: 0px;" icon="android" label="Page 1" raised="true" palette="accent" ui-sref="myApp.page1"></ma-button>
<ma-button id="7bd73a7c-6923-4e3d-93e2-85c2d4cf3f25" style="position: absolute; left: 0px; top: 0px;" icon="home" label="Home" raised="true" palette="primary" ui-sref="myApp.home"></ma-button>
</div>
Home page, page 1 etc.. Create pages as desired then add menu icons for them, making sure to choose "My app base" as their parent.
