Angular中的Routeprovider
[英]Routeprovider in Angular
問題描述
我對Angular真的很陌生，我試圖將routeProvider添加到我的應用程序中，但是它一直給我這個錯誤：
未捕獲的錯誤：[$ injector：modulerr]由於以下原因而無法實例化模塊應用程序：錯誤：[$ injector：nomod]模塊“ app”不可用！ 您可能拼錯了模塊名稱，或者忘記了加載它。 如果注冊模塊，請確保將依賴項指定為第二個參數。
這是我的index.html的樣子：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
我的app.js看起來像這樣：
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('segmentListCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('data/segments.json').success(function (data){
$scope.segmentList = data;
});
}]);
這是我用作路由模板的splash.html的內容：
<div id="splash" class="row" ng-controller="segmentListCtrl">
<div class="columns segment" ng-repeat="segment in segmentList">
<a href="#">
<h2>{{segment.title}}</h2>
<h5>{{segment.sub}}</h5>
</a>
</div>
</div>
在我嘗試添加ng-route之前，一切正常。 但是，由於我嘗試將其拆分，所以我不斷收到該錯誤，並且不知道如何解決。 感謝您的幫助！
2 個解決方案
解決方案1
2 2015-04-09 13:09:05
在myApp.config您忘記了最后的大括號] 。
另外，由於您.when('/' ....)在.when('/' ....)使用angular時，就指定了控制器，這等效於將ng-controller放在模板的頂部，因此無需在模板本身。
所以這：
<div id="splash" class="row" ng-controller="segmentListCtrl">
會很好的
<div id="splash" class="row">
解決方案2
1 已采納 2015-04-09 13:08:57
對我來說，您的app config聲明中存在語法錯誤：
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
應該：
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
如您所見，最后的']'丟失了。 告訴我這是否為您解決。 謝謝
Angular JS routeProvider中的問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.