Can you use Angular dependency injection instead of RequireJS?

Question

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.

Angular's module loader doesn't inject scripts into the page. It just loads modules already defined elsewhere on the page (in other files most likely). If you don't like including all those files with the page, use a build step to concatenate them all into one file, and possibly a tool to add the files to the page for you (generator-angular for yeoman) — DerekR
– DerekR, Commented Jul 1, 2013 at 17:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 1, 2013 at 18:26

Brian Lewis

5,7191 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xanadont · Accepted Answer · 2013-07-01 16:59:50Z

1

You must have a

<script src="file.js"></script>

per each file that you're using. It should work once you have all the references in place.

Or ... check out this article for a way to roll-your-own runtime resolution of controllers.

answered Jul 1, 2013 at 16:59

xanadont

7,6326 gold badges39 silver badges51 bronze badges

Comments

XML · Accepted Answer · 2013-09-04 14:11:05Z

You've got to separate the idea of downloading from the idea of loading and executing in-memory. Use Yeoman/grunt or similar build tools to manage the process of adding individual files to the project for Angular's various modules controllers, directives, services, etc. that are attached to those modules. Then, at build-time, the files will be minified and concatenated for a speed/bandwidth improvement that's vastly superior to lazy-downloading of individual files.

Once you've dealt with the files, Angular handles the rest, executing dependencies only when they're actually needed.

In the example above, @Jose, your problem was that you're not attaching your dependencies properly to the original module. You're creating new modules and burying the dependencies inside of them. In the first version, you used var app to cache the reference to the module called 'app' and then did app.controller(), etc. So, you're calling the .controller() method on the app module.

But in the second, you still need to attach those dependencies to the main app module. To do that, you need to call angular.module('app') to access the original module, then you can chain a call to .controller() or .directive() from that module, once you've retrieved it.

Bottom-line, use Angular's constructs for the loading of Angular dependencies. If, after you've gotten all of that out of the way, you still want to use Require for loading third-party scripts, go ahead. But I recommend testing first to see if you're actually adding value.

Collectives™ on Stack Overflow

Can you use Angular dependency injection instead of RequireJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related