I am trying to utilise a factory within my ui-router resolve. I can see my factory name is returned, however the methods do not appeart to be there:
router.js
define(['module', 'require'], function(module, require) {
'use strict';
var Router = function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/shopping');
var userFactory = require('./common/user/userFactory');
$stateProvider
.state('shopping', {
url: '/shopping',
templateUrl: 'app/shopping.html',
resolve:{
"check":function(){
var something = userFactory;
console.log(userFactory.name);
console.log(userFcatory);
}
}
});
};
module.exports = ['$stateProvider', '$urlRouterProvider', Router];
});
When console.log'ing:
console.log(userFactory.name); //returns UserFactory
console.log(userFcatory); //returns:
Object {name: "UserFactory", component: Array[4]}
component:Array[4]
0:"$q"
1:"$http"
2:"$state"
3:($q, $http, $state)
length:4
__proto__:Array[0]
name:"UserFactory"
However my getData and useData methods do not seem to be available for me to use?
Fixed this by changing my router.js to:
define(['module', 'require'], function(module, require) {
'use strict';
var Router = function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/shopping');
var userFactory = require('./common/user/userFactory');
$stateProvider
.state('shopping', {
url: '/shopping',
templateUrl: 'app/shopping.html',
resolve:{
userFactory : 'UserFactory',
check:function(userFactory){
return userFactory.checkUser();
}
}
});
};
module.exports = ['$stateProvider', '$urlRouterProvider', Router];
});
Related
I am new in Angular JS and I stack with problem with inject resolve promise to controller.
I have next code:
var app = angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlRouterProvider.otherwise('/refuel');
$stateProvider.state('refuels', {
url: '/refuel',
controller: 'refuelController',
controllerAs: 'refuelCtrl',
resolve: {
$refuelsPumpsResolve: function ($http) {
return $http({
url: "http://localhost:60000/Refuels/GetUserPumps",
method: "GET"
})
}
}
})
})
.controller('refuelController', function ($refuelsPumpsResolve) {
var $this = this;
this.isOpen = true;
this.isOpen = function () {
$this.isOpen = !$this.isOpen
}
this.pumpsData = $refuelsPumpsResolve;
});
However angular throws 'Unknown provider' exception for $refuelsPumpsResolve in controller.
I do not see any problem, more over the code was taken from ui-route tutorial on github.
Thanks for help
Try this, declaring the injection as you would normally do for say, a controller:
resolve: {
$refuelsPumpsResolve: ['$http', function ($http) {
return $http({
url: "http://localhost:60000/Refuels/GetUserPumps",
method: "GET"
})
}]
}
I have a problem, a Controller called OrderController standing on two modules, Sales and Supply. When I make the route that will use this controller as I can define which of the two controllers I want to use, how can I define which controller's module? I tried to register the route separately in each module, but still not the right.
Full code: https://plnkr.co/edit/iLUuUNKWZJhg23rrk1zB?p=preview
acmeModule.js
var app =
angular
.module('acme', [
// Angular UI
'ui.router',
// Acme modules
'acme.sales',
'acme.supply',
]);
app.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("home", {
url: "/home",
template: "Home"
})
}
salesModule.js
var app =
angular
.module('acme.sales', ['ui.router']);
app.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state("orderBySales", {
url: "/orderBySales",
templateUrl: "content.html",
controller: 'OrderController',
controllerAs: 'vm'
});
}
app.controller('OrderController', OrderController);
function OrderController() {
var vm = this;
vm.Content = "Order by Sales";
}
supplyModule.js
var app =
angular
.module('acme.supply', ['ui.router']);
app.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state("orderBySupply", {
url: "/orderBySupply",
templateUrl: "content.html",
controller: 'OrderController',
controllerAs: 'vm'
});
}
app.controller('OrderController', OrderController);
function OrderController() {
var vm = this;
vm.Content = "Order by Supply";
}
You have to name the controller differently, otherwise one controller overwrites the other one. In this constellation (plunker) it is the controller of module acme.supply.
Call it SupplyOrderController and SalesOrderController.
I code a lazyLoadModule function, which is used to loazyLoad angular.js modules.But I found that webpack will require all files in '../modules/' directory, the reason maybe is that var mod = require("../modules/" + module); executed. I want require files when call the function in router resolve.
lazyload.js:
exports.lazyLoadModule = function(module){
var resolver = {
'lazyLoad': ['$q', '$ocLazyLoad', function($q, $ocLazyLoad){
var deferred = $q.defer();
require.ensure([], function (require) {
var mod = require("../modules/" + module);
$ocLazyLoad.load({
name: mod.name,
});
deferred.resolve();
});
return deferred.promise;
}]
}
return resolver;
}
app.js:
var lazyLoadModule = require('../util/lazyLoad.js').lazyLoadModule;
angular.module('app', ['ui.router', 'oc.lazyLoad', 'ngMaterial']);
angular.module('app')
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/home',
template: require('../modules/home/template/home.html'),
resolve: lazyLoadModule('home/home.js')
})
.state('biz1', {
url: '/biz1',
template: require('../modules/biz1/template/biz1.html'),
resolve: lazyLoadModule('biz1/biz1.js')
})
$urlRouterProvider.otherwise('home');
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['app'], {
});
});
You can use bundle-loader to do this:
(require('bundle?name=[path]!../modules/' + module))(function(mod) {
});
This will build every file inside the modules directory as a separate chunk, because of the name=[path] parameter.
Got Unknown provider when injecting service into the child state resolve function. But if defined a resolve in the parent state, it just works. Below there are some sample codes:
I defined a service module
angular.module('services', [])
.factory('myService', function() {
// my service here
})
and initialize the app
var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider.state('wizard', {
url: '/wizard',
abstract: true
})
.state('wizard.step1', {
url: '/step1',
templateUrl: ... ,
resolve: {
name: function(myService) {
// do something with mySerice
}
},
controller: function(name) {
// controller codes here
}
})
}]);
I got the error Unknown provider complaining about myService in the wizard.step1 resolve. But if I add a random resolve in the parent state, like
$stateProvider.state('wizard', {
url: '/wizard',
abstract: true,
resolve: {
a: function() { return 1; }
}
})
then it works without error. Wonder what happens here?
In your controller you have to inject your service MyService, so define something like this
.state('wizard.step1', {
url: '/step1',
templateUrl: ... ,
resolve: {
name: ['myService', function(myService) {
// do something with mySerice
}]
},
controller: ['name', function(name) {
// controller codes here
}]
})
You have to inject your service in your config function :
var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', 'myService',
function($stateProvider, $urlRouterProvider, myService) {
...
Another way is to embed your resolve code in a service and assign directly the service :
app.config(['$stateProvider', '$urlRouterProvider' ,'mySuperService',function($stateProvider,
$urlRouterProvider, mySuperService) {
...
resolve: {
name: mySuperService()
}
.constant('mySuperService', function() {
var serv= function(){
// your code
}
return serv;
}
I have the following in my app.js:
var app = angular.module('app', ['admin', 'ui.compat', 'ngResource', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var home = {
name: 'home',
url: '/home',
views: {
'nav-sub': {
templateUrl: '/Content/app/home/partials/nav-sub.html',
}
}
};
$stateProvider.state(home)
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}]);
in admin.js:
angular
.module('admin', ['ui.state'])
.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var admin = {
name: 'admin',
url: '/admin',
views: {
'nav-sub': {
templateUrl: '/Content/app/admin/partials/nav-sub.html',
}
}
};
var adminContent = {
name: 'admin.content',
parent: admin,
url: '/content', views: {
'grid#': {
templateUrl: '/Content/app/admin/partials/content.html',
controller: 'AdminContentController'
}
}
}
$stateProvider.state(admin).state(adminContent)
}])
I am confused about how to wire up my AdminContentController. Currently I have the following:
app.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
Can someone verify if this is the correct way for me to set up my module and add it to app. Should I be adding the controller to the app:
app.controller('AdminContentController',
or should this belong to the module 'admin'. If it should then how should I wire it up?
Based on what you have shared, the the controller should be created on admin module such as
var adminModule=angular.module('admin'); // This syntax get the module
adminModule.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
You could also define the controller in continuation of your admin module declaration.
Yes that would work angular.module('admin') works as a getter. So you'll get the same module in each file.