So I have this routing piece of code:-
$stateProvider.state('app.dashboard', {
url: "/dashboard",
templateUrl: "app/components/dashboard/dashboard.html"
, resolve: {
factory: ["$ocLazyLoad", "$q", ['jquery-sparkline', 'dashboardCtrl'], loadSequence]
},
title: 'Dashboard',
ncyBreadcrumb: {
label: 'Dashboard'
}
And i have this function:-
function loadSequence($ocLL, $q, files) {
}
so basically what i want to do is passing ['jquery-sparkline', 'dashboardCtrl'] to the function loadSequence, these values are simple string values. Is there a way to this.
Maybe i don't understand you
(function () {
'use strict';
angular
.module('plunker')
.config(config);
config.$inject = ['$stateProvider'];
/* #ngInject */
function config($stateProvider) {
$stateProvider
.state('app.dashboard', {
url: '/dashboard',
templateUrl: 'app/components/dashboard/dashboard.html',
controller: 'dashboardCtrl',
controllerAs: 'dashboard',
resolve: {
dashboardService: dashboardService
},
title: 'Dashboard',
ncyBreadcrumb: {
label: 'Dashboard'
}
});
}
dashboardService.$inject = ['$ocLazyLoad', '$q'];
function dashboardService($ocLazyLoad, $q) {
return buttonService.getButtons().then(function (data) {
return data;
});
}
})();
(function () {
'use strict';
angular
.module('app.dashboard')
.controller('dashboardCtrl', dashboardCtrl);
dashboardCtrl.$inject = ['dashboardService','jquery-sparkline'];
function dashboardCtrl(dashboardService,jquery-sparkline) {
var vm = this;
vm.loadSequence = loadSequence;
function loadSequence($ocLL, $q, files) {
}
}
})();
Related
so in my state, i have
angular.module('app', ['ui.router', 'chart.js'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
component: 'home',
resolve: {
data: ['$http', function ($http) {
return $http.get('some api call')
.then(function (response) {
console.log("this is the response", response);
return response;
});
}]
}
});
}]);
then i get the proper response back. but when i check my resolve in here,
angular.module('app')
.component('home', {
templateUrl: 'Content/app/components/home.html',
bindings: {
resolve: '<'
},
controller: [
function () {
var vm = this;
vm.$onInit = function () {
console.log("this is the resolve", vm)
}
}]
});
i see that my resolve is undefined. Am i doing something wrong?
$stateProvider will bind what you specify inside the resolve object to your component, rather than binding the whole resolve object itself.
angular.module('app')
.component('home', {
templateUrl: 'Content/app/components/home.html',
bindings: {
data: '<'
},
controller: [
function () {
var vm = this;
vm.$onInit = function () {
console.log("this is the resolve", vm)
}
}]
});
Documentation link: https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#as-an-object
I can't get controller working despite being registered
I am defining my controller like below
(function () {
'use strict';
function EntityModulesCtrl(UserManagement, getEntityModules) {
let ctrl = this;
console.log('loggging from entityModules ctrl...');
console.log(getEntityModules);
ctrl.saveMapping = function () {
let params = {
modules: ctrl.selectedModules,
entity: ctrl.selectedEntity
};
UserManagement.saveModuleEntityMapping(params).then(function(res){
console.log(res);
});
}
}
angular.module('mean.user_management')
.controller('EntityModulesCtrl', EntityModulesCtrl);
EntityModulesCtrl.$inject = ['UserManagement', 'getEntityModules'];
});
My route is
(function() {
'use strict';
function UserManagement($stateProvider) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'user_management/views/index.html',
resolve: {
// dashboardConfig: function () {
// var roleType = localStorage.getItem('roleType');
// }
}
}).state('userManagement circles example', {
url: '/userManagement/example/:circle',
templateUrl: 'user_management/views/example.html'
}).state('dashboard.entityModulesMapping', {
url: '/userManagement/mapEntityModules',
templateUrl: 'user_management/views/entityModules.html',
controller: 'user_management/controllers/EntityModulesCtrl.js',
controllerAs: '$ctrl',
resolve: {
getEntityModules: function (UserManagement) {
return UserManagement.getEntityModules().then(function (res) {
console.log("logging from mapEntityModules resolve...");
console.log(res);
return res;
})
}
}
});
}
angular.module('mean.user_management')
.config(UserManagement);
UserManagement.$inject = ['$stateProvider'];
})();
I have tried using
controller: EntityModulesCtrl
controller: 'EntityModulesCtrl'
controller: "path_to_my_controller_file"
But it did not work.
Your module should be with dependencies,
angular
.module('mean.user_management',[])
.config(UserManagement);
In your script add
controller: 'EntityModulesCtrl',
in place of
controller: 'user_management/controllers/EntityModulesCtrl.js',
And make sure you add the controllerscript file to your html page.
<script src="user_management/controllers/EntityModulesCtrl.js"></script>
I am using a great template for ionic tabs and side menu as having issues with the navigation from the tabs. But when I use the code pen example and structure the html files into a templates folder and update the app.js file I lose the navigation. I obviously do not understand the js link format correctly. Please could someone explain it to me.
My code pen is here
The original is here
app.js (each html file is in www/templates
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry/templates',
templateUrl: 'templates/entry.html',
controller: 'EntryPageController'
})
.state('main', {
url: '/main/templates',
templateUrl: 'templates/mainContainer.html',
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'templates/home.html',
controller: 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'templates/info.html',
controller: 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs.html',
controller: 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
.controller('HomePageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
enter code here
I have a situation in the application, where I want to load an already available modal, in an iFrame of another application using the same codebase. For this I have used the following code :
new-user-module.js
(function () {
'use strict';
angular
.module('mo.pages.new-user.layouts', ['ui.router', 'ui.bootstrap', 'mo.pages.new-user.services'])
.config(['$stateProvider', newUserRouteConfiguration]);
function newUserRouteConfiguration($stateProvider) {
$stateProvider
.state('new-user', {
url: '/new-user',
onEnter: [
'mo.pages.new-user.services.NewUserPageService', function (newAttachmentPageService) {
newAttachmentPageService.openAttachmentModal();
}
]
});
}})();
new-user-service.js
(function () {
'use strict';
angular
.module('mo.pages.new-user.services')
.service('mo.pages.new-user.services.NewUserPageService', NewUserPageServiceFactory);
NewUserPageServiceFactory.$inject = [
'$stateParams',
'$modal'
];
function NewUserPageServiceFactory($stateParams, $modal) {
var service = {
openUserModal: openUserModal
};
return service;
function openUserModal() {
return function () {
$modal.open({
templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
controller: 'mo.pages.shared.modals.NewUserModalController as vm',
windowClass: 'new-user-modal',
resolve: {
headerText: function() {
return 'header';
}
},
backdrop: 'static',
size: 'lg'
});
};
}
}})();
The issue, I am facing is that, the modal is loading, when the '/new-user' is getting called in the iFrame, but the templateUrl is not loading.
Check your console, I think you may find an error with your call to newAttachmentPageService.openAttachmentModal();
Since NewUserPageServiceFactory is registered as a service and not really a factory, it should not return anything. You should just be adding the method to the service object, for example:
function NewUserPageServiceFactory($stateParams, $modal) {
this.openUserModal = function() {
return function () {
$modal.open({
templateUrl: 'modules/pages/shared/modals/new-user/new-user-modal.html',
controller: 'mo.pages.shared.modals.NewUserModalController as vm',
windowClass: 'new-user-modal',
resolve: {
headerText: function() {
return 'header';
}
},
backdrop: 'static',
size: 'lg'
});
};
}
}
For a good illustration of the (slight) differences between services and factories see here
Let me know if this works
Factory
(function () {
angular.module("common.script").factory("expenseResource", ["$resource", expenseResource]);
function expenseResource($resource) {
var expenceCategory = function ($resource) {
return $resource("api/expenceCategory/:expenceCategoryId");
}
return {
expenceCategory: expenceCategory
};
}
})();
Controller
(function () {
var app = angular.module("ExpenceManagerApp", ["ui.router", "common.script", "expenseResourceMock"]);
app.config(["$stateProvider","$urlRouterProvider", function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("HomePage", {
url:"/",
templateUrl: "App/Main/homePage.html",
})
.state("Settings", {
url: "/Settings",
templateUrl: "App/Expense/settingsPage.html",
})
.state("expenceCategoryEdit", {
url: "/expenceCategoryEdit",
templateUrl: "App/Expense/editExpenseCategory.html",
controller: "editExpenseCategoryCtrl as vm",
resolve: {
expenseResource: "expenseResource",
expenseCategoryList: function (expenseResource) {
return expenseResource.expenceCategory.query().$promise;
}
}
})
}]);
}());
expenceCategory is a function, so use it as function:
expenseResource.expenceCategory().query().$promise
OR define expenceCategory as field:
return {
expenceCategory: expenceCategory()
};
NB: your service creates new $resource each time it is launched. It should be just:
function expenseResource($resource) {
return $resource("api/expenceCategory/:expenceCategoryId");
}
And in controller:
expenseResource.query().$promise