Use Angular App in Angular Template

Question

I have a page that functions like a layout in MVC.NET. It contains an angular app that loads an HTML page named "AngularJSON.html" using templateUrl. AngularJSON.html contains an angular app that performs $http.get() and populates a table with the results.

If I load "AngularJSON.html" into a browser by itself, it performs the GET and populates the table correctly. If I load the layout page into a browser, the static elements of AngularJSON.html display correctly, but the table, which uses ng-repeat does not display at all.

How can I get the template page to display correctly within the layout?

ReportableStocksLayout.html - Layout page.

    <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>

The templateURL page "AngularJSON.html" contains an angular app that performs $http.get and populates a table with the results.

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>

Maybe I have encountered the bootstrapping problem. Since my angular apps are in two separate HTML files, I had hoped to avoid the problem.

Answer 1

AngularJS applications cannot be nested within each other.

So using routing doesn't make much sense (?) because you have to make nested and that will not work.

However if you are not nesting AngularJS ng-app then you have to do this: To run multiple applications in one HTML document you must manually bootstrap them using angular.bootstrap() Link to documentation.

So I guess you would do like this:

<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>

And then in JS

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