I have this configuration
angular.module('BlurAdmin.pages.form', ['ui.select', 'ngSanitize', 'textAngular'])
.config(routeConfig);
/** #ngInject */
function routeConfig($provide, $stateProvider) {
$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions) { // $delegate is the taOptions we are decorating
taOptions.toolbar = [
['pre', 'quote','bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear','justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'insertImage','insertLink', 'insertVideo'],
[]
];
return taOptions;
}]);
$stateProvider
.state('form', {
url: '/form',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
abstract: true,
title: 'Form Elements',
sidebarMeta: {
icon: 'ion-compose',
order: 250,
},
})
.state('form.campaigns', {
url: '/campaigns',
templateUrl: 'app/pages/form/campaigns/campaigns.html',
title: 'Campaigns',
controller: 'CampaignsCtrl',
sidebarMeta: {
order: 0,
},
})
.state('form.campaigns.detail', {
url: '/:label',
// templateUrl: 'app/pages/form/campaigns/campaigns-details.html',
templateUrl: 'app/pages/components/mail/detail/mailDetail.html',
title: 'Campaign and Questions1',
controller: "MailListCtrl",
controllerAs: "listCtrl"
})
no in file campaigns.html i have a link like <p class="bold grey" ui-sref="form.campaigns.detail({id: '123', label: 'aaa'})">CLICK</p>.
Now when i am clicking 'CLICK' just the title of page is changing to Campaign and Questions1 but the template url is still the same i.e campaign.html instead of mailDetail.html
try this below ng-view because ui-view use in ui-router and ng-view use angularjs default router, (if are you using ui-view then you have to install ui-router
template : '<ng-view autoscroll="true" autoscroll-body-top></ng-view>',
Related
I am using Monaco editor with angular 1.6, In my UI I have different tabs(as in [this][1] example) pointing to different html page.
[1]: https://www.w3schools.com/howto/howto_js_tabs.asp I am using Monaco editor, but the problem is it is getting applied(integrated) to the items(text/textbox) only the first tab , if I apply in in other tab other than the first it is not showing up there , this is the bit of my code just to get an idea.
angular.module('sample').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/',
controller: 'MainCtrl'
}).when('/sample1', {
templateUrl: '/sample1',
controller: 'sample1Ctrl'
}).when('/sample2', {
templateUrl: '/sample2',
controller: 'sample2Ctrl',
}).when('/sample3', {
templateUrl: '/sample3',
controller: 'sample3Ctrl'
}).when('/sample4', {
templateUrl: '/sample4',
controller: 'sample4Ctrl'
}).otherwise({
redirectTo: '/'
});
}]);
angular.module('sample').controller('TabCtrl', function ($scope) {
$scope.tabs = [
{
slug: 'sample1',
title: "Register sample1",
content: "sample1"
},{
slug: 'sample2',
title: "Register sample2",
content: 'sample2'
},
{
slug: 'sample3',
title: "Get sample3",
content: "sample3"
},
{
slug: 'sample4',
title: "Register sample4",
content: "sample4"
}
];
});
this is how I am using Monaco editor in the controller
$scope.experimentConfigEditor = monaco.editor.create(document.getElementById('experimentText'), {
value: '',
language: 'json',
minimap: {
enabled: false
}
});
$scope.newExperimentConfigEditor = monaco.editor.create(document.getElementById('newExperimentText'), {
value: '',
language: 'json',
minimap: {
enabled: false
}
});
$scope.getConfigFromDatalensTextEditor = monaco.editor.create(document.getElementById('getText'), {
value: '',
language: 'json',
minimap: {
enabled: false
}
});
and this is the sample html file
<div id="experimentText" name="experimentText" style="width:600px;height:200px;border:1px solid grey" ng-show="experimentText" ng-model="formData. experimentText"></div>
So If I use the controller with Monaco in the first tab then only Monaco is getting applied otherwise it's not working the html elements are coming as an simple elements without Monaco editor in UI.
I have a modular app who have multiple vendor plugins and I need to load only necessary in every view.
This is my routes:
(function() {
'use strict';
angular.module('app.empresas').config(config);
function config($stateProvider, $ocLazyLoadProvider) {
$stateProvider
.state('app.empresas', {
url: '/empresas?Filter',
views: {
'main#': {
template: require('./empresas/empresas.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresas',
bodyClass: '',
requiredLogin: true
}
})
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
template: require('./empresas.view/empresas.view.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
}
})
}
})();
I know how to include oclazyload resources without webpack, but now I need to include specific resources for every view. ¿How can do this?
I solved it using this snippet:
This is a sample of a state
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
templateUrl: '/app/main/apps/empresas/empresas.view/empresas.view.html',
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
},
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
var mod = importAll(require.context('./empresas.view/', true, /\.*$/));
$ocLazyLoad.load({
name: 'app.empresas.view'
});
deferred.resolve(mod);
return deferred.promise;
}]
})
I use this function with require to load entire folder with oclazyload and compile with webpack in a bundle separate file:
function importAll (r) {r.keys().forEach(r);}
I can load css, html, js files in one view without require files one by one
I have the following state in my app:
state('app', {
url: '',
abstract: true,
templateUrl: 'app/shared/layouts/app.html',
controller: 'appController'
});
The app.html layout have those views:
<header id="topbar" ui-view="top"></header>
<section id="content" ui-view="content"></section>
The "top" view is basically the breadcrumb. But in some features, they are more complex and have a lot of buttons, tabs, etc.
So, in my states, I have:
.state("dashboard", {
parent: 'app',
url: '/dashboard',
views: {
'top': { templateUrl: "app/dashboard/top.html" }
'content': { templateUrl: "app/dashboard/dashboard.html" }
},
controller: 'Dashboard as vm',
data: { requireAuth: true }
});
Is there any way to have a default top template in all states, and only if I want, overwrite this template?
I already tried put the default template into the view:
<header id="topbar" ui-view="top">
<ul class="breadcrumb">[...]</ul>
</header>
Works, but give me a lag between state changes (the default top disapears after the custom top has loaded)
Option 1:
Define the layout in the index (or a parent state) and target the named views at the root state
Plunk 1
index.html:
<body ng-app="plunker">
<a ui-sref='app.child1'>Go to child1</a>
<a ui-sref='app.child2'>Go to child</a>
<h1>Hi from unnamed view in app state</h1>
<div ui-view='header'></div>
<div ui-view='content'></div>
</body>
config:
$stateProvider.state('app', {
url: "",
views: {
"header#": {
template: "<h3>Default header template</h3>"
},
"content#": {
template: "<h5>Default content template</h3>"
}
}
}).state('app.child1', {
url: '/child1',
views: {
"header#": {
template: "<small>Header for child1</small>"
},
"content#": {
template: "<a ui-sref='^'>Back to parent</a><h1>child1</h1>"
}
}
}).state('app.child2', {
url: '/child2',
views: {
"header#": {
template: "<small>Header for child2</small>"
},
"content#": {
template: "<a ui-sref='^'>Back to parent</a><h1>child1</h1>"
}
}
});
Option 2
Define the layout in the app state, as well as the default views to plug into the layout
Plunk 2
index.html:
<body ng-app="plunker">
<div ui-view></div>
</body>
config:
$stateProvider.state('app', {
url: "",
views: {
"header#app": {
template: "<h3>Default header template</h3>"
},
"content#app": {
template: "<h5>Default content template</h3>"
},
"#": {
template: "<a ui-sref='.child1'>Go to child1</a>" +
"<a ui-sref='.child2'>Go to child2</a>" +
"<h1>Hi from unnamed view in app state</h1>" +
"<div ui-view='header'></div>" +
"<div ui-view='content'></div>"
}
}
}).state('app.child1', {
url: '/child1',
views: {
"header#app": {
template: "<small>Header for child1</small>"
},
"content#app": {
template: "<a ui-sref='^'>Back to parent</a><h1>child1</h1>"
}
}
}).state('app.child2', {
url: '/child2',
views: {
"header#app": {
template: "<small>Header for child2</small>"
},
"content#app": {
template: "<a ui-sref='^'>Back to parent</a><h1>child2</h1>"
}
}
});
I have the following code. The issue is it isnt showing either view. What am i doing wrong?
.state('app.accessmanager.user.reactivate', {
url: '/reactivate',
Views: {
'': {templateUrl: 'assets/views/accessmanager/reactivate.html'},
title: 'ReActivate User',
icon: 'ti-layout-media-left-alt',
ncyBreadcrumb: {
label: 'ReActivate User'
},
'sideBar': {templateUrl: 'assets/views/partials/AMSidebar.html'}
}
here is the markup.
<div class="sidebar app-aside" id="sidebar" toggleable parent-active-class="app-slide-off" >
<div perfect-scrollbar wheel-propagation="false" suppress-scroll-x="true" class="sidebar-container">
<div ui-view="sideBar"></div>
</div>
</div>
<div class="app-content" ng-class="{loading: loading}">
<header data-ng-include=" 'assets/views/partials/top-navbar.html' " class="navbar navbar-default navbar-static-top"></header>
<div data-ng-include=" 'assets/views/partials/main-content.html' " class="main-content" ></div>
</div>
if I do the following, it will at least display the sidebar but not the main content.
.state('app.access', {
url: '/access',
views: {
'sideBar': {
templateUrl: 'assets/views/partials/AMSidebar.html'
}
},
template: '<div ui-view class="fade-in-up"></div>',
title: 'ACCESS MANAGER',
ncyBreadcrumb: {
label: 'ACCESS MANAGER'
}
})
As a lack of codepen, I can only suppose :
Try to replace :
Views: {
'': {templateUrl: 'assets/views/accessmanager/reactivate.html'},
title: 'ReActivate User',
icon: 'ti-layout-media-left-alt',
ncyBreadcrumb: {
label: 'ReActivate User'
},
'sideBar': {templateUrl: 'assets/views/partials/AMSidebar.html'}
}
with
views: {
'': {templateUrl: 'assets/views/accessmanager/reactivate.html',
title: 'ReActivate User',
icon: 'ti-layout-media-left-alt',
ncyBreadcrumb: {
label: 'ReActivate User'
} // ADDED AFTER EDIT
},
'sideBar': {templateUrl: 'assets/views/partials/AMSidebar.html'}
}
}
I have slightly modified the JSON structure of views:
i figured it out!!!
.state('app.accessmanager.user.reactivate', {
url: '/reactivate',
views: {
'sidebar#app': {templateUrl: 'assets/views/partials/AccessManagerNav.html'},
'': {templateUrl: "assets/views/accessmanager/reactivate.html",
title: 'ReActivate User',
icon: 'ti-layout-media-left-alt',
ncyBreadcrumb: {label: 'ReActivate User'}
}
}
}
Notice the # after sidebar with the app which is the state. Also if you are going to have other attributes you have to enclose them in the {} like I did in the second templateUrl.
I'd like to navigate to the following url through the browser:
http://localhost:9001/jira.
This only works if I add a hash to the url, like this:
http://localhost:9001/#/jira.
I tried setting the html5Mode to true, but this only removes the hash from the url. It still does not allow me to navigate directly to the url.
Here is my code:
grey.config( function( $stateProvider, $provide, $locationProvider ) {
$locationProvider.html5Mode( true ).requireBase( false );
// Set up the different views
$stateProvider
.state('index', {
url: '',
views: {
'jira_filters': {
templateUrl: 'app/partials/jira_filters.html'
},
'ciq_filters': {
templateUrl: 'app/partials/ciq_filters.html'
},
'priority': {
templateUrl: 'app/partials/priority.html'
},
'status': {
templateUrl: 'app/partials/status.html'
},
'rca': {
templateUrl: 'app/partials/rca.html'
},
}
})
.state('jira', {
url: '/jira',
views: {
'jira_filters': {
templateUrl: 'app/partials/jira_filters.html'
},
'ciq_filters': {
templateUrl: 'app/partials/ciq_filters.html'
},
'priority': {
templateUrl: 'app/partials/priority.html'
},
'status': {
templateUrl: 'app/partials/status.html'
},
'rca': {
templateUrl: 'app/partials/rca.html'
},
}
});
});