すべて1つの指令+サービス+コントローラ

Question

私は独立した指令を作ることが可能かどうか疑問に思っています。

私はAngularJSで非常に新しいです、私が探しているものに深い概念的なミスがある場合はお知らせください。

私の現在である "試す"：

(function() { 
    // a module for holding the directive 
    var app = angular.module('monitorApp', []); 

    // a service for getting some data 
    app.service("MonitorService", function ($http, $q) { 
     return ({ 
      getMonitorInfo: getMonitorInfo 
     }); 

     function GetMonitorInfo() { 
      var request = $http({ 
       method: "get", 
       url: "/IndicatorsReport/GetMonitorInfo" 
      }); 
      return (request.then(notifyErrorIfNeed, handleError)); 
     } 

     function handleError(response) { 
      if (!angular.isObject(response.data) || !response.data.message) { 
       return ($q.reject("An unknown error occurred.")); 
      } 
      return ($q.reject(response.data.message)); 
     } 

     function notifyErrorIfNeed(response) { 
      var data = response.data; 
      if (data.status !== "success") { 
       new PNotify({ 
        title: data.title, 
        text: data.text, 
        type: 'error', 
        hide: false, 
        styling: 'bootstrap3' 
       }); 
      } 
      return data; 
     } 
    }); 

私はちょうど私のhtmlページに次のコードを追加しようとして

app.directive('monitorButton', function ($document) { 
     // a self initializing controller 
     var controller = ['$scope', function ($scope, MonitorService) { 
      var vm = this; 
      function init() { 
       MonitorService.GetMonitorInfo().then(function (data) { 
        // this is the actual data 
        vm.feedBots = data.feedBots; 

        // this is fake data yet 
        vm.flags = { 
         cls: 'bg-blue', 
         number: 3, 
         show: true 
        }; 
       }); 
      } 
      init(); 
     }]; 

     //a very simple template 
     var template = '<button type="button" class="btn btn-app">' + 
         ' <span class="badge {{vm.flags.cls}}" ng-show="vm.flags.show">{{vm.flags.number}}</span>'+ 
         ' <i class="fa fa-dashboard"></i> Monitor'+ 
         '</button>'; 

     // my directive params 
     return { 
      restrict: 'EA', 
      controller: controller, 
      scope: {}, 
      controllerAs: 'vm', 
      bindToController: true, 
      template: template 
     }; 
    }); 
}()); 

//私の実際の指令（オフコースangularjsと一緒に） ：

：

<script src="/app/directives/monitor.js" type="text/javascript"></script> 

最後に、私は単純に同じようにそれを呼び出すために意図されました

<monitor-button></monitor-button> 

編集

それが動作していない、私は、ページ内の任意の要素を見ていないです。

Answer 1

独立した角度のアプリケーションでは、ページ上のアプリケーションをブートストラップするangular.bootstrapを呼び出し、

//monitor.js 
(function(){ 

    var app = angular.module('monitorApp', []); 

    //define your app... 

    //bootstrap your app... 
    angular.bootstrap(document, ['monitorApp']); 

})()