AngularJs не загружает страницы при просмотре

0

Я знаю, что есть очень много вопросов, очень похожих на это, но я действительно не могу найти решение здесь.

ng-view просто не загружает мои страницы. Упускаю ли я что-то слишком очевидное?

App.js:

var app = angular.module('crisSite', [
    'ngRoute',
    'PortfolioController',
    'AboutCtrl',
    'ContactCtrl'
  ]);

  var selectedSpecIdGlobal = 0;

  app.config(function($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl : '/pages/portfolio.html',
        controller : 'PortfolioController'
    })

    .when('/about', {
        templateUrl : '/pages/about.html',
        controller : 'AboutCtrl'
    })

    .when('contact', {
        templateUrl : '/pages/contact.html',
        controller : 'ContactCtrl'
    })

    .otherwise('/', {
        templateUrl : '/pages/portfolio.html',
        controller : 'PortfolioController'
    });


  });

index.html:

<!DOCTYPE html>
<html ng-app="crisSite">
  <head>
    <!-- <link rel="stylesheet.css" type="text/css" href="bootstrap.min.css" /> -->

    <link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>

    <script src="jqueryfuncs.js"></script>
    <!-- <script type="text/javascript" src="angular.min.js"></script> -->
    <script type="text/javascript" src="app.js"></script>
    <style type="text/css">



  </style>
  </head>
  <body class="list-group"  ng-controller="mainController">
    <header>
      <!-- <h1 class="text-center">Cris</h1> -->

    </header>

    <div class="page-content">
        <ul class="main-nav" id="main-nav">
            <li><a href="#"><i class="fa fa-home"></i> Portfolio</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>   

        <div class="main">

            <div ng-view></div>

        </div>      
    </div>
  </body>
</html>

Я тестирую его локально в Chrome и Mozilla. Я читал много ответов на подобные вопросы, но не могу понять, как заставить его работать.

Есть ли лучший способ "отладить" его вместо проб и ошибок?

Теги:

2 ответа

0
Лучший ответ

Правильно ли это использование .otherwise(...)?

Я думаю, что так оно и должно выглядеть.

.otherwise({
    redirectTo: '/' /*redirects to portfolio (because you defined it before with "/") */
});

ОБНОВИТЬ

Просто удалите те → 'PortfolioController','AboutCtrl','ContactCtrl' из angular.module([...]); , вы можете назначить контроллер для каждого маршрута внутри, when(...).

Вот пример скрипта

ОБНОВЛЕНИЕ 2

Вот вам модифицированная скрипка (обратите внимание, что мне приходилось использовать Angular 1.2.1 в скрипке. Но пока вы всегда используете одни и те же версии angular.js, и все модули должны быть в порядке.

скрипка

  • 0
    Рамис, до сих пор не работает. Я попробовал некоторые варианты здесь тоже. Также старался не использовать иначе.
  • 0
    вы получаете какие-либо ошибки в вашей консоли?
Показать ещё 10 комментариев
0

Прежде всего, никогда не используйте мини-библиотеку для тестирования, она вмешивается в отчет об ошибках. Используйте неопределенную версию углового, и вы получите более подробные отчеты.

Во-вторых, вы создали все четыре из этих контроллеров, добавили их в модуль crisSite и включили их в index.html? Не похоже, что вы поместили их в index.html. Соблюдайте согласованное соглашение об именах, либо запустите NameController, либо NameCtrl.

В-третьих, ваш контактный маршрут отсутствует /, и в противном случае вы должны использовать синтаксис, предоставленный Ramis.

Наконец, убедитесь, что все ваши ссылки верны, являются ли эти шаблонные пути указаными на правильные файлы?

Вам нужно будет написать скрипку или плункер с полным кодом, если вы хотите, чтобы мы помогли дальше. Есть слишком много вещей, которые могут пойти не так.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню