Where to use .constant and add additional external mods? about angularfun HOT 14 CLOSED

Hi @jwall,

Using ngShim you no longer need an app file. It's created for you.
So you no longer need to do angular.module 'app', <%= config.modules %>.

When including modules other than app, you will need to add them to the modules section of ngShim.

As for constants, they can be treated just like any other module type.

# file:  src/scripts/constants/version.coffee
angular.module('app').constant 'version', '0.1'

Let me know if this works. I may need to tweak the ngShim grunt task a bit.
If you're interested, here it is.

Thanks,
Cary

from angularfun.

In order to get my code to work I modified ngShim so that it grabs my app template with the constants defined. If I don't do it that way the app.config module isn't loaded at the right time. I have tried a version.coffee and also putting the constants in the routes.coffee file, but both fail. (Follow-up: I can use a constants.coffee and not modify the app template, but I still need the additionalModules as described below to include app.config)

Also, because I have external js files loaded via a cdn, the modules array didn't work for me, i.e., I only have a key and no value. So, I added an additionalModules array to make sure the app gets the external js module dependencies.

Lastly, I have a js file that extends a module so there is no module but there is a js dependency.

All, very dirty for your clean setup, but I guess when you rely on third party source this can happen :-)

My ngShim:

ngShim:
  scripts:
    cwd: './.temp/scripts/'
    angular: 'libs/angular.min.js'
    angularFire: 'libs/angular-fire.js'
    appTemplatePath: '../../../src/scripts/libs/templates/app.tpl'
    additionalModules: ['app.config', 'firebase']
    modules: [
      'ngAnimate': 'libs/angular-animate.min.js'
      'ngResource': 'libs/angular-resource.min.js'
      'ngRoute': 'libs/angular-route.min.js'
    ]
    src: '**/*.coffee'
    dest: 'main.coffee'

where

angularFire: 'libs/angular-fire.js'

is the module extension (extends the firebase module).

appTemplatePath: '../../../src/scripts/libs/templates/app.tpl'

is to add the constants into the app directly.

additionalModules: ['app.config', 'firebase']

is to handle the external js modules.

from angularfun.

I refactored the ngShim portion a bit so now it looks like so:

ngShim:
  scripts:
    cwd: './.temp/scripts/'
    angular: 'libs/angular.min.js'
    externalModules: ['app.config', 'firebase']
    externalLibs: ['libs/angular-fire.js']
    modules: [
      'ngAnimate': 'libs/angular-animate.min.js'
      'ngResource': 'libs/angular-resource.min.js'
      'ngRoute': 'libs/angular-route.min.js'
      'ui.bootstrap': 'libs/ui-bootstrap-tpls.min.js'
    ]
    src: '**/*.coffee'
    dest: 'main.coffee'

so this lets you use modules that are externally loaded (and also my constants issue) and libs that extend a module.

from angularfun.

Can you clarify what you mean by "modules that are externally loaded"?

from angularfun.

I meant in the index.html as:

<script src="http://somecdn.com/somejavascriptmodule.js"></script>

or even referenced locally as:

<script src="/scripts/libs/somejavascriptmodule.js"></script>

from angularfun.

Neither non AngularJS nor external references are supported.
This would need to be added.

You should be able to do the following, however.

ngShim:
    scripts:
        cwd: './.temp/scripts/'
        angular: 'libs/angular.js'
        modules: [
            'ngAnimate': 'libs/angular-animate.min.js'
            'ngResource': 'libs/angular-resource.min.js'
            'ngRoute': 'libs/angular-route.min.js'
            'firebase': 'libs/angular-fire.js' # firebase is just another module and can be incorporated as such
        ]
        src: '**/*.coffee'
        dest: 'main.coffee'

from angularfun.

I thought they weren't supported which is why I made the ngShim modifications, but I wanted to make sure.

Thank you for your answers and for the great repo.

from angularfun.

There are two things not supported yet.

1. Loading non AngularJS files (e.g. jQuery) in a specific order. For example, guarantee that jQuery loads prior to Angular.
2. Loading files from a CDN (i.e. http://mycdn.com/angular.js).

If you are only consuming local Angular files, you're good. :)

Thanks!

from angularfun.

I want to use "restangular". It has "underscore" as a dependency. What's the correct way to load this module?

    modules: [
      'ngAnimate': 'libs/angular-animate.min.js'
      'ngResource': 'libs/angular-resource.min.js'
      'ngRoute': 'libs/angular-route.min.js'
      'underscore': 'libs/underscore-min.js'
      'restangular': 'libs/restangular.min.js'
    ]

This isn't working, because underscore isn't an angularjs-module.

from angularfun.

Hi Angelo,

I had to refactor the grunt plugin to allow for non-Angular dependencies.
Although ngShim was just introduced, some users are using it already.
So, here comes shimmer, which is an Angular-agnostic RequireJS main file builder. But there is a bit of Angular magic (see NGMODULES, NGAPP, NGBOOTSTRAP).

shimmer:
    scripts:
        cwd: './.temp/scripts/'
        src: [
            '**/*.{coffee,js}'
            '!libs/angular.{coffee,js}'
            '!libs/angular-animate.{coffee,js}'
            '!libs/angular-resource.{coffee,js}'
            '!libs/angular-route.{coffee,js}'
            '!libs/html5shiv-printshiv.{coffee,js}'
            '!libs/json3.min.{coffee,js}'
            '!libs/require.{coffee,js}'
        ]
        order: [
            [
                'libs/angular.min.js'
                'libs/lodash.min.js'
            ]
            'NGMODULES':
                'ngAnimate': 'libs/angular-animate.min.js'
                'ngResource': 'libs/angular-resource.min.js'
                'ngRoute': 'libs/angular-route.min.js'
                'restangular': 'libs/restangular.min.js'
            'NGAPP'
        ]
        require: 'NGBOOTSTRAP'

As you can see, lodash (underscore) was added to an array along with Angular. This allows lodash and Angular to load in any order. But the next object will load after both Angular and lodash.

For example, if the order configuration were as follows, Angular would load before lodash.

order: [
    'libs/angular.min.js'
    'libs/lodash.min.js'
    'NGMODULES':
        'ngAnimate': 'libs/angular-animate.min.js'
        'ngResource': 'libs/angular-resource.min.js'
        'ngRoute': 'libs/angular-route.min.js'
        'restangular': 'libs/restangular.min.js'
    'NGAPP'
]

Don't forget to add restangular to the bower.json file.

Don't forget to add restangular and lodash to the copy.app.files array.

    cwd: './bower_components/restangular/dist/'
    src: 'restangular.min.js'
    dest: './.temp/scripts/libs/'
    expand: true
,
    cwd: './bower_components/lodash/dist/'
    src: 'lodash.min.js'
    dest: './.temp/scripts/libs/'
    expand: true

I hope this helps,
Cary

from angularfun.

Hey Cary,

That sounds awesome. This new way looks very solid. I'll try it out as soon as I have some time.

Thank you very much :3

from angularfun.

Cool - please let me know if it does the trick!

from angularfun.

The new shimmer works well for me. I don't need my grunt-hustler fork anymore!

One other note is to remember to add dependencies to karma.unit.files array as well.

from angularfun.

@jwall, you're right - I'd like to create the main file for karma automatically as well.

from angularfun.