javascriptangularjsangularjs-moduleangularjs-config

AngularJS - module uses config from a different file


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?


Solution

  • 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