AngularJS - module uses config from a different file

Question

I am new to AngularJS and I don't know if this is possible.

This is my current code:

var app = angular.module('qlikCockpitApp',['pascalprecht.translate','720kb.tooltips']);

app.config(['$translateProvider', function ($translateProvider) {
... 
});

I want to move this app.config to another file, and access from my module file. Is it possible? How can I do this?

Answer 1

You can add 2 file or more for each part of your application

Remember in this case you have 1 app this mean (var app = angular.module('qlikCockpitApp', []))

app.js

var app = angular.module('qlikCockpitApp',['pascalprecht.translate','720kb.tooltips']);

app.config.js

app.config(['$translateProvider', function ($translateProvider) {
 ... 
});

add files in your index.html with right sort:

<script src="app.js"></script>
<script src="app.config.js"></script>

Using Labjs: if you want to load files as lazyload

index.html

<div id="app"></div>
<!--required: download labjs library-->
<script src="lab-library.js"></script>
<script src="bootstrapper.js"></script>

in this case do not use ng-app set id attribute

bootstrapper.js

$LAB.script(
    "/angular.js",
    "/app.js",
    "/app.config.js"
)
.wait(function () {
    var root = document.getElementById("app");
    angular.bootstrap(root, ["app"]);
});

Add / before files directory