Cách định cấu hình ứng dụng AngularJS khi tải?

Question

tôi muốn làm một cái gì đó như thế này (nhưng rõ ràng không này chính xác, bởi vì chức năng này không hoạt động theo cách này)

angular.bootstrap($("#myelement"), ['myModule'], {foo: bar}); 

Tôi muốn vượt qua trong một đối tượng cấu hình, vì chúng ta có thể muốn có nhiều hơn một ví dụ của ứng dụng trên một trang, với các cài đặt khác nhau, v.v ... Tất cả những gì tôi có thể nghĩ là giải pháp xấu. Tôi nghĩ điều tốt nhất sẽ là ghi đè một dịch vụ "Tùy chọn" của việc tạo của riêng tôi, nhưng tôi vẫn không thể tìm ra cách thích hợp để làm điều đó (tẻ nhạt).

Cảm ơn trước!

Answer 1

Làm thế nào về bạn thử một cái gì đó như thế này:

angular.module('configFoo', []).run(function() {}); 

angular.module('configBar', []).run(function() {}); 

angular.bootstrap(myEl, ['myModule', 'configFoo']); 

angular.bootstrap(myOtherEl, ['myModule', 'configBar']); 

http://docs.angularjs.org/api/angular.Module cho tất cả các phương pháp mô-đun có sẵn (bạn có thể chỉ quan tâm đến việc .run() và .config())

Answer 2

Đây là một đang làm việc: http://jsfiddle.net/x060aph7/

angular.module('myModule', []) 
    .controller('myController', function($scope,myConfig) {    
     $scope.name = 'inst '+myConfig.foo; 
    }) 
; 

var aConfig = [{foo:1},{foo:2},{foo:3}]; 
aConfig.forEach(function(config){ 
    angular.module('fooConfig',[]).value('myConfig', config); 
    angular.bootstrap(getDiv(), ['myModule','fooConfig']); 
}); 

function getDiv(){ 
    var mDiv = document.createElement('div'); 
    mDiv.setAttribute('ng-controller','myController'); 
    mDiv.innerHTML = '<span>{{name}}</span>'; 
    document.body.appendChild(mDiv); 
    return mDiv; 
} 

Answer 3

Ví dụ sau đây giúp chúng ta ra khỏi khởi tạo một tiện ích sang trang. Đầu tiên một div được tạo ra - với một chút jQuery - cho tiện ích tải mẫu với một số ng-include, nó được điều khiển bởi WidgetLogoController. Tiếp theo, một mô-đun WidgetConfig được tạo để giữ cấu hình của tiện ích.

$('#pageWidget').html(`<ng-include src="'/dist/templates/widgetLogo.html'"></ng-include>`) 
    .attr('ng-controller','WidgetLogoController'); 

    var widgetConfig = { 
     'widgetId': data.pageWidgetId, 
     'areaId': data.area, 
     'pageId': data.pageId 
    }; 
    angular.module('WidgetConfig', []).value('WidgetConfig', widgetConfig); 
    angular.bootstrap(document.getElementById('pageWidget'), ['Widget', 'WidgetConfig']); 

Widget mô-đun bao gồm các cấu hình WidgetConfig nhưng cũng có một chỗ cho nó sở hữu trong CONFIG:

(function (window, angular) { 

    'use strict'; 

    window.app = angular.module('Widget', ['ngFileUpload', 'WidgetConfig']) 

    .constant('CONFIG', { 
     BASE_URL: 'http://osage.brandportal.com/' 
    }); 

})(window, angular); 

WidgetController có thể truy cập CONFIG và WidgetConfig.

(function (app) { 

    'use strict'; 

    app.controller('WidgetLogoController', ['CONFIG', 'WidgetConfig', 
     function(CONFIG, WidgetConfig){ 

      console.log('---WidgetLogoController'); 
      console.log('CONFIG', CONFIG); 
      console.log('WidgetConfig', WidgetConfig); 

     }]); 

}(app)); 

Answer 4

gì về:

1. tải cấu hình và hơn tải góc:

   angular.element(document).ready(() => { 
   $.get('config', // url to my configuration 
        {}, 
        function (data) { 
         window.config = data; 
         angular.bootstrap(document, ['myApp']); 
        } 
       ); 
   }); 
   

2. Truy cập config:

   angular.module('myApp').run(myAppRun); 
   
   function myAppRun($window) { 
       $window.config; // here I have config 
   }