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
Related
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'm new with angularJs and i want to inject a list of string that i get it using a restful web service into a jSON list.
And how can the connections list could proceed object returned by getAllConnectedApp.
angular
.module('theme.core.navigation_controller', ['theme.core.services'])
.controller('NavigationController', ['$scope', '$location', '$timeout', '$filter', '$http', '$cookieStore', '$interval',
function($scope, $location, $timeout, filter, $http, $cookieStore, $interval) {
'use strict';
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.connections = [];
$scope.menu = [{
label: 'HOME',
iconClasses: 'glyphicon glyphicon-home',
url: '#/'
}, {
label: 'ORACLE MONITORING',
iconClasses: 'glyphicon glyphicon-unchecked',
children: [{
label: 'SESSIONS',
url: '#/general'
}, {
label: 'ADVANCED MONITORING',
url: '#/advanced-monitoring'
}, {
label: 'CONFIGURATION',
url: '#/configuration'
}]
}, {
label: 'CODE TRACER',
iconClasses: 'glyphicon glyphicon-check',
children: [{
label: 'ADD CONNECTION',
url: '#/addConnectionApp'
},
for (var i = 0; i < $scope.connections.length; i++) {
{
label: $scope.connections[i],
url: '#/codetracer',
}
}
]
//url: '#/codetracer'
}];
$scope.getAllConnectedApp = function() {
console.log("GET ALL CONNECTED APPLICATIONS...");
$http.get("http://localhost:8090/api/personne/allConnection")
.success(function(connections) {
console.log(connections);
$scope.connections = connections;
});
};
}
]);
you have got syntax error over there, you can't have a loop inside object literal definition.
also, you portably want to update the menu only after getting back the response from the sever.
because your code was illogical as by the time you execute the loop, scope.connections is still an empty array.
something like this:
angular
.module('theme.core.navigation_controller', ['theme.core.services'])
.controller('NavigationController', ['$scope', '$location', '$timeout', '$filter', '$http', '$cookieStore', '$interval',
function ($scope, $location, $timeout, filter, $http, $cookieStore, $interval) {
'use strict';
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.connections = [];
var connectionsMenu = [{
label: 'ADD CONNECTION',
url: '#/addConnectionApp'
}];
$scope.menu = [{
label: 'HOME',
iconClasses: 'glyphicon glyphicon-home',
url: '#/'
}, {
label: 'ORACLE MONITORING',
iconClasses: 'glyphicon glyphicon-unchecked',
children: [{
label: 'SESSIONS',
url: '#/general'
}, {
label: 'ADVANCED MONITORING',
url: '#/advanced-monitoring'
}, {
label: 'CONFIGURATION',
url: '#/configuration'
}]
}, {
label: 'CODE TRACER',
iconClasses: 'glyphicon glyphicon-check',
children: [connectionsMenu]
//url: '#/codetracer'
}];
$scope.getAllConnectedApp = function () {
console.log("GET ALL CONNECTED APPLICATIONS...");
$http.get("http://localhost:8090/api/personne/allConnection")
.success(function (connections) {
console.log(connections);
$scope.connections = connections;
for (var i = 0; i < connections.length; i++) {
connectionsMenu.push({
label: connections[i],
url: '#/codetracer',
});
}
});
};
}
]);
I'm doing a web app with AngularJs and I'm using $state to travel into the app. After the login, I want to go to the home (state 'app.dashboard.home' of the absolute state 'app.dashboard).
In this page, there is a button to go in another view called expense (state 'app.dashboard.expense' of the absolute state 'app.dashboard). But when I click on the button, console display this error:
$state.go is not a function
Why?
This is the routing:
angular.module('app')
.run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/app/authenticating/');
$stateProvider
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'common/mainApp.html'
})
.state('app.auth', {
url: '/authenticating/',
templateUrl: 'common/authenticating/authenticating.html',
controller: 'authenticatingCtrl',
resolve: {
deps: ['$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load({
files: [
'common/authenticating/controllers/authenticatingCtrl.js'
]
}).then(function success(args) {
console.log('success');
return args;
}, function error(err) {
console.log(err);
return err;
});
}]
}
})
.state('app.dashboard', {
abstract: true,
url: '/dashboard',
templateUrl: 'dashboard/dashboard.html',
resolve: {
deps: ['$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load({
files: [
'dashboard/dashboardCtrl.js'
]
}).then(function success(args) {
console.log('success');
return args;
}, function error(err) {
console.log(err);
return err;
});
}]
}
})
.state('app.dashboard.home', {
url: '/home',
views: {
'content': {templateUrl: 'dashboard/home/home.html'}
},
resolve: {
deps: ['$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load({
files: [
'dashboard/home/homeCtrl.js'
]
}).then(function success(args) {
console.log('success');
return args;
}, function error(err) {
console.log(err);
return err;
});
}]
}
})
.state('app.dashboard.expense', {
url: '/newExpenseList',
views: {
'content': {templateUrl: 'dashboard/expense/new/new.html'}
},
resolve: {
deps: ['$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load({
files: [
'dashboard/expense/new/newCtrl.js'
]
}).then(function success(args) {
console.log('success');
return args;
}, function error(err) {
console.log(err);
return err;
});
}]
}
})
}])
This is the dashboard.html:
<div class="content-wrap" nav-collapse-toggler type="swipe">
<main role="main" >
<div class="section-info">
<div class="section-subtitle">{{app.name}}</div>
</div>
<div id="content" class="content view-animate fade-up" ui-view="content"></div>
</main>
</div>
This is the homeCtrl:
'use strict';
angular.module('app').controller('HomeCtrl', ['$http', '$scope', '$rootScope', 'toaster', 'GlobalApplicationData', '$log', '$state', '$stateParams',
function($http, $scope, $rootScope, GlobalApplicationData, $log, $state, $stateParams) {
$scope.goToNewExpenseList = function() {
$state.go('app.dashboard.expense');
};
}]);
This is the home.html:
<div class="container" ng-controller="HomeCtrl">
<div class="form">
<button class="lol" ng-click="goToNewExpenseList()">Go to expense list</button>
</div>
</div>
The problem is in a wrong parameter array definition, and declared function parameters.
The forth is declared 'toaster', but that is missing in function params... so all others are shifted and contain different stuff
['$http', '$scope', '$rootScope', 'toaster', 'GlobalApplicationData', '$log', '$state', '$stateParams',
// original is missing 4th param
//function($http, $scope, $rootScope, GlobalApplicationData, $log, $state, $stateParams)
// here we get $state as $state, because the 4th param will be toaster
function($http, $scope, $rootScope, toaster, GlobalApplicationData, $log, $state, $stateParams)
For some reason $location.path won't direct to the detail.html. The table rows are clickable and when you click them all the info vanishes and it shows nothing but the alert. Here is my controller script partly:
var app = angular.module('list-module', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'ListController'
})
.when('/detail', {
templaterUrl: 'detail.html',
controller: 'DetailController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller("ListController", ["$scope", "$location", "$routeParams",
function($scope, $location, $routeParams) {
$scope.customers = [{
id: 0,
Title: 'noora',
order0: 'coffee',
url: 'http://static.iltalehti.fi/terveys/teekuppi1308MZ_tr.jpg'
}, {
id: 1,
Title: 'tom',
order0: 'tea',
url: 'http://papunet.net/sites/papunet.net/files/kuvapankki/Kahvi.jpg-dup.jpg'
}, {
id: 2,
Title: 'lauri',
order0: 'coce',
url: 'http://static.makuja.fi/files/articles/1238382.515x325.jpg'
}];
$scope.detailView = function() {
alert("click works");
$location.path("/detail").replace();
$scope.$apply();
};
}
]);
Please remove "$scope.$apply();" and try.
Please refer here for detailed information as to when to use $scope.$apply()" http://tutorials.jenkov.com/angularjs/watch-digest-apply.html#apply"
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();
}],