Angular js，简单的应用程序无法运行

Question

所以，我的网站正在分页，它是通过对 div 进行 .load 来完成的，我没有使用 Angular JS 来加载子页面，我只想在我的子页面中使用 Angular 。

这是我的子页面

    <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


<div data-ng-app="myApp">

    <div data-ng-controller="appCtrl">
      <p>{{greeting.text}}, world </p>
    </div> 


</div>

<script>
    $(document).ready(function () {
        var appname = angular.module('myApp', []);
        appname.controller('appCtrl', ['$scope',
          function ($scope) {
              $scope.greeting = { text: 'Hello' };
          }]);
    })

</script>

它已加载到 masterPage/Index 但 Angular JS 不起作用，它没有执行任何操作，我做错了吗？

如果我加载页面本身，没有索引，应用程序可以正常工作，但有索引则不行

我收到此控制台输出消息：更新将 body 而不是 div 删除了此控制台输出，但我的应用程序仍然无法正常工作。如果我里面有正文，我的整个分页系统将无法工作，它会在加载页面时将其删除，所以jeah

Uncaught Error: Unknown provider: $controllerProvider from myApp

Answer 1

您尚未声明应用程序名称：

<div data-ng-app>

应该是

<div data-ng-app="myApp">

然后在您的代码中您可以执行以下操作：

angular.module('myApp', []);

Answer 2

您正在使用 jQuery 来等待文档就绪事件，但 jQuery 尚未包含在内。

您也不需要应用程序和控制器上的数据前缀。

试试这个：

   <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>


<div ng-app="myApp">

    <div ng-controller="appCtrl">
      <p>{{greeting.text}}, world </p>
    </div> 


</div>

<script>

        var appname = angular.module('myApp', []);
        appname.controller('appCtrl', ['$scope',
          function ($scope) {
              $scope.greeting = { text: 'Hello' };
          }]);


</script>