javascript - ng-view无法显示数据

标签 javascript angularjs routes

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

我正在尝试在此测试应用程序中使用 Angular 路由。你能告诉我我在这里做错了什么吗?当我单击提交按钮时,地址栏中的位置更改为“http://localhost:8080/index.html#/go ”,但我在 ng-view 中看不到“sample.html”的内容。

最佳答案

您为应用程序声明了两次模块,因此它会覆盖第一个配置。删除第二个声明: 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>

关于javascript - ng-view无法显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43416550/

相关文章:

javascript - 无法规范化查询 : IndexNotFound: text index required for $text query', 代码:17287

javascript - 根据新数据检查旧数据,仅处理工作表上谷歌应用程序脚本中的实际更改值

php - 使用正则表达式匹配 Laravel 路由中的子字符串

xml - Zend框架中如何获取派发的路由名称?

javascript - Morris.js 线图 x 轴标签在调整大小后消失

javascript - 使用 Javascript 垂直居中 div(可变高度)

javascript - 隔离函数范围不起作用

javascript - 对InfoWindow使用mouseover和mouseout会导致InfoWindow闪烁并连续触发mouseover和mouseout事件

angularjs - Kendo Treeview : How to set Intermediate state Programmatically

html - 本地托管网站未正确路由