CODEWITHSUNDEEP
javascriptangularjsrequirejs
user3290525
user3290525

Reputation: 731

Using require js with angular js

I'm trying to use require js and angular js together. Referred to someone guides by googling:

Both guides seem to use angular, and angular-route and angular-amd, but I thought they were for other complicated purposes, so I only used "angular js" (so there is no shim in require.config()).

My main.js looks like this;

require.config({
    paths: {
        jquery      : 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min',
        'angular'   : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min',
        'class'     : 'class',
        'utility'   : '../utility/utility',
    },

    deps: ['main1']
});

where deps: ['main1'] is the file to load right after require is defined as the first guide uses.

But I'm keep getting this error:

Error: $injector:modulerr

('UpdateApp' is the name of the app that I'm using in my project.)

And the webpage says that I get the error when I've forgotten to include the file with the defined module.

Not using deps: ['main1'] but using require(['angular'], function(){} and logging out angular.module('myApp',[]) logs Object nicely though. ... It seems like require(['angular'], function(angular) does not work but require(['angular'], function() works for me, and guides don't seem to tell me whether I should do the latter or the former.

I thought it would be as simple as adding angular js in paths, and loading it with require() or define() will work, but it's not...

How do I use Require JS and Angular JS as simple as just using them together to print "hello world"?

Upvotes: 2

Views: 811

Answers (3)

SDH
SDH

Reputation: 391

Require JS will give you a package dependency manager, concatenator/uglifier, javascript file loader, and an injector. Require JS injectors are used for injecting classes versus Angular, which is used to inject instances.

The big advantage is that RequireJS is going to speed up your application by managing your load and runtime dependencies. It's useful for big SPA's.

You can set up your file structure by defining all of your dependencies using "define". For functions to execute, you will need to use "require".

Here is a helpful video:

https://www.youtube.com/watch?v=4yulGISBF8w&index=1&list=PLgVbnDyASc1qDAam3Fe0f-u6u9MYL6pC8

Upvotes: 0

Học Thiết kế OniVn
Học Thiết kế OniVn

Reputation: 73

Inside your main1.js you must be use require(['angular'], function(){} to start your application.

Upvotes: 0

Linh Pham
Linh Pham

Reputation: 3025

Looking into your code, I can see that you clearly mis-understood about the concept of using requireJS and angular together. Either of the links you found are make by expert JS developers. Where both tried to combine angular and requireJS as simple as it could. So you need to accept the fact that it is complicated.

=> This is why I will not try to help you with some code. Because it will took lots of time and it will related with many topic which will not likely fit into a single question and answer on stackoverflow.

How do I use Require JS and Angular JS as simple as just using them together to print "hello world"?

At first I want to repeat it. This is nothing like simple work. For requireJS you need to at least have advanced knowledge about what called AMD and able to imagine how things happen asynchronusly when requireJS trying to load an JS library.

Secondly, common knowledge about angular module/service injeaction. Since both requireJS and angular can do some sort of module/service injection you need to know about the difference between these two.

Third, the initial stage of your webapp. Since both requireJS and angular need to be initialled to run properly. So this will also the requirement.

Sum up

You will NOT able to understand both in a day or two. It will take time. But fortunately I have a couple of suggestions for you.

  • Research some about how requireJS and angular load their depenencies.
  • Go for angularAMD get the project seed. Set it up, run it, play with it.
  • Improve your knowledge about the initial state of both.
  • ...
  • Profit!

P.S. just FYI. An year ago, I started with requireJS and angular. And I got hitted up with a big wall of knowleges, just like you. And these are what I have tried to understand them. Take your time, it is not like using jquery which can learn in a day or two. Even for some JS expert it took months just for them to confident about angular (not counting combine it with requireJS). Cheers!

Upvotes: 1

Related Questions