Question

-----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>

我正在尝试在此测试应用程序中使用角度路由。你能告诉我这里做错了什么吗？当我点击提交按钮时，地址栏中的位置将变为＆＃34; http://localhost:8080/index.html#/go＆＃34;但是我没有看到＆＃34; sample.html＆＃34;的内容。在ng-view。

Answer 1

您正在为您的应用宣布您的模块两次，因此它会覆盖第一个配置。删除第二个声明：var app = angular.module("myApp", []);

继承你的代码工作（为了演示目的，我删除了GET请求和替换的模板网址）：

＆＃13;

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");
  }

});

＆＃13;

<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>

＆＃13;

ng-view无法显示数据

1 个答案: