Javascript 在Extjs的SPA中使用Angular

我有一个使用Extjs的水疗网站

我尝试实现的是，单击菜单项时，应该加载一个用angular编写的html页面。我编写了一个包含角度屏幕的html文件，并将其放在一个Extjs面板（）中。尽管显示了html元素（实际上是我的按钮），但角度部分（脚本）不起作用

Ps：angular和所有其他必要的模块已经加载

HTML部分：

<div ng-app="MyApp" ng-controller="MainCtrl">

    <button id="button_add" class="btn" ng-click="add()">Add</button>
    <span> {{n}} </span>
    <script>
    var app = angular.module('MyApp', [
            ]);
    app.controller('MainCtrl', ['$scope', function ($scope) {
                $scope.n = 0;

                $scope.add = function () {
                    $scope.n = $scope.n + 1;
                };
            }
        ]);
    </script>
</div>

结果是：

---

试试这个：app.controller（'MainCtrl'、['$scope'、'uiGridConstants'、'uiGridConstants'、'uiGridConstants'、'http'，函数（$scope、uiGridConstants、$http）。有控制台错误吗？？？对不起！当我试图简化代码时，我忘记了删除参数！但无论如何，即使我的语法有问题，我也看不到控制台中有任何错误。请尝试包含var app=angular.module（'MyApp'，[]）；app.controller（'MainCtrl'，['$scope'，function（$scope）{$scope.n=0；$scope.add=function（）{$scope.n=$scope.n+1；}；}；}；}；；在head tagI中，我现在已经尝试过了，但不幸的是结果是相同的

var test = Ext.create('Ext.panel.Panel', {
            title : 'Example 1',
            width : 250,
            height : 250,
            frame : true,
            autoLoad : {
                url : './test.html'
            }
        });