Can you use Angular dependency injection instead of RequireJS?
angularjs, javascript
Solution
AngularJS does not currently have a script loader as part of the framework. In order to load dependencies, you will need to use a third party loader such as RequireJS, script.js, etc.
Per the Docs(http://docs.angularjs.org/guide/module#asynchronousloading):
Asynchronous Loading
Modules are a way of managing $injector configuration, and have nothing to do with loading of scripts into a VM. There are existing projects which deal with script loading, which may be used with Angular. Because modules do nothing at load time they can be loaded into the VM in any order and thus script loaders can take advantage of this property and parallelize the loading process.
...or, as @xanadont explained, you can add `<script>` tags to your page for every file.
Problem
I'm starting with angular, how could I break alll the code from one app into many files?, I watched the 60ish minutes intro, and they mentioned that I could do this without requirejs or any other framework. Lets say I have something like this that works just fine: ``` var app = angular.module('app', []); app.factory('ExampleFactory', function () { var factory = {}; factory.something = function(){ /*some code*/ } return factory; }); app.controller ('ExampleCtrl', function($scope, ExampleFactory){ $scope.something = function(){ ExampleFactory.something(); }; }); app.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'ExampleCtrl', templateUrl: 'views/ExampleView.html' }) .otherwise({ redirectTo: '/' }); }); ``` What if I wanted to have it in separate files? like this File One: ``` angular.module('factoryOne', []) .factory('ExampleFactory', function () { var factory = {}; factory.something = function(){ /*some code*/ } return factory; }); ``` File Two: ``` angular.module('controllerOne', ['factoryOne']) .controller ('ExampleCtrl', function($scope,ExampleFactory){ $scope.something = function(){ ExampleFactory.something(); }; }); ``` File Three: ``` angular.module('routes', ['controllerOne']) .config(function ($routeProvider) { $routeProvider .when('/', { controller: 'ExampleCtrl', templateUrl: 'views/ExampleView.html' }) .otherwise({ redirectTo: '/' }); }); ``` File four: ``` var app = angular.module('app', ['routes']); ``` I've tried it like this and it doesn't work. Can I do something like this and just have a script tag for File Four in the main view? or do I have to have one script tag per file?. Thanks for the help guys.