The seed app uses routes, which reference controllers, and the controllers are defined like this:
function MyCtrl1() {}
MyCtrl1.$inject = [];
Looking for a better example (ie) showing injection, maybe an HTTP get and update to scope?
Thanks.
I'm not sure exactly what you want, but here is a more complex example.
Controller:
function MyCtrl1 ( $scope, $http ) {
$http.get( '/some/location' ).success( function ( data ) {
$scope.items = data;
});
}
MyCtrl1.$inject = [ '$http' ];
View:
<div ng-controller="MyCtrl1">
<ul>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
</div>
Commentary:
In a real world scenario, the $http calls would be in your own service that would be injected into the controller instead. Also, I recommend against defining controllers in the global space. A better way to define the same controller would be like this:
angular.module('myApp', [])
.controller( 'MyCtrl', [ '$http', function MyCtrl1 ( $scope, $http ) {
$http.get( '/some/location' ).success( function ( data ) {
$scope.items = data;
});
}]);
Update:
Controllers are useless without a scope - the really couldn't do anything - so Angular automatically injects $scope into every controller. Every other service must be requested to be injected. The MyCtrl1.$inject
and the array syntax are both only necessary to still remain functional after minification. If you create a sample file with my code and delete the $inject
line, it will still work. But when you minify the Javascript, variables names get reduced, so we put the important information in strings.
I recommend going through the tutorial as well as watching some of the videos on the AngularJS YouTube channel, like this one.