使用angular.js路由空白页

Question

I did this plunk to ask you to help me with that little problem. 我很想让您解决这个小问题。 I'm following a tuto about angular js but i'm stuck with the comprehension of how routes are working. 我正在关注有关angular js的教程，但是我对路由的工作方式有所了解。

Can you, please help me to understand why the home page is blank ? 您能帮我了解为什么主页空白吗？

Thanks for your attention guys ! 谢谢你们的关注！

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

index.html : 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 : 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: 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

Hey I've found your mistake. 嘿，我发现了你的错误。

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

Becomes 变

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

Because you tried to declare two modules the first one wasn't working. 因为您试图声明两个模块，所以第一个模块不起作用。

使用angular.js路由空白页

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-02-19 15:24:32

使用angular.js路由空白页

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-02-19 15:24:32

解决方案1
4 已采纳 2015-02-19 15:24:32