Related
I use Blur Admin to Develop Web App
and I have Service to check permission for each user
how i can hidden menu by permission service in pages.module.js and LVS.module.js
ps. my poor English.
My code
App.js:
'use strict';
var app = angular.module('BlurAdmin', [
'ngAnimate',
'ui.bootstrap',
'ui.sortable',
'ui.router',
'ngTouch',
'toastr',
'smart-table',
"xeditable",
'ui.slimscroll',
'ngJsTree',
'angular-progress-button-styles',
'BlurAdmin.theme',
'BlurAdmin.pages',
'ngRoute',
'ngCookies',
])
;
pages.module.js:
(function () {
'use strict';
angular.module('BlurAdmin.pages', [
'ui.router',
'BlurAdmin.pages.dashboard',
'BlurAdmin.pages.ui',
'BlurAdmin.pages.components',
'BlurAdmin.pages.form',
'BlurAdmin.pages.tables',
'BlurAdmin.pages.charts',
'BlurAdmin.pages.maps',
'BlurAdmin.pages.profile',
'BlurAdmin.pages.Base',
'BlurAdmin.pages.Common',
'BlurAdmin.pages.Home',
'BlurAdmin.pages.MSS',
'BlurAdmin.pages.LVS',
'BlurAdmin.pages.SHS',
'BlurAdmin.pages.OTS',
'BlurAdmin.pages.TCS',
])
.config(routeConfig).run(run);
/** #ngInject */
function routeConfig($urlRouterProvider, baSidebarServiceProvider) {
$urlRouterProvider
.otherwise('Login');
}
})();
LVS.module.js:
(function () {
'use strict';
angular.module('BlurAdmin.pages.LVS', [
])
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('LVS', {
url: '/Leave',
template : '<ui-view></ui-view>',
//controller: 'LeaveManagementCtrl',
abstract: true,
title: 'Leave Management',
sidebarMeta: {
icon: 'ion-android-calendar',
order: 30,
},
resolve: {
user: function (AuthService, $q) {
var d = $q.defer();
if (AuthService.isAuthenticated()) {
// I also provide the user for child controllers
d.resolve(AuthService.UserDomain());
} else {
// here the rejection
d.reject('not logged');
}
return d.promise;
}
},
})
.state('LVS.LeaveList', {
url: '/List',
templateUrl: 'app/pages/ESS-TA/LeaveManagement/LeaveList.html',
controller: 'LVSCtrl',
title: 'Leave List',
params: {
obj: null,
},
sidebarMeta: {
order: 10,
},
})
.state('LVS.LeaveReport', {
url: '/Report',
templateUrl: 'app/pages/ESS-TA/LeaveManagement/LeaveReport.html',
title: 'Leave Report',
sidebarMeta: {
order: 30,
},
});
}
})();
i found this on githut blue admin issue
https://github.com/akveo/blur-admin/issues/141
Here is my angularjs code. I have created different routes but i am unable to resolve my contract.dashboard route. If i remove the route object, it works fine but when i tried to reslove something from my service, it dose not work.
(function() {
'use strict';
angular
.module('app.contracts')
.run(appRun);
var _base = {
// Contract Base Contractor
contract: {
controllerAs: 'c',
controller: ['$scope', '$state', 'ContractModel', function($scope, $state, ContractModel){
'ngInject';
var that = this;
$scope.$watch(function(){ return $state.current.data.mode; }, function() { that.mode = $state.current.data.mode; });
that.contract = new ContractModel();
}]
}
};
/* #ngInject */
function appRun(routerHelper) {
routerHelper.configureStates(getStates());
}
function getStates() {
return [
{
state: 'contract',
config: angular.extend({
abstract: true,
template: '<contract-manager><ui-view/></<contract-manager>',
url: '/contract'
}, _base.contract)
},
{
state: 'contract.new',
config: angular.extend({
url: '/new',
template: '<contract-editor mode="c.mode" contract="c.contract"></<contract-editor>',
title: 'Contract Editor',
data: {
mode: 'new'
}
}, _base.contract)
},
{
state: 'contract.dashboard',
config: angular.extend({
url: '',
template: '<contract-dashboard></contract-dashboard>',
title: 'Contract Dashboard',
data: {
mode:'dashboard'
},
resolve: {
stubs: function(stubs){
return stubs.service.registerGetCustomers();
}
}
}, _base.contract)
}
];
}
})();
I used jhipster to generate my app and I tried to add two different types of forms, that would both use same entity (one wouldn't use all fields in entity and other would use all).
Now, it works alright for:
.state('xyz', {
parent: 'entity',
url: '/xyz',
data: {
authorities: ['ROLE_USER'],
pageTitle: 'xyzs'
},
views: {
'content#': {
templateUrl: 'app/entities/xyz/xyzs.html',
controller: 'XyzController',
controllerAs: 'vm'
}
},
resolve: {
}
}).state('xyz.new', {
parent: 'xyz',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/xyz/xyz-dialog.html',
controller: 'XyzDialogController',
controllerAs: 'vm',
backdrop: 'static',
size: 'lg',
resolve: {
entity: function () {
return {
...
};
}
}
}).result.then(function() {
$state.go('xyz', null, { reload: true });
}, function() {
$state.go('xyz');
});
}]
})
And it works alright, but if I change it a small bit and use:
.state('xyz', {
parent: 'entity',
url: '/xyz',
data: {
authorities: ['ROLE_USER'],
pageTitle: 'xyzs'
},
views: {
'content#': {
templateUrl: 'app/entities/xyz/xyzs.html',
controller: 'XyzController',
controllerAs: 'vm'
}
},
resolve: {
}
}).state('a-xyz.new', {
parent: 'xyz',
url: '/a/new',
data: {
authorities: ['ROLE_USER']
},
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/xyz/a-xyz-dialog.html',
controller: 'XyzDialogController',
controllerAs: 'vm',
backdrop: 'static',
size: 'lg',
resolve: {
entity: function () {
return {
...
};
}
}
}).result.then(function() {
$state.go('xyz', null, { reload: true });
}, function() {
$state.go('xyz');
});
}]
})
And I've change my
ui-sref="xyz.new"
to
ui-sref="a-xyz.new"
in my html template
I'm getting an error:
Error: Could not resolve 'a-xyz.new' from state 'xyz'
transitionTo#http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:3180:17
go#http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:3108:14
clickHook/</transition<#http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4158:9
timeout/timeoutId<#http://localhost:9000/bower_components/angular/angular.js:19157:28
completeOutstandingRequest#http://localhost:9000/bower_components/angular/angular.js:5869:7
Browser/self.defer/timeoutId<#http://localhost:9000/bower_components/angular/angular.js:6145:7
The dot notation is basically used to indicate child state for a parent state. You may refer to this link for better understanding of nested views/states.
Nested Views
Go through this:
Why Parent State must exist
One parent can have multiple child states. So, if your parent state is 'xyz', you can multiple child states as 'xyz.a', 'xyz.b', 'xyz.c' etc.
I have tried to pass locals in BottomSheet Controller
//Bottom Sheet Controller
angular
.module('app').controller('BottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share-arrow' },
{ name: 'Upload', icon: 'upload' },
{ name: 'Copy', icon: 'copy' },
];
$scope.items.append($scope.Item);
console.log($scope.items);
});
//AppCtrl
angular
.module('app').controller('AppCtrl', function($scope, $mdBottomSheet){
$scope.openBottomSheet = function() {
$mdBottomSheet.show({
template:
'<md-bottom-sheet>{{}}</md-bottom-sheet>',
controller: 'BottomSheetCtrl',
scope: $scope.$new(true),
// preserveScope: true,
locals: {
Item: {
'name': 'Print this page', 'icon': 'print'
},
}
});
};
});
But $scope.Item is not populating. What is the correct way of passing locals in BottomSheet Controller?
You have to inject the locals into the bottom sheet controller - CodePen
Markup
<div ng-controller="BottomSheetExample" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<md-button flex="50" class="md-primary md-raised" ng-click="showListBottomSheet()">Show as List</md-button>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet, $mdToast) {
$scope.showListBottomSheet = function() {
$scope.alert = '';
$mdBottomSheet.show({
template: '<md-bottom-sheet ng-cloak>{{Item.name}}</md-bottom-sheet>',
controller: 'ListBottomSheetCtrl',
locals: {
Item: {
'name': 'Print this page', 'icon': 'print'
},
}
}).then(function(clickedItem) {
$scope.alert = clickedItem['name'] + ' clicked!';
});
};
})
.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet, Item) {
console.log(Item);
$scope.Item = Item;
});
Bottom sheet reference
locals - {string=}: An object containing key/value pairs. The keys
will be used as names of values to inject into the controller. For
example, locals: {three: 3} would inject three into the controller
with the value of 3.
As an alternative you can also set the bindToController property to true. This allows accessing locals in the BottomSheetCtrl. So in the BottomSheetCtrl you can then get the value of Item like this:
var Item = this.locals.Item;
JS
//Bottom Sheet Controller
angular
.module('app').controller('BottomSheetCtrl', function($scope,
$mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share-arrow' },
{ name: 'Upload', icon: 'upload' },
{ name: 'Copy', icon: 'copy' },
];
var Item = this.locals.Item;
$scope.items.append(Item);
console.log($scope.items);
});
//AppCtrl
angular
.module('app').controller('AppCtrl', function($scope, $mdBottomSheet){
$scope.openBottomSheet = function() {
$mdBottomSheet.show({
template:
'<md-bottom-sheet>{{}}</md-bottom-sheet>',
controller: 'BottomSheetCtrl',
scope: $scope.$new(true),
bindToController: true,
locals: {
Item: {
'name': 'Print this page', 'icon': 'print'
},
}
});
};
});
Any explanation why the sample code (ui-router/sample/index.html) for angular-ui-router (https://github.com/angular-ui/ui-router) looks like this. Specifically:
Why the nested definitions of objects like controllers?
Why the specification of dependencies like this:
angular.module('sample', ['ui.compat'])
.config(
[ '$stateProvider', '$routeProvider', '$urlRouterProvider',
function ($stateProvider, $routeProvider, $urlRouterProvider) {
thanks
<!doctype html>
<html lang="en" ng-app="sample"><head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style type="text/css">
.fade-enter-setup, .fade-leave-setup {
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.fade-enter-setup,
.fade-leave-setup.fade-leave-start {
opacity: 0;
}
.fade-leave-setup,
.fade-enter-setup.fade-enter-start {
opacity: 1;
}
</style>
<script src="../lib/angular-1.1.4.js"></script>
<script src="../build/angular-ui-router.js"></script>
<!-- could easily use a custom property of the state here instead of 'name' -->
<title ng-bind="$state.current.name + ' - ui-router'">ui-router</title>
</head><body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner"><div class="container">
<a class="brand" href="#">ui-router</a>
<ul class="nav">
<li ng-class="{ active: $state.includes('contacts') }">Contacts</li>
<li ng-class="{ active: $state.includes('about') }">About</li>
</ul>
<p class="navbar-text pull-right" ui-view="hint"></p>
</div></div>
</div>
<div class="container" style="margin-top:60px" ui-view ng-animate="{enter:'fade-enter'}"></div>
<hr>
<pre>
$state = {{$state.current.name}}
$stateParams = {{$stateParams}}
</pre>
</body><script>
function findById(a, id) {
for (var i=0; i<a.length; i++) {
if (a[i].id == id) return a[i];
}
}
angular.module('sample', ['ui.compat'])
.config(
[ '$stateProvider', '$routeProvider', '$urlRouterProvider',
function ($stateProvider, $routeProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/c?id', '/contacts/:id')
.otherwise('/');
$routeProvider
.when('/user/:id', {
redirectTo: '/contacts/:id',
})
.when('/', {
template: '<p class="lead">Welcome to the ngStates sample</p><p>Use the menu above to navigate</p>' +
'<p>Look at Alice or Bob to see a URL with a redirect in action.</p>',
});
$stateProvider
.state('contacts', {
url: '/contacts',
abstract: true,
templateUrl: 'contacts.html',
controller:
[ '$scope', '$state',
function ($scope, $state) {
$scope.contacts = [{
id: 1,
name: "Alice",
items: [{
id: 'a',
type: 'phone number',
value: '555-1234-1234',
},{
id: 'b',
type: 'email',
value: 'alice#mailinator.com',
}],
}, {
id: 42,
name: "Bob",
items: [{
id: 'a',
type: 'blog',
value: 'http://bob.blogger.com',
},{
id: 'b',
type: 'fax',
value: '555-999-9999',
}],
}, {
id: 123,
name: "Eve",
items: [{
id: 'a',
type: 'full name',
value: 'Eve Adamsdottir',
}],
}];
$scope.goToRandom = function () {
var contacts = $scope.contacts, id;
do {
id = contacts[Math.floor(contacts.length * Math.random())].id;
} while (id == $state.params.contactId);
$state.transitionTo('contacts.detail', { contactId: id });
};
}],
})
.state('contacts.list', {
// parent: 'contacts',
url: '',
templateUrl: 'contacts.list.html',
})
.state('contacts.detail', {
// parent: 'contacts',
url: '/{contactId}',
resolve: {
something:
[ '$timeout', '$stateParams',
function ($timeout, $stateParams) {
return $timeout(function () { return "Asynchronously resolved data (" + $stateParams.contactId + ")" }, 10);
}],
},
views: {
'': {
templateUrl: 'contacts.detail.html',
controller:
[ '$scope', '$stateParams', 'something',
function ($scope, $stateParams, something) {
$scope.something = something;
$scope.contact = findById($scope.contacts, $stateParams.contactId);
}],
},
'hint#': {
template: 'This is contacts.detail populating the view "hint#"',
},
'menu': {
templateProvider:
[ '$stateParams',
function ($stateParams){
// This is just to demonstrate that $stateParams injection works for templateProvider
// $stateParams are the parameters for the new state we're transitioning to, even
// though the global '$stateParams' has not been updated yet.
return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
}],
},
},
})
.state('contacts.detail.item', {
// parent: 'contacts.detail',
url: '/item/:itemId',
views: {
'': {
templateUrl: 'contacts.detail.item.html',
controller:
[ '$scope', '$stateParams', '$state',
function ($scope, $stateParams, $state) {
$scope.item = findById($scope.contact.items, $stateParams.itemId);
$scope.edit = function () {
$state.transitionTo('contacts.detail.item.edit', $stateParams);
};
}],
},
'hint#': {
template: 'Overriding the view "hint#"',
},
},
})
.state('contacts.detail.item.edit', {
views: {
'#contacts.detail': {
templateUrl: 'contacts.detail.item.edit.html',
controller:
[ '$scope', '$stateParams', '$state',
function ($scope, $stateParams, $state) {
$scope.item = findById($scope.contact.items, $stateParams.itemId);
$scope.done = function () {
$state.transitionTo('contacts.detail.item', $stateParams);
};
}],
},
},
})
.state('about', {
url: '/about',
templateProvider:
[ '$timeout',
function ($timeout) {
return $timeout(function () { return "Hello world" }, 100);
}],
})
.state('empty', {
url: '/empty',
templateUrl: 'empty.html',
controller:
[ '$scope', '$state',
function ($scope, $state) {
// Using an object to access it via ng-model from child scope
$scope.data = {
initialViewTitle: "I am an initial view"
}
$scope.changeInitialViewTitle = function($event) {
$state.transitionTo('empty.emptycontent');
};
$scope.showInitialView = function($event) {
$state.transitionTo('empty');
};
}]
})
.state('empty.emptycontent', {
url: '/content',
views: {
'emptycontent': {
templateUrl: 'empty.content.html'
}
}
});
}])
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
</script></html>
ui-router doesn't fully support this. You may check this library for nested routing: http://angular-route-segment.com
It provides the functionality for creating tree-like routing hierarchy which can be changed without losing the state.
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id', 's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2', 's2').
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
within().
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
within().
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
up().
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
up().
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});
The nesting is only one way of doing the example. you could write
'navTitle#': {
templateUrl : 'pages/mypage.html',
controller: 'myController',
},
and then just define myController anywhere else you want in your app.
function myController ($scope) {
};
as far as dependencies question...thats one way of injecting in dependancies in angular so you can reuse the code in other places.
.factory('appLoading', function($rootScope, $state) {
return {
loading : function() {
$rootScope.status = 'loading';
if(!$rootScope.$$phase) $rootScope.$apply();
},
ready : function(delay) {
function ready() {
$rootScope.status = 'ready';
$rootScope.title = $state.current.data.title;
if(!$rootScope.$$phase) $rootScope.$apply();
}
}
};
})
then if i wanted to call this loader in a module it would go inside []
like inside the onExit of a state inside ui-router...
onExit: ['appLoading',
function ( appLoading) {
appLoading.loading();
}],