AngularJS，将服务注入控制器

Question

I just began to work with angularJS and started to divide my main.js into several own files. My structure is as follows:

app.js

index.html

/service/service1

/controller/cont1

My question is how to inject the service into the controller.

The App:

angular.module('App',['ngDragDrop']);

The service:

angular.module('App')
   .factory('service1',function()
{...}

I tried to load the service1 into cont1 by injecting

angular.module('App')
    .controller('cont1', cont1);

cont1.$inject=['$scope', 'service1']; 

function cont1($scope, service1) {
    $scope.we=service1.doSomething(); 
}

but it never worked.

Finally I added the script of service1 into my index.html file, just before I load the controller file and it worked fine.

Do I have to add every service I want to use somewhere in my app into the index file? Is there no other way? To me it seems somehow dumb if I have tons of script tags in my index.html

Greetz and thanks in advance!

Answer 1

Yes, your index.html will contain all your scripts references. You can get fancy and create a task that will minify and combine all your js file into one then only have only 1 file referenced. For debugging purposes, you wanna have access to all your js files in case you want set breakpoints and debug