AngularJs 视图未显示
AngularJs View not showing
嗨,我是 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-view>
</div>
</div>
错误是由于缺少包含 ngRoute 模块造成的。需要单独包含
尝试在您的脚本中包含以下内容
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
参考this了解更多详情。
嗨,我是 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-view>
</div>
</div>
错误是由于缺少包含 ngRoute 模块造成的。需要单独包含
尝试在您的脚本中包含以下内容
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
参考this了解更多详情。