I defined an angular module and angular keeps complaining about a missing "$routeProvider". I don't understand as i defined the 'ngRoute' as dependency of my module.
My Code:
(function () {
'use strict';
var FlightlistController = function () {
//code comes inside here
};
angular.module('flights', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/flightslist', {
controller: 'FlightsController',
controllerAs: 'flights',
templateUrl: 'modules/flight/list.view.html'
})
}])
.controller('FlightsController', ['$routeProvider', FlightlistController])
})();
The error i get
Please remove the $routeProvider from controller definition.
.controller('FlightsController', ['$routeProvider', FlightlistController])
just use
.controller('FlightsController', FlightlistController);
Hope this helps now.
You forgot to inject it in your controller function as a param
(function () {
'use strict';
var FlightlistController = function ($routeProvider) {
//code comes inside here
};
angular.module('flights', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/flightslist', {
controller: 'FlightsController',
controllerAs: 'flights',
templateUrl: 'modules/flight/list.view.html'
})
}])
.controller('FlightsController', ['$routeProvider', FlightlistController])
})();
You need to specify the input parameter of the controller (function FlightlistController).
var FlightlistController = function () need to be changed to var FlightlistController = function ($routeProvider)
And as per your error message check have you specify the script reference for ngRoute. if not place it after you add the script reference of angular.
Related
I have just created a simple app. Route for main controller is working but not for another one.
This is the part of the code of route file
$routeProvider
.when('/', {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.when('/signatures', {
templateUrl: 'app/components/signature/signature.html',
controller: 'SignatureController',
controllerAs: 'signature',
resolve: {
signatureLists: function(SignatureService){
return SignatureService.getSignatures();
}
}
})
.otherwise({
redirectTo: '/'
});
and below is the controller
(function() {
'use strict';
angular
.module('demoapp')
.controller('SignatureController', SignatureController);
/** #ngInject */
function SignatureController(signatureLists) {
var vm = this;
vm.signatures = signatureLists;
}
})
I have defined the module in another file:
(function() {
'use strict';
angular
.module('demoapp', ['ngRoute', 'toastr']);
})();
when I try to visit /signatures page, I get this error:
Error: [ng:areq] Argument 'SignatureController' is not a function, got undefined
Maybe its just a silly error due to a typo or something else but still I can't figure it out
You forgot to self invoke the controller closure..do a () at the end
(function() {
'use strict';
angular
.module('demoapp')
.controller('SignatureController', SignatureController);
/** #ngInject */
function SignatureController(signatureLists) {
var vm = this;
vm.signatures = signatureLists;
}
})()
I downloaded Angular-Express-Bootstrap seed from https://github.com/jimakker/angular-express-bootstrap-seed. I would like to perform routing through angular js which is performed perfectly. But now I am facing some problem on calling 'controller' in controllers.js.
I can call my MyCtrl1 by this way and working perfectly:
function MyCtrl1() {
alert('calling Myctrl1..')
}
MyCtrl1.$inject = [];
But whether I call like this:
var app = angular.module('myApp.controllers', []);
app.controller('MyCtrl1', ['$scope', function($scope) {
$scope.greeting = 'MyCtrl1';
alert('calling'+ $scope.greeting+"..")
}]);
The above controller call back function not working and shows this error: Uncaught Error: [$injector:modulerr] MyCtrl1 is not defined
Routing Config in app.js:
var app = angular.module('myApp', ['myApp.filters','myApp.controllers','myApp.services', 'myApp.directives','ngRoute'])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
{
$routeProvider
.when('/view1', {
templateUrl: 'partial/1',
controller: MyCtrl1
})
$locationProvider.html5Mode(true);
}]);
I don't know why it is not working. Any help would be greatly appreciated.
Finally I got the solution, I missed the quotes to the controller name in $routeProvider
Soln : controller: 'MyCtrl1'
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 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) {
}
I have a:
main module : kp
sub module : kp.venue
I want kp.venue to have it's own "route" definitions (for all paths relative to that module).
This is what I am trying to achieve in the code bellow.
Can anyone explain me why it doesn't work?
I followed the technique presented in this post: https://stackoverflow.com/a/15301427/971008
(function () {
'use strict';
angular.module('kp.venue', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/venue", {
template : "<p>This is the venue module</p>",
controller: "VenueCtrl"
});
}
])
.controller('VenueCtrl', ['$scope',
function($scope){
console.log("VenueController");
}
]);
angular.module('kp', ['ngRoute', 'ngAnimate', 'kp.venue'])
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.html5Mode({enabled:true, requireBase:false});
$routeProvider
.when("/", {
template: "<p>main app</p>",
controller: "MainController"
})
.otherwise({
redirectTo: '/'
});
}
]);
//Load controller
angular.module('kp')
.controller('MainController', ['$scope',
function($scope) {
$scope.test = "Testing...";
}
]);
}());
Note that I have already tried to move "kp.venue" bellow the definition of "kp" module to be sure that it was not a problem related to things not being loaded in the right order.