Question

我正在尝试使用我的第一个AngualarJS应用程序，但由于某些原因它无法运行。谷歌搜索了一段时间，还没有找到适合我的解决方案。任何有一些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>

Answer 1

我首先建议您关注this official tutorial：它向您展示了如何使用AngularJS和视图构建应用程序的开始。我建议这个的原因是因为脚本中缺少很多基本元素，主要是<a>标签。也许你可以从教程开始，然后根据它构建自己的代码。

关于您的代码的备注：

在<head>中使用javascript添加所有脚本代码。然后，它们将由浏览器运行，确保满足所有依赖性
您在模块初始化“app”中忘记了逗号
最重要的是，如果您希望查看有效，则应将<p>代码更改为<a>代码。 Angular使用<a> - 标签来导航到不同的视图。 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>

Angular JS没有加载视图

1 个答案: