使用angular.js路由空白页

斯莱特

我很想让您解决这个小问题。我正在关注有关angular js的教程,但是我对路由的工作方式有所了解。

您能帮我了解为什么首页空白吗?

谢谢你们的关注!

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

文件结构:index.html | 局部| | comments.html | | home.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": "[email protected]",
                                                "content": "Eiusmod ad enim laboris ut culpa qui duis pariatur."
                                            },
                                            {
                                                "username": "Tara",
                                                "email": "[email protected]",
                                                "content": "Dolore anim labore eu ut mollit sunt incididunt sint occaecat mollit adipisicing."
                                            },
                                            {
                                                "username": "Emilia",
                                                "email": "[email protected]",
                                                "content": "In amet ipsum anim excepteur ut excepteur nulla exercitation laborum culpa."
                                            },
                                            {
                                                "username": "Gina",
                                                "email": "[email protected]",
                                                "content": "Enim duis cupidatat enim reprehenderit."
                                            },
                                            {
                                                "username": "Graves",
                                                "email": "[email protected]",
                                                "content": "Laborum excepteur duis elit anim mollit duis labore voluptate dolore aliquip."
                                            },
                                            {
                                                "username": "Gallegos",
                                                "email": "[email protected]",
                                                "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>
亚当

嘿,我发现了你的错误。

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

因为您试图声明两个模块,所以第一个模块不起作用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用angular.js路由空白页

来自分类Dev

显示空白页-Angular JS

来自分类Dev

Heroku上的空白页-Mean.js Angular应用

来自分类Dev

为什么我的 Angular 路由教程的后续代码显示空白页?

来自分类Dev

使用Ghostscript渲染空白页

来自分类Dev

尝试使用imagemagick,空白页

来自分类Dev

使用Ghostscript渲染空白页

来自分类Dev

Heroku上的空白页-Mean.js angular应用程序

来自分类Dev

尝试在带有UI路由器的angularjs中使用嵌套视图会得到一个空白页

来自分类Dev

ng-repeat返回空白页[Angular]

来自分类Dev

使用JasperReports进行子报表后的空白页

来自分类Dev

使用TuesPechkin转换为PDF时为空白页

来自分类Dev

通过UI-Router使用多个视图的空白页

来自分类Dev

使用VBA删除Word Doc中的空白页

来自分类Dev

如何使用PDFBox在PDF中查找空白页?

来自分类Dev

使用挂钩时组件呈现为空白页

来自分类Dev

使用RequireJS和Grunt获取空白页

来自分类Dev

如何使用PDFBox在PDF中查找空白页?

来自分类Dev

使用CGPDFContextCreateWithURL时,PDF为空白页

来自分类Dev

Rails错误路由问题(空白页)

来自分类Dev

reactjs用路由构建空白页

来自分类Dev

Facebook分享使用php和javascript产生白页/空白页

来自分类Dev

使用Ruby on Rails提供PDF文件-下载文件中的空白页/白页

来自分类Dev

在Visual Studio 2013的空白网站中使用剃刀语法添加空白页

来自分类Dev

Ember JS应用显示空白页

来自分类Dev

sails.js-获取空白页

来自分类Dev

Ember JS应用显示空白页

来自分类Dev

Ember JS应用显示空白页

来自分类Dev

ASP .NET 5中的简单Angular SPA-启动时出现空白页