NG-視圖無法顯示數據

-----index.html------- 
<html> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular- 
route.js"></script> 
<script src="main.js"></script> 
<script src="aboutController.js"></script> 

<div ng-app="myApp" ng-controller="aboutController"> 
     <h1>About Page</h1> 
    <p>{{ message }}</p> 

<button ng-click="go()">Submit</button> 

<div ng-view></div> 

</div> 
</html> 


----main.js-------- 

var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/go", { 
     templateUrl : "sample.html" 
    }); 
}); 

----aboutController.js--------- 

    var app = angular.module("myApp", []); 

    app.controller('aboutController', function($scope,$http,$location) { 
    $scope.name=""; 
    $scope.message="Home Page"; 


    $scope.go= function(){ 
    $http.get('content.json').success(function(data) { 
     $scope.obj = data; 
     $location.path("/go"); 
    }); 
    } 

    }); 

------sample.html-------- 
<h1>Sample Page</h1>

我試圖在該試驗中應用程序中使用的角路由。你能告訴我在這裏做錯了什麼嗎？當我點擊提交按鈕時，地址欄中的位置變爲「http://localhost:8080/index.html#/go」，但我在ng-view中看不到「sample.html」的內容。NG-視圖無法顯示數據

來源

2017-04-14 Garry

這會容易得多當你提供一個Plunker時，找到這種行爲的原因。 –

你的代碼有很多問題 – Sajeetharan

@Sajeetharan這些問題是什麼？ – Garry

您正在爲您的應用程序聲明模塊兩次，因此它將覆蓋第一個配置。刪除第二個聲明：var app = angular.module("myApp", []);

繼承人你的代碼的工作（我已經刪除GET請求和取代的模板URL與模板示範的目的）：

var app = angular.module("myApp", ["ngRoute"]); 
 
app.config(function($routeProvider) { 
 
    $routeProvider 
 
    .when("/go", { 
 
     template: "<h1>Sample Page</h1>" 
 
    }); 
 
}); 
 

 
app.controller('aboutController', function($scope, $http, $location) { 
 
    $scope.name = ""; 
 
    $scope.message = "Home Page"; 
 

 

 
    $scope.go = function() { 
 
    $location.path("/go"); 
 
    } 
 

 
});

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular- 
 
route.js"></script> 
 
<script src="main.js"></script> 
 
<script src="aboutController.js"></script> 
 

 
<div ng-app="myApp" ng-controller="aboutController"> 
 
    <h1>About Page</h1> 
 
    <p>{{ message }}</p> 
 

 
    <button ng-click="go()">Submit</button> 
 

 
    <div ng-view></div> 
 

 
</div> 
 

 
</html>

來源

2017-04-14 18:23:44 cnorthfield

NG-視圖無法顯示數據

回答

相關問題