2

我正在尝试让我的第一个 AngularJS 应用程序运行，但由于某种原因它无法正常工作。谷歌搜索了一段时间，还没有找到适合我的解决方案。有一些 AngularJS exp 的任何人都可以看到我的代码有什么问题吗？感谢任何帮助！

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

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Java Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<div id="container">
    <nav class="col-xs-12">
        <table id="navTable">
            <tr>
                <td><p>view 1</p></td>
                <td><p>view 2</p></td>
                <td><p>view 3</p></td>
                <td><p>view 4</p></td>
                <td><p>view 5</p></td>
            </tr>
        </table>
    </nav>

    <!-- View Placeholder -->
    <article data-ng-view="" class="col-xs-6 col-xs-offset-3">
        Views goes here...
    </article>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script>
        var app = angular.module('app', ['ngRoute']);

        app.config(['$routeProvider', function($routeProvider){

            $routeProvider
                .when('/', 
                {
                    controller: 'basicController',
                    templateUrl: '/partials/viewOne.html'
                })
                .when('/menu', {
                    controller: 'basicController',
                    templateUrl: '/partials/viewTwo.html'
                })
                .when('/map', 
                {
                    controller: 'basicController',
                    templateUrl: '/partials/viewThree.html'
                })
                .when('/info', 
                {
                    controller: 'basicController',
                    templateUrl: '/partials/viewFour.html'
                })
                .when('/offers', 
                {
                    controller: 'basicController',
                    templateUrl: '/partials/viewFive.html'
                })
                .when('/account', 
                {
                    controller: 'basicController',
                    templateUrl: '/partials/viewSix.html'
                })
                .otherwise({ redirectTo: '/' });
        }]);

        app.controller('basicController', ['$scope', function ($scope) {

            $scope.message = "Hello!";

        }]);

    </script>

    <footer class="col-xs-12 navbar-fixed-bottom">

    </footer>
</div>
</body>
</html>
4

1 回答 1

2

我想首先建议您遵循这个官方教程：它向您展示了如何使用 AngularJS 和视图构建应用程序的开始。我建议这样做的原因是脚本中缺少很多基本元素，主要是<a>标签。也许您可以从教程开始，并在此基础上构建自己的代码。

关于您的代码的备注：

  • 在您的<head>. 然后这些将依次由浏览器运行，确保满足所有依赖项
  • 您在模块初始化中的“app”之后忘记了逗号
  • 最重要的是，如果您希望视图正常工作，您应该将<p>标签更改为标签。<a>Angular 使用<a>-tags 使导航到不同的视图成为可能。标记的href属性<a>用于此目的。检查下面的代码，您可以看到我的href属性链接到 when 子句中的 routeprovider。

您将在下面找到调整后的代码。希望能帮助到你！

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

        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
        <link rel="stylesheet" type="text/css" href="css/custom.css">
        <!-- Java Script -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
        <script>
            var app = angular.module('app', ['ngRoute']);

            app.config(function($routeProvider){

                $routeProvider
                    .when('/', 
                    {
                        controller: 'basicController',
                        templateUrl: 'partials/viewOne.html'
                    })
                    .when('/menu', {
                        controller: 'basicController',
                        templateUrl: 'partials/viewTwo.html'
                    })
                    .when('/map', 
                    {
                        controller: 'basicController',
                        templateUrl: 'partials/viewThree.html'
                    })
                    .otherwise({ redirectTo: '/' });
            });

            app.controller('basicController', ['$scope', function ($scope) {
                $scope.message = "Hello!";
            }]);
        </script>
    </head>
    <body>
        <div id="container">
            <nav class="col-xs-12">
                <table id="navTable">
                    <tr>
                        <td><a href="#">view 1</a></td>
                        <td><a href="#/menu">view 2</a></td>
                        <td><a href="#/map">view 3</a></td>
                    </tr>
                </table>
            </nav>

            <!-- View Placeholder -->
            <article data-ng-view="" class="col-xs-6 col-xs-offset-3">
                Views goes here...
            </article>

            <footer class="col-xs-12 navbar-fixed-bottom"></footer>
        </div>
    </body>
</html>
于 2014-02-02T19:57:54.460 回答