Can you explain a bit more how main.coffee works? about angularfun HOT 6 CLOSED

Leif,

The shim configuration simply sets up the dependencies for any module that may be loaded.
These modules do not get loaded unless they are requested.

The next section, within the array, are the modules that are being requested.

So, if we have

require
    shim:
        'controllers/gitHubController'       : deps: ['app', 'services/gitHubService']
        'controllers/personController'       : deps: ['app', 'services/personService']
        'controllers/personDetailsController': deps: ['app', 'services/personService']
        'controllers/searchHistoryController': deps: ['app', 'services/messageService']
        'directives/ngController'            : deps: ['app']
        'directives/tab'                     : deps: ['app']
        'directives/tabs'                    : deps: ['app', 'directives/tab']
        'filters/twitterfy'                  : deps: ['app']
        'libs/angular-resource'              : deps: ['libs/angular']
        'responseInterceptors/dispatcher'    : deps: ['app']
        'services/gitHubService'             : deps: ['app', 'services/messageService']
        'services/messageService'            : deps: ['app']
        'services/personService'             : deps: ['app']
        'app'                                : deps: ['libs/angular', 'libs/angular-resource']
        'bootstrap'                          : deps: ['app']
        'routes'                             : deps: ['app']
        'run'                                : deps: ['app']
        'views'                              : deps: ['app']
    [
        'require'
        'controllers/gitHubController'
    ], (require) ->
        angular.element(document).ready ->
            require ['bootstrap']

Only the gitHubController is requested to be loaded.
Following the dependency chain, the following will be loaded.

• controllers/gitHubController
• app
• libs/angular
• libs/angular-resource
• services/gitHubService
• services/messageService

Notice that personService, routes, views, and others are not loaded. They are defined (configured) in the shim section, but in the sample above are not loaded.

require is requested so after the modules are loaded we can request bootstrap. When loading modules asynchronously, bootstrap needs to be called last. Requesting it in the callback ensures it is last.

I hope this helps.

Thanks,
Cary

from angularfun.

Thank you for this project and for the further explanation of main.coffee.

What if I wanted to include some third party js that is using jquery? Do I include it directly in the index template or ?

from angularfun.

Including it in the index template does work. The best way is to angularize everything, but in lieu of that, direct index inclusion does work.

from angularfun.

In the sample it loads all the scripts in the browser. Does this application load javascript(eg personController,PersonService etc) when required or I am missing something.

from angularfun.

Hey @bkak,

Yes the JavaScript files are loaded as-needed via RequireJS.
Keep in mind this is only necessary in the dev build. The prod build compiles everything into one file and doesn't need this functionality.

Thanks,
Cary

from angularfun.

@jwall,

Including jQuery with AngularJS apps requires jQuery to load prior to AngularJS.
Certainly the easiest way is to add jQuery to the index.html file.
RequireJS does provide the ability to include external files via its configuration, however.

Thanks,
Cary

from angularfun.