Angular JS не загружает вид

Я пытаюсь запустить свое первое приложение AngualarJS, но по какой-то причине оно не сработает. Я некоторое время гуглил и не нашел решения, которое работает для меня. Может ли кто-нибудь, у кого есть опыт работы с AngularJS, увидеть, что не так с моим кодом? Ценим любую помощь!

<!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>

angularjs route-provider
person thehindutimes    schedule 02.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я хотел бы начать с того, что посоветую вам следовать этому официальному руководству: оно покажет вам, как начать для создания приложения с AngularJS и представлениями. Причина, по которой я бы посоветовал это, заключается в том, что в скрипте отсутствует довольно много основных элементов, в основном теги <a>. Может быть, вы можете начать с учебника и создать свой собственный код на его основе.

Замечания о вашем коде:

  • Добавьте все теги script с javascript в файл <head>. Затем они, в свою очередь, будут запускаться браузером, обеспечивая соблюдение всех зависимостей.
  • Вы забыли запятую после "приложения" в инициализации вашего модуля
  • Самое главное, вы должны изменить теги <p> на теги <a>, если хотите, чтобы представления работали. Angular использует теги <a>, чтобы сделать возможной навигацию по разным представлениям. Для этого используется атрибут href тега <a>. Посмотрите мой код ниже, и вы увидите, что мои атрибуты href связаны с поставщиком маршрутов в предложении when.

Ниже вы найдете свой скорректированный код. Надеюсь, поможет!

<!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>
person IvorG    schedule 02.02.2014
comment
Спасибо, прочитал учебник, но я все еще не заставляю его работать. Если я нажимаю любую ссылку в navTable, она перенаправляется в указанное представление. Я вижу обновление URL-адреса, но HTML-код в представлении не загружается в тег ‹ng-view›. - person thehindutimes; 03.02.2014
comment
Нашел проблему. У меня было templateUrl: '/partials/viewOne.html', и я не видел, чтобы вы изменили его на templateUrl: 'partials/viewOne.html' Еще раз спасибо! - person thehindutimes; 03.02.2014
comment
Рад видеть, что это работает. Если мой ответ ответил на ваш вопрос, отметьте его как решенный - person IvorG; 03.02.2014