I have sample on Angular JS as:
angular.module('wm-admin', []).
config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
});
// Controllers //
function UsersController($scope) {
}
It gives me error:
Uncaught Error: [$injector:modulerr]
So, what I do wrong?
HTML:
<body ng-app="wm-admin">
</body>
I tried also any code:
Angular JS:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
Look please code upper
You haven't injected the controller properly to your app. Add this line:
angular.module('wm-admin').controller('UsersController', UsersController);
EDIT
In your updated question you have this code:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
But now UsersController is no longer a function within the scope of the {controller: UsersController} line. Change it to controller: 'UsersController' (string, not reference to a function):
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller: 'UsersController', templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
You never actually made a controller.
angular
.module('wm-admin')
.controller('UsersController', UsersController);
UsersController.$inject = ['$scope'];
function UsersController($scope) {
}
Related
I am getting headercontroller not defined error. I have reference this controller.js file in Index.html and is there anything i am missing
Controller.js
(function () {
'use strict';
angular
.module('myApp')
.controller('headerController', headerController);
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
function headerController($scope, $http) {
var vm = this;
}
})();
app.js
(function () {
var myapp = angular.module('myApp', ["ui.router"]);
myapp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "SOC/Views/route1.html",
controller: "route1ctrl"
})
.state('route2', {
url: "/route2",
templateUrl: "SOC/Views/route2.html",
controller: "route2ctrl"
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
})();
Index.html
<script src="app.js"></script>
<script src="SOC/Directives/Header/controller.js"></script>
I tried even this below code it does not work
angular
.module('myApp', [])
.controller('headerController', headerController);
You are overwrite the dependency of the angular module by providing empty array
angular
.module('myApp', [])
.controller('headerController', headerController);
Remove the array from module('myApp)
angular
.module('myApp')
.controller('headerController', headerController);
Controller.js
(function () {
'use strict';
function headerController($scope, $http) {
var vm = this;
}
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
angular
.module('myApp')
.controller('headerController', headerController);
})();
More about $inject in angularjs - https://docs.angularjs.org/guide/di
I'm trying to get the data from a json file.
i have a file, factory1.js
myApp.factory('mainInfo', [
'$http',
function($http) {
return {
get: function(){
$http.get('data.json');
}
}}])
and then i have another file, view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [
'$scope',
'$http',
'mainInfo',
function($scope, $http, mainInfo) {
mainInfo.get("data.json")
.then(function(response) {
$scope.myWelcome = response.data;
console.log($scope.myWelcome)
});
}]);
i have one folder with each of the json, factory and controller files in it.
when i run this the error it is returning says...
angular.js:13708 Error: [$injector:unpr] Unknown provider: mainInfoProvider <- mainInfo <- View1Ctrl
where am i going wrong?
Working fine. This solves your problem i hope so.
'use strict';
var app=angular.module('myApp.view1', ['ngRoute'])
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
app.factory('mainInfo',
function($http) {
var obj={};
obj.method =function(){
return $http.get('tag.json')
}
return obj;
})
app.controller('View1Ctrl', [
'$scope',
'$http',
'mainInfo',
function($scope, $http, mainInfo) {
mainInfo.method().success(function(response) {
$scope.myWelcome = response;
});
}]);
var app=angular.module('myApp.view1', ['ngRoute']);
app.factory('mainInfo', [
'$http',
function($http) {
return {
get: function(){
$http.get('data.json');
}
}}])
define one variable and assign your module to that variable and bind the variable to the factory.if you have module with name myApp inject that module in to myapp.view1 module
like
angular.module('myApp.view1', ['ngRoute','myApp'])
Register mainInfo inside Angular module, if it's a different module.
view1.js
angular.module('myApp.view1', ['ngRoute', 'myApp']);
You have not assigned your module to a variable.
var myApp = angular.module('myApp.view1', ['ngRoute']) ...
Then use myApp.factory
myApp.factory('mainInfo', [...
see this plunkr for quick understanding.
I am getting javascript run time error
myApp is undefined
for my angular service. Don't know what wrong im doing here..
This is how i defined my app.js
app.js
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource',]);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/motors', {
templateUrl: 'View/motorList.html',
controller: 'motorController'
}).
when('/motors/:Id', {
templateUrl: 'View/motorDetails.html',
controller: 'motorDetailsController'
}).
otherwise({
redirectTo: '/motors'
});
}]);
This is how i am creating/calling myApp in controller.
Controller
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
This is how i am trying use myApp in my service. but it gives error myApp is undefined.
Service:
myApp.service('motorService', ['$http', function ($http) {
//////
}
and this is how i declared it in my html
<html ng-app="myApp">
Looking forward for some help.
Thanks
I think that the error is in the controller's declaration, because you're defining the app 'myApp' twice.
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
should be
angular.module('myApp').controller('motorController', function ($scope, motorService) {
//////
}
Edit
#simbada
It's up to you. You can separate them in different modules.
(function(angular){
angular
.module('myApp', ['myApp.Controllers']);
angular
.module('myApp.Services', [])
.service('mySrv', function($http){
function _get(){
return $http.get('url');
}
return {
get: _get
}
});
angular
.module('myApp.Controllers', ['myApp.Services'])
.controller('myCtrl', function($scope, mySrv){
$scope.var = 'Hello';
});
})(angular);
You have passed comma in dependancy after ngResource just remove that it'll work fine.
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
I think this should be
angular.module('myApp').controller('motorController', function ($sc...
whitout [ ] brackets.
also see how you declare your service:
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
when your service is 'motorService'
Your service should be:
myApp = angular.module('motorServices');
myApp.service('motorService', ['$http', function ($http) {
//////
}
if I have the following angularjs code route provider how can I pass through a dependency into the blaCtrl controller please?
Many thanks,
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/bla', { templateUrl: 'bla.html', controller: 'blaCtrl' });
trying to get something like
'use strict';
app.controller('blaCtrl', function ($scope) {
$scope.mydata = ['111', '222', '333']; // how can I change this to be a method call to a dependency, i.e.
$scope.mydata = mydependency.getData(); // example what I need
});
update
My app file looks like this - I'm still not getting the data displayed?
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/application', { templateUrl: 'partials/application.html', controller: 'myCtrl' });
$routeProvider.otherwise({ redirectTo: '/application' });
}]);
controller
'use strict';
app.controller('myCtrl', 'myService', function ($scope, myService) {
debugger; // doesn't get hit?
$scope.stuff = myService.getStuff();
});
console error
- I get this error in the console Error: [ng:areq] http://errors.angularjs.org/1.4.5/ng/areq?p0=applicationCtrl&p1=not%20a%20function%2C%20got%20string
There are 3 ways of dependency annotation according to angular docs.
Inline Array Annotation
In this case your controller defenition should look like:
'use strict';
app.controller('blaCtrl', ['$scope', 'mydependency', function ($scope, mydependency) {
$scope.mydata = mydependency.getData();
}]);
$inject Property Annotation
'use strict';
var blaCtrl = function ($scope, mydependency) {
$scope.mydata = mydependency.getData();
};
blaCtrl.$inject = ['$scope', 'mydependency'];
app.controller('blaCtrl', blaCtrl);
Implicit Annotation
This one you used in your example code to inject $scope variable. Not recommended, minificattion will broke such code.
'use strict';
app.controller('blaCtrl', function ($scope, mydependency) {
$scope.mydata = mydependency.getData();
});
The fact that you reference your controller not in HTML but in routeProvider doesn't make any difference.
You can pass a dependency to the controller from within the controller. You're injecting the $scope dependency already, and you can inject others like $location and $rootScope if you'd like.
I am having a hard time to access a service inside a directive. I define my service via $http and $q, and inject it into my directive. But I can;t get the directive to access the service.
service.js
'use strict';
var app = angular.module('App.services', []);
app.factory('Classification', function($http,$q) {
return {
query: function getAll() {
var deferred = $q.defer();
$http.get('index.php/classifications').then(function(classi) {
deferred.resolve(classi.data);
}, function getWebsitesError(reason) {
deferred.reject(reason);
});
return deferred.promise;
}
};
});
app.js
'use strict';
/* App Module */
var app = angular.module('App', ['App.controllers', 'App.services', 'App.directives', 'ui']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'partials/welcome.html'}).
when('/websites/:websiteId', {templateUrl: 'partials/website/details.html', controller: 'WebsiteDetailsCtrl'}).
otherwise({redirectTo: '/'});
}]);
and my directive.js :
'use strict';
var app = angular.module('App.directives', ['App.services']);
app.directive("regionselect",['Classification', '$compile', function($compile, Classification){
Classification.query();<-- Throw an exception : has no method query()
return{
restrict : "E",
templateUrl : "/js/directives/locationSelect3.html",
transclude: true,
compile: function (tElement, tAttr, transclude){
var loaded = false;
}
};
}]);
Any idea what I am doing wrong?
Could it be the ordering?
app.directive("regionselect",['Classification', '$compile', function($compile, Classification){
You declare
['Classification', '$compile',
but the the function says
function($compile, Classification){
Which is backwards.