AngularJs 视图未显示答案

【问题标题】：AngularJs View not showingAngularJs 视图未显示
【发布时间】：2015-03-29 17:49:27
【问题描述】：

您好，我是 Angular js 的新手。当我加载页面时它显示两个错误

1 - 错误：[$injector:unpr]

2 - 错误：[$injector:cdep]

HTML

index.html

<body ng-app="MyApp">
    <nav>
        <!-- navbar items displaying here -->
    </nav>
    <div ng-view></div>
</body>
<script src="libs/js/angular.js"></script>
<script src="libs/js/angular-route.min.js"></script>
<!--angular controller file-->
<script src="libs/apps.js"></script>
<script src="libs/controller.js"></script>
<!--Other UI Libraries-->
<script src="libs/js/jquery.min.js"></script>

partials/developers.html

  <section class="developer">

  <div class="container-fluid">
  <div class="col-md-9 col-md-offset-3">
<form ng-submit="check()">
<div class="form-group">
  <div class="col-md-6"> 
    <input type="text" class="form-control" autofocus="true"  ng-model-options="{debounce: 300}" ng-model="search" placeholder="Search text here"/>
    </div>
  </div>

</form> 
  </div>
  <div class="sort col-md-5 col-md-offset-3">
  <label class="formgroup">Sort By</label>
    <select ng-model="order">
      <option value="name" selected="selected">
        Name
      </option>
      <option value="org">
        Organisation
      </option>
      <option value="designation">
        Designation
      </option>
    </select>
    <label class="formgroup">
      <input ng-model="direction" type="radio" name="order" checked>
      Ascending
    </label>
<label class="formgroup">
        <input ng-model="direction" type="radio" name="order" value="reverse">
        Descending
</label>

  </div>
  <div class="col-md">
    <div class="col-md-9 col-md-offset-3">
    <div class="col-md-6 mydiv"  ng-clock>
      <ul ng-show="search  ">
        <li class="items" ng-repeat="item in list | filter:search | orderBy:order:direction" ng-model-options="{ updateOn: 'blur' }">
            <label class="lbl">Name</label><p class="text name" ng-bind="item.name"></p>
            <label class="lbl">Designation</label><p  class="text desig" ng-bind=" item.designation"></p>
            <label class="lbl">Organisation</label><p  class="text org" ng-bind="item.org"></p>
              <div class="clear"></div>
        </li>
      </ul>
    </div>

  </div>

</div><!--Container fluid closes-->

</section>

app.js

var myApp = angular.module("MyApp",[
    'ngRoute',
    'appController'
    ]);

myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
    when('/list',{
        templateUrl : 'partials/developers.html',
        controller:'DeveloperController',
    }).
    otherwise({
        redirectTo: '/list'
    });

}]);

controller.js

var appController = angular.module("appController", []);
appController.controller('DeveloperController', ['$scope','$http',function($scope,$http) {

   $scope.name="asdsas";

}]);

查看控制台图片here

编辑

this 是我的项目目录结构。会不会有什么麻烦。我没有在 wamp 或任何其他服务器上运行它。

请大家帮我解决

【问题讨论】：

您的 index.html 中有错字，第一句需要<div ng-app="MyApp"> 而不是<div ng-app="MyApp"，最后一句还需要结束>
嘿，我在发布我的答案时没有注意到 @Ricconnect 的评论。
@Ricconnect hei 实际上我已经给出了这样的演示，我编辑了与我的代码相同的问题，请看一下
您仍然缺少 html 标签的结束标签 :) </html 必须是 </html>。除此之外，我认为您的代码看起来不错。
在我的编辑器中一切正常，但仍然是同样的错误，我认为该错误可能与 routeProvider 有关

标签： javascript angularjs angularjs-directive angularjs-routing ng-view

【解决方案1】：

该错误是由于缺少包含 ngRoute 模块引起的。它需要单独包含

尝试在您的脚本中包含以下内容

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

更多详情请参考this。

【讨论】：

不，我已经添加了 angular.js 和 angular-route.min.js
我已经用你的代码创建了一个 plunker，它可以正常工作。看到这个plnkr.co/edit/4pGxWf7aKzZ5PxOxZpuM?p=preview
哦，那真是太酷了，它在 plunker 中运行良好，但是为什么不在这里：D
您是从本地服务器运行的吗？如果不是，它将不会加载模板。您需要使用任何技术 php 创建一个 localhost，无论您喜欢什么，都可以从该节点运行它
@Neetu 错误出现在我的 route.min.js 中，我不知道为什么，我已经从 angular js 官方网站下载了它。现在它的工作很好 bcs 我正在使用 CDN .. 谢谢

【解决方案2】：

为 index.html 提供的代码不正确。看看这是否有帮助

<div ng-app="MyApp">
    <div ng-view>
    </div>
</div>

【讨论】：