0
2つのボタンにルートを設定しようとしています。すべてが適切に表示され、定義されているため、このエラーが発生する理由を見つけるのを手伝ってください。ルートは機能していますが、テーブルにデータがありません。 私はメインのhtlmに<html ng-app="myApp">を持っていて、モジュールはどこにでも再定義されていません。私は他の同様の記事をチェックしましたが、私の問題に対処するための何かを見つけませんでした。
ありがとうございます。
メインのhtmlファイルの断片：
//main controller mainCtrl.js:
angular.module("myApp", [])
.controller('myAppCtrl',['getStockData','corsService','$scope', function(getStockData ,corsService, $scope) {
corsService.enableCors();
getStockData.getData().then(function(data){
$scope.products = data;
console.log("hello from ctrl",data);
});
}])
.controller('salesCtrl', function(getSalesData, $scope){
getSalesData.getData().then(function(data){
$scope.salesData = data;
console.log(data);
})
})
var app = angular.module("myApp");
//------------------------------------------------------------------------------
//route provider: routeProvider.js:
angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/products", {
templateUrl: "views/productsView.html",
// controller:"myAppCtrl"
})
.when("/sales", {
templateUrl: "views/salesView.html",
})
.otherwise({
templateUrl: "views/productsView.html",
// controller: "myAppCtrl"
});
})
.controller("routeCtrl" ,function ($scope, $location){
$scope.setRoute=function(route){
$location.path(route);
}
});
//---------------------------------------------------------------------------------
//getting the data getStockData.js:
app.service('getStockData', function($http){
var dataUrl = "https://someAPI";
return {
getData: function() {
var successCallback = function (response){
//the response object
console.log("the response object:", response);
return response.data;
}
var errorCallback =function (reason){
//the reason of error message
console.log("error", reason.data);
return reason.data;
}
//Returns a Promise that will be resolved
// to a response object when the request succeeds or fails.
return $http.get(dataUrl)
.then(successCallback, errorCallback);
}
}
});<body>
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Beerbay</a>
</div>
<div ng-controller="routeCtrl" class="col-sm-1">
<a ng-click="setRoute('products')"
class="btn btn-block btn-primary btn-lg">Products</a>
<a ng-click="setRoute('sales')"
class="btn btn-block btn-primary btn-lg">Sales</a>
</div>
<ng-view />
</body>
<!--the partial view: productsView.html----------------------------------------->
<div class ="col-sm-11" ng-controller="myAppCtrl">
<!--displaying the data-->
<h4>Products</h4>
<table id="product_table" class="table">
<thead>
<tr>
<!-- table headers removed for brevity-->
</tr>
</thead>
<tbody>
<tr ng-repeat = "item in products|orderBy: 'name'">
<!-- table body removed for brevity-->
<!-- here I am displaying the products from the $scope-->
</tr>
</tbody>
</table>
</div>
<!--the other partial view: salesView--------------------------------------------->
<body>
<p>This is the sales view</p>
</body>
はい、ただし、ルート設定が別のファイルにある場合、どのようにngRoute依存関係を追加できますか。私はこの変更を行います。 –
このような依存関係を追加できます var module = angular.module（ "myApp"）; module.requires.push（ '' ngRoute "） –
ありがとうございました！ –