Конфигурация загрузки AngularJS при запуске приложения

Ответ 1

EDITED

Похоже, что вы пытаетесь настроить службу с параметрами. Чтобы загружать внешний файл конфигурации асинхронно, вам придется загружать приложение angular самостоятельно внутри полного обратного вызова загрузки данных, вместо использования автоматической развертки.

Рассмотрим этот пример для определения службы, на самом деле не имеющего URL-адреса службы (это будет что-то вроде contact-service.js):

angular.module('myApp').provider('contactsService', function () {

    var options = {
        svcUrl: null,
        apiKey: null,
    };

    this.config = function (opt) {
        angular.extend(options, opt);
    };

    this.$get = ['$http', function ($http) {

        if(!options.svcUrl || !options.apiKey) {
            throw new Error('Service URL and API Key must be configured.');
        }

        function onContactsLoadComplete(data) {
            svc.contacts = data.contacts;
            svc.isAdmin = data.isAdmin || false;
        }

        var svc =  {
            isAdmin: false,
            contacts: null,
            loadData: function () {
                return $http.get(options.svcUrl).success(onContactsLoadComplete);
            }
        };

        return svc;
    }];
});

Затем, когда документ готов, вы должны сделать вызов для загрузки вашего файла конфигурации (в этом случае, используя jQuery). В обратном вызове вы затем выполнили свой angular app.config с использованием загруженных json-данных. После запуска .config вы вручную загрузите приложение вручную. Очень важно: не используйте директиву ng-app, если вы используете этот метод, или angular будет загружать себя. Подробнее см. этот url:

http://docs.angularjs.org/guide/bootstrap

Так же:

angular.element(document).ready(function () {
    $.get('/js/config/myconfig.json', function (data) {

        angular.module('myApp').config(['contactsServiceProvider', function (contactsServiceProvider) {
            contactsServiceProvider.config({
                svcUrl: data.svcUrl,
                apiKey: data.apiKey
            });
        }]);

        angular.bootstrap(document, ['myApp']);
    });
});

UPDATE: Вот пример JSFiddle: http://jsfiddle.net/e8tEX/

Ответ 2

Я не мог заставить этот подход предложить моему Киту Моррису работать.

Итак, я создал файл config.js и включил его в index.html перед всеми файлами angular

config.js

var configData = {
    url:"http://api.mydomain-staging.com",
    foo:"bar"
}

index.html

...
<script type="text/javascript" src="config.js"></script>
<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>

то в моей функции запуска я установил переменные config в $rootScope

.run( function run($rootScope) {
    $rootScope.url = configData.url;
    $rootScope.foo = configData.foo;
    ...
})

Ответ 3

Вы можете использовать константы для таких вещей:

angular.module('myApp', [])

// constants work
//.constant('API_BASE', 'http://localhost:3000/')
.constant('API_BASE', 'http://myapp.production.com/')
//or you can use services
.service('urls',function(productName){ this.apiUrl = API_BASE;})

//Controller calling
.controller('MainController',function($scope,urls, API_BASE) {
     $scope.api_base = urls.apiUrl; // or API_BASE
});

//в html-странице вызовите его {{Api_base}}

Есть также несколько других опций, включая .value и .config, но все они имеют свои ограничения. .config отлично, если вам нужно обратиться к провайдеру службы, чтобы выполнить некоторую начальную настройку. .value походит на константу, за исключением того, что вы можете использовать разные типы значений.

fooobar.com/info/30581/...