Использование Angular App в Angular Template

Question

У меня есть страница, которая работает как макет в MVC.NET. Он содержит угловое приложение, которое загружает HTML-страницу под названием «AngularJSON.html», используя templateUrl. AngularJSON.html содержит угловое приложение, которое выполняет $http.get() и заполняет таблицу результатами.

Если я загружаю «AngularJSON.html» в браузер самостоятельно, он выполняет GET и правильно заполняет таблицу. Если я загружаю страницу макета в браузер, статические элементы AngularJSON.html отображаются правильно, но таблица, использующая ng-repeat, вообще не отображается.

Как я могу правильно отобразить страницу шаблона в макете?

ReportableStocksLayout.html - Страница макета.

<script> 
     var mainApp = angular.module("mainApp", ['ngRoute']); 
     mainApp.config(['$routeProvider', function ($routeProvider) { 
      $routeProvider. 

      when('/viewStocks', { 
       templateUrl: 'AngularJSON.html', 
       controller: 'viewStocksController' 
      }). 

      otherwise({ 
       redirectTo: '/viewStocks' 
      }); 
     }]); 

     mainApp.controller('viewStocksController', function ($scope) { 
      $scope.message = "Add Cows"; 
     }); 

    </script> 

templateURL страница «AngularJSON.html» содержит угловое приложение, которое выполняет $http.get и заполняет таблицу с результатами.

AngularJSON.html -JavaScript

<script> 
    var app2 = angular.module('myApp2', []); 

    app2.controller('StocksController', function ($scope, $http) { 
     // When the page loads... 
     // Load myData with REST GET 
     $http.get("http://stocquer.com/stocQuerWebAPI/api/Ticker/").then(function (response) { 
      $scope.myData = response.data; 
     }); 
    }); 

</script> 

AngularJSON.html -HTML

<div ng-app="myApp2" ng-controller="StocksController"> 
    <table class="table"> 
     <tr> 
      <th> 
       Symbol 
      </th> 
      <th></th> 
     </tr> 

     <tr ng-repeat="x in myData"> 
      <td> 
       {{ x.Ticker }} 
      </td> 
      <td> 
       <a href="#" ng-click='EditTicker(x.Ticker)'>Edit</a> | 
       <a href="#" ng-click='DetailsTicker(x.Ticker)'>Details</a> | 
       <a href="#" ng-click='DeleteTicker(x.Ticker)'>Delete</a> 
      </td> 
     </tr> 

    </table> 

    <hr /> 
</div> 

Может быть, я столкнулся с проблемой самонастройки. Поскольку мои угловые приложения находятся в двух отдельных файлах HTML, я надеялся избежать этой проблемы.

Answer 1

Приложения AngularJS не могут быть вложены друг в друга.

Таким образом, использование маршрутизации не имеет большого смысла (?), Потому что вы должны делать вложенные, и это не сработает.

Однако, если вы не гнездятся AngularJS нг-приложение, то вы должны сделать это: Для запуска нескольких приложений в одном HTML-документе, необходимо вручную Bootstrap их с помощью angular.bootstrap()Link to documentation.

Так что я думаю, вы могли бы сделать так:

<div id="myApp2" ng-app="myApp2" ng-controller="StocksController"> 
    <table class="table"> 
     <tr> 
      <th> 
       Symbol 
      </th> 
      <th></th> 
     </tr> 

     <tr ng-repeat="x in myData"> 
      <td> 
       {{ x.Ticker }} 
      </td> 
      <td> 
       <a href="#" ng-click='EditTicker(x.Ticker)'>Edit</a> | 
       <a href="#" ng-click='DetailsTicker(x.Ticker)'>Details</a> | 
       <a href="#" ng-click='DeleteTicker(x.Ticker)'>Delete</a> 
      </td> 
     </tr> 
    </table> 
    <hr /> 
</div> 

А потом в JS

angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);