路由 angular.js 空白页

Question

我这么笨是想请你帮我解决那个小问题。我正在关注关于 angular js 的 tuto，但我仍然无法理解路由的工作原理。

你能帮我理解为什么主页是空白的吗？

感谢大家的关注！

http://plnkr.co/edit/Bt7ThaM5lXmC80Td3lZ0?p=info

index.html :

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head >
    <body ng-app="angularForm">
        <div ng-view></div>  

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



        <script>
                    var app = angular.module('angularForm', ['ngRoute']);
                    //Mise en place du routing 
                    app.config(function ($routeProvider) {
                        $routeProvider
                                .when("/", {templateUrl: "partials/home.html",})
                                .when("/comments", {templateUrl: "partials/comments.html"})
                                .otherwise({redirectTo: "/"});
                    });
                    //Mise en place du controlleur pour les comments
                    angular.module('angularForm', [])
                            .controller('CommentsController',
                                    function CommentsController($scope) {
                                        this.comments = [
                                            {
                                                "username": "Sandoval",
                                                "email": "sandovalrodriguez@sequitur.com",
                                                "content": "Eiusmod ad enim laboris ut culpa qui duis pariatur."
                                            },
                                            {
                                                "username": "Tara",
                                                "email": "tararodriguez@sequitur.com",
                                                "content": "Dolore anim labore eu ut mollit sunt incididunt sint occaecat mollit adipisicing."
                                            },
                                            {
                                                "username": "Emilia",
                                                "email": "emiliarodriguez@sequitur.com",
                                                "content": "In amet ipsum anim excepteur ut excepteur nulla exercitation laborum culpa."
                                            },
                                            {
                                                "username": "Gina",
                                                "email": "ginarodriguez@sequitur.com",
                                                "content": "Enim duis cupidatat enim reprehenderit."
                                            },
                                            {
                                                "username": "Graves",
                                                "email": "gravesrodriguez@sequitur.com",
                                                "content": "Laborum excepteur duis elit anim mollit duis labore voluptate dolore aliquip."
                                            },
                                            {
                                                "username": "Gallegos",
                                                "email": "gallegosrodriguez@sequitur.com",
                                                "content": "Ullamco fugiat do exercitation reprehenderit magna pariatur aliqua dolor cillum eiusmod cillum id consequat."
                                            }
                                        ];
                                    });
        </script>
    </body>


</html>

comments.html :

<div ng-controller="CommentsController as comctrl">

    <input type="text" ng-model="query.content">
    <h1>Recherche : {{ query.content}}</h1>

    <select ng-model="order">
        <option value="username">Organise par Nom</option>
        <option value="content">Organise par content</option>
    </select>

    <div ng-repeat="comment in comctrl.comments| filter: query | orderBy: order">
        <p>
            <strong>{{comment.username}}</strong><br>
            {{comment.content}}
        </p>

    </div>
</div>

home.html:

<h1>Article #1</h1>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales nulla at nunc molestie, sollicitudin ornare arcu porttitor. Maecenas vel ultricies dui, vel consectetur felis. Suspendisse sagittis fringilla placerat. Praesent turpis diam, maximus et fermentum quis, hendrerit et risus. Vivamus turpis eros, placerat eget facilisis sit amet, malesuada at ante. Donec ac egestas magna, in varius quam. Quisque imperdiet leo a dolor ullamcorper, sed sollicitudin dui malesuada. Pellentesque a leo eget lacus convallis rhoncus. Donec sit amet nisl vel turpis venenatis varius. Praesent varius dignissim molestie. Proin ante tortor, gravida dignissim odio vitae, lacinia mattis diam. Vestibulum quis tellus dolor.
</p>

<h2> x commentaires</h2>

<a href="#/comments">Voir les commentaires</a>

Answer 1

嘿，我发现了你的错误。

var app = angular.module('angularForm', ['ngRoute']);
                //Mise en place du routing 
                app.config(function ($routeProvider) {
                    $routeProvider
                            .when("/", {templateUrl: "home.html"})
                            .when("/comments", {templateUrl: "comments.html"})
                            .otherwise({redirectTo: "/"});
                });
                //Mise en place du controlleur pour les comments
                angular.module('angularForm', [])
                        .controller('CommentsController',
                                function CommentsController($scope) {
                                    this.comments = [

变成

var app = angular.module('angularForm', ['ngRoute']);
                //Mise en place du routing 
                app.config(function ($routeProvider) {
                    $routeProvider
                            .when("/", {templateUrl: "home.html"})
                            .when("/comments", {templateUrl: "comments.html"})
                            .otherwise({redirectTo: "/"});
                });
                //Mise en place du controlleur pour les comments

                        app.controller('CommentsController',
                                function CommentsController($scope) {
                                    this.comments = [

因为您试图声明两个模块，第一个模块不工作。

路由 angular.js 空白页

Routing with angular.js Blank page

javascript

angularjs

ng-view