Question

我正在为我正在建设的项目学习角度js。

到目前为止，它似乎是一个很棒的框架，非常有用和直观，但每当我尝试实施路由时，我都会遇到问题...

我有这段代码：

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="libs/angular.min.js"></script>
    <script src="libs/angular-route.min.js"></script>

    <script type="text/javascript">

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

        app.config(function ($routeProvider) {

            $routeProvider.when('/', {
                templateUrl: 'home.html',
                controller: 'HomeController'
            }).otherwise({ redirectTo: '/' });

        });

        app.controller('HomeController', function ($scope) {

            $scope.people = [

                {
                    name: "Arik",
                    age: 19
                },

                {
                    name: "Bar",
                    age: 19
                }

            ];

        });

    </script>

</head>
<body>

    <div data-ng-view></div>

</body>
</html>

和home.html：

<ul>

    <li data-ng-repeat="person in people">
        <b>{{ person.name }}</b> - {{ person.age }}
    </li>

</ul>

问题是它只是不起作用，页面显示为空白。我尝试在官方文档中搜索但没有任何帮助...

我做错了什么？

顺便说一句，我使用的是最新版本1.4.4

谢谢，阿里克

Answer 1

我刚测试了您的代码here并且工作正常，可能问题出在您home.html或您的网络服务器或类似的路径中，请查看您的环境。

在开发过程中试用grunt-connect来创建网络服务器，这非常有用

我还建议您使用ui-router，这样更简单。 Here是使用plunker

中的ui-router进行路由的工作模板

Answer 2

您的代码看起来很棒，证明它的工作原理take a look at this，我建议你在html之后加载脚本，这样你就不会让用户看到空白页面，直到下载文件为止。

AngularJS - 路由不起作用

2 个答案: