This is the code I have:
angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
$stateProvider
.state("member", {
url: "/member",
views: {
"" : {
templateUrl: "/js/angular/partials/member/index.html",
controller: 'MemberController'
}
}
});
}).controller(
"MemberController",
["$rootScope", "$scope", "$ocLazyLoad", "$location"],
function ($rootScope, $scope, $ocLazyLoad, $location) {
log("Members controller initialized.");
}
);
I don't like to define the controller directly in the view, because that will make me create a lot of different functions, so I want define the controller once. However it says:
Error: [ng:areq] Argument 'MemberController' is not a function, got string
I've tried change the controller to the very top, in another angular.module("App").controller definition but nothing works. What am I doing wrong?
try changing the location of the closing square bracket ]
.controller(
"MemberController",
["$rootScope", "$scope", "$ocLazyLoad", "$location",
function ($rootScope, $scope, $ocLazyLoad, $location) {
log("Members controller initialized.");
}
]);
Related
In the below , roles.js file whenever the onSelect function is called if the role is UserRole i'm navigating user to different page
angular.module('myApp.roles', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/roles', {
templateUrl: 'roles/roles.html',
controller: 'PostsCtrl',
selector: 'roles'
});
$routeProvider.when('/footer', {
templateUrl: 'footer/footer.html',
controller: 'footerCtrl'
});
}])
.controller('PostsCtrl', ['$scope', '$rootScope', '$location', function ($scope,
$rootScope, $log, $location) {
$scope.onSelect = function (A, B, C) {
localStorage.setItem("A", JSON.stringify(A));
localStorage.setItem("B", JSON.stringify(B));
localStorage.setItem("C", JSON.stringify(C));
if (role.roleName === "User Role") {
$rootScope.roles = [];
$location.url("/footer");
} else {
$rootScope.mangoes = JSON.parse(localStorage.getItem("B"));
}
};
}]);
I have defined $location in the controller and added it as parameter in function . When i debugged it then i found that $location is undefined. Error is :Cannot read property 'url' of undefined.
You are missing the order while injecting parameters, remove $log from the parameters,
.controller('PostsCtrl', ['$scope', '$rootScope', '$location' ,function ($scope,
$rootScope, $location) {
I have a project in Maven with angularJS routes; login.routes.js appears like this:
(function() {
"use strict";
angular
.module("app")
.config(['$stateProvider', loginConfig]);
function loginConfig($stateProvider) {
$stateProvider
.state("login", {
url: "/login",
templateUrl: "app/login/login.html",
controller: "LoginController",
controllerAs: "vm",
})
.state("logged", {
[...]
resolve: {
checkLogged: function($log, $timeout, $state, $cookies, $rootScope) {
$timeout(function() {
if ($cookies.get('user')) {
[...]
} else {
[...]
$state.go('login');
}
}, 0)
}
}
})
.state("logout", {
[...]
resolve: {
checkLogged: function($log, $timeout, $state, $cookies, $rootScope, $location) {
[...]
}
}
})
}
})();
I'm minifing all the angularJS files; actually, everything works minified but the routes.
Is there a way to make the code minifiable? I minified with success controllers using
angular
.module("app")
.controller("Controller", Controller);
Controller.$inject = ['$log',...];
Is there something like that, but for routes?
One way to do it is in the below example:
checkLogged: ['$log', '$timeout', '$state', '$cookies', '$rootScope',
function($log, $timeout, $state, $cookies, $rootScope) {
//code
}
] //<-- array
Wrap your function in an array and inject each AngularJs provider as a string. This should solve your minification issues.
Also this is an AngularJs question not Angular. You may want to update your tag.
Hope that helps.
I have a state defined like so
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'templates/login.tpl.html',
data: {
loginState: true
},
resolve: {
saml_auth: function ($cookies) {
var saml_auth = $cookies.get('saml_auth');
console.log(saml_auth) // returns the string value
return {claim: saml_auth};
}
}
In the controller, I get an empty object, no properties even within the object
angular.module('swSelfService')
.controller('LoginController', LoginController);
LoginController.$inject = [
'$scope',
'SWSessionService',
'$state',
'$stateParams',
'saml_auth',
];
function LoginController($scope, SWSessionService, $state, saml_auth) {
console.log(saml_auth) // {}
}
You missed to add 4th parameter of $stateParams injectable on. You placed saml_auth at wrong place inside controller constructor, it should appear on 5th place.
LoginController.$inject = [
'$scope',
'SWSessionService',
'$state',
'$stateParams',
'saml_auth',
];
function LoginController($scope, SWSessionService, $state, $stateParams, saml_auth) {
console.log(saml_auth) // {}
}
I would like to know if it is possible (if it is, so how? :)), to inject a dependency to a controller called by a directive.
I have a controller controller called MyCtrl. Here is his signature:
app.controller('MyCtrl', function ($scope, dataService, aDependency){...}
This Controller is usually defined in my route:
.segment('myPage', {
templateUrl: templatesUrl + 'mypage.html',
resolve: {
aDependency: ['$q', 'dataService', '$location', function ($q, dataService, $location) {
var defer = $q.defer();
dataService.retrieveCCData(defer, $location);
return defer.promise;
}],
},
controller: 'MyCtrl'
})
But now, I would also like to call this controller from a directive.
Problem is that I don't know How to inject the aDependency.
It said that the provider is unknown.
Here's my directive:
app.directive('gettingStarted1', ['dataService', function (dataService) {
return {
restrict: 'E',
templateUrl: templatesUrl + 'mypage.html',
controller: 'MyCtrl',
//resolve: {
//datasources: ['dataService', function (dataService) {
//return null;
//}]
//}
};
}]);
Resolve is impossible in directive.
Some help will be appreciate
Thank you
Make aDependency a separate service.
app.provider('aDependency', function () {
this.$get = ['$q', 'dataService', '$location', function ($q, dataService, $location) {
var defer = $q.defer();
dataService.retrieveCCData(defer, $location);
return defer.promise;
}];
});
You can resolve it with
resolve: {
'aDependency': 'aDependency',
}
or
resolve: ['aDependency'];
you could use the controller Function from the directive
.directive("sampledirective", function (dependancy1, dependancy2, ....) {
return {
scope: '=',
controller: function ($rootScope, $scope) {
//DO your controller magic here where you got your scope stuff
}
}
})
One thing i learned it seems the $scope values arent immediatly updated from directive to Controller. If you use objects like
$scope.smth.smth = 'test'
It gets updated immediatly else you would need to $apply
I want to make an ionicModal form in my app but it always say's:
TypeError: undefined is not a function
at new AppController (http://127.0.0.1:58710/www/js/home/AppController.js:15:17)
at invoke (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11602:23)
at http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14906:28
at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2797:28
at nodeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14336:13)
at compositeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13730:13)
at publicLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13626:30)
at updateView (http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2733:23)
at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2697:11 <div ui-view="">
My code is:
function AppController($scope, $log, $state, $ionicModal) {
'use strict';
$scope.days = [];
var column = [];
// Load the modal from the given template URL
console.log(JSON.stringify($ionicModal) + "lalala");
$ionicModal.fromTemplateUrl('templates/home/selectedDay.html', function ($ionicModal) {
$scope.modal = $ionicModal;
$scope.modalRightButtons = [
{
type: 'button-clear',
content: 'Close',
tap: function (e) {
$scope.modal.hide();
}
}];
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
$scope.openModal = function () {
$scope.modal.show();
};
This is exactly the same as in the example i just don't know what am I doing wrong...
my app.js is:
var App = angular.module('App', ['ionic', 'ngResource', 'ui.router']);
App.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
'Header': {
templateUrl: 'templates/home/homeHeader.html',
controller: 'homeHeaderController'
},
'': {
templateUrl: 'templates/home/calendar.html',
controller: 'AppController'
}
}
})
$urlRouterProvider
.otherwise('/home');
});
App.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
App
.controller('AppController', ['$scope', '$log', '$state', '$localstorage', AppController])
I have an other app where everything is working. I don't see what could be wrong here....
EDIT
I changed the first row of AppController and now I am getting an other error.
The new first row:
function AppController($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {
The new error:
"Cannot read property 'fromTemplateUrl' of undefined"
The problem is with dependency injection (DI). The syntax you are using is good if you plan to minify your code, but you have to declare the exact same dependencies in the exact same order in both places. Your AppController object has more dependencies than you declare in the angular.controller() method.
Controller function
function AppController ($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {
...
}
Angular Controller declaration
App.controller('AppController', ['$scope', '$log', '$state', 'Api', '$localstorage', '$ionicSideMenuDelegate', '$ionicPopup', '$ionicModal', AppController]);