Question

Angular正在工作，我可以看到{{ text }}，但我似乎无法显示ng-view。

我的代码是：

的index.html：

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-app='app'>
    <div class="main_container" ng-controller="MainController">
    <span ng-cloak>{{text}}</span>
    <div ng-view></div>
    </div>

    <!-- modules -->
    <script src='app.js'></script>
    <!-- controllers -->
    <script src='MainController.js'></script>
    <script src='home.js'></script>     
  </body>
</html>

home.js：

app.controller('home', function($scope) {
    $scope.words = 'It works!';
});

MainController：

app.controller('MainController',function($scope){
    $scope.text = 'Hello World!';
});

home.html的：

<div ng-controller="home">
    <h3>{{ words }}</h3>
</div>

app.js：

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('/index',{
            templateUrl: 'home.html',
            controller: 'home'
        }).
        otherwise({
            redirectTo: '/index' 
        });
     //$locationProvider.html5Mode(true);
});

编辑：它似乎在plunker中工作但是当我用chrome打开文件时，我得到以下错误：

“XMLHttpRequest无法加载{{file location}}。交叉源请求仅支持协议方案：http，data，chrome，chrome-extension，https，chrome-extension-resource。”

Answer 1

您不需要home.html中根元素的ng-controller属性，因为您在设置$routeProvider时已经为该模板定义了控制器。除此之外，您的代码看起来还不错。但是，如果您真的想要领先于游戏，如果您计划在应用程序中执行任何高级路由，我建议您使用UI Router。与Angular的ngRoute相比，它更加强大且易于使用，广泛使用且记录良好。

Answer 2

您的代码工作正常!!首先加载哪个文件可能存在问题，因此请注意HTML中添加的文件的顺序

这是您的代码的工作plunker。这里ng-view加载没有问题

http://embed.plnkr.co/oNADizOltrGitbWTWNXf/preview

希望这有帮助!!!

Angular.js路由无法正常工作

2 个答案: