Question

所以我在过去的几天里一直试图学习角度，并且我已经设置了这个，以便出现一条消息......但它似乎无法正常工作，我无法弄清楚为什么。请告诉我，如果它只是一个拼写错误或者其他东西现在已经看了几个小时......谢谢

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Routing App!</title>

    <!-- set the base path for angular routing -->
    <base href="/">

    <!-- CSS -->
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="C:\Users\JChoi\Desktop\font-awesome-4.3.0/css/font-awesome.css">
    <style>
        body { padding-top:50px; }
    </style>

    <!-- JS -->
    <!-- load angular and angular-route via CDN -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

    <!-- load our custom angular app files -->
    <script src="js/app.js"></script>
    <script src="js/app.routes.js"></script>
</head>
<body class="container" ng-app="routerApp" ng-controller="mainController as main">

    <!-- HEADER AND NAVBAR -->
    <header>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Angular Routing Example</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="/about"><i class="fa fa-shield"></i> About</a></li>
                <li><a href="/contact"><i class="fa fa-comment"></i> Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <main>
        <div class="jumbotron">
            <h1>{{ main.bigMessage }}</h1>
        </div>

        <!-- angular templating will go here -->
        <!-- this is where content will be injected -->
    </main>

</body>
</html>

JS / Angular代码：

angular.module('routerApp', ['routerRoutes'])

// create the controller and inject Angular's 
// this will be the controller for the ENTIRE site
.controller('mainController', function() {

    var vm = this;

        // create a bigMessage variable to display in our view
        vm.bigMessage = 'A smooth sea never made a skilled sailor.';

})

// home page specific controller
.controller('homeController', function() {

    var vm = this;

    vm.message = 'This is the home page!';
})

// about page controller
.controller('aboutController', function() {

    var vm = this;

        vm.message = 'Look! I am an about page.';
})

// contact page controller
.controller('contactController', function() {

    var vm = this;

        vm.message = 'Contact us! JK. This is just a demo.';
});

这里也是一个codepen链接： http://codepen.io/zomdar/pen/doPJgY?editors=101

Answer 1

请在模型设置中将routerRoutes更改为ngRoute。

编写此代码

angular.module('routerApp', ['ngRoute'])

而不是此代码

angular.module('routerApp', ['routerRoutes'])

Working Demo

您的错误说明

您已在屏幕中调用此（angular-route.js）脚本

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

您可以从http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js

查看有关该脚本的详细信息

“ngRoute”名称定义的路径模块。

见

 angular.module('ngRoute', ['ng']).
                        provider('$route', $RouteProvider),

因此，您应该在主模块中致电ngRoute。

Answer 2

codepen链接已断开，因为您没有添加＆＃34; routerRoutes＆＃34;模块。如果将其删除，则样本正在运行。

你的内容是否适用于你的＆＃34; app.routes.js＆＃34;文件？

只需使用Angular来显示消息

2 个答案:

Working Demo

您的错误说明