Маршрутизация не работает в AngularJS? - PullRequest
Новая
       2

Маршрутизация не работает в AngularJS?

0 голосов
/ 07 мая 2018

Я довольно новичок в AngularJS и пытаюсь настроить маршрутизацию в своем базовом приложении.

Мой app.js: 

var app = angular.module("StarWarsApp", ['ngRoute', 'ne.swapi']);

app.config(function ($routeProvider) { 
   $routeProvider 
    .when('/', { 
      controller: 'HomeController', 
      templateUrl: 'views/home.html' 
    }) 
     .otherwise({ 
  redirectTo: '/' 
}); 
});

Мой index.html: 

    <head>    
    <script type="text/javascript" src="js/vendor/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
    <body ng-app="StarWarsApp" \>
     <div class="container">
    <div ng-view></div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>

<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>

<!-- Services -->
<script type="text/javascript" src="js/services/charactersList.js"></script>

<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>    
</body>
</html>

Когда я загружаю home.html напрямую, я правильно вижу его содержимое, но оно не отображается в моем ng-виде, и я не могу понять, почему. Я уверен, что пропустил что-то очень простое, но я понятия не имею. Есть идеи?

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

найдены проблемы:

  1. В теге body есть неожиданный символ. Сначала удалите это.

  2. Также вы добавили зависимость 'ne.swapi' в app.js. Таким образом, его скрипт должен быть добавлен перед вставкой app.js.

<script type="text/javascript" src="js/vendor/angular.min.js"></script>

<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>

<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>

<script type="text/javascript" src="js/app.js"></script>

  1. Также было бы хорошо добавить скрипты внизу тега body. Иначе. это может повлиять на скорость рендеринга страницы. Это предложение. Это не приведет к возникновению проблемы, с которой вы столкнулись.
0 голосов
/ 08 мая 2018

То, что вы опубликовали, работает правильно без вашего контроллера, сервиса и ne.swapi, поэтому ошибка, скорее всего, там. Однако код для вашего контроллера и службы не был размещен здесь.

Одна идея, которую я имею в виду, ссылаясь на документацию ne.swapi - проверьте, что вы загружаете 'swapi' после $ scope в контроллер, если вы используете ne.swapi. Опять же, поскольку ваш контроллер не был опубликован, я не уверен, что это вызывает проблему. 

app.controller("Test", function($scope, swapi){
    $scope.test = "Hey";
});

У меня есть рабочий плункер, и я надеюсь, что ссылка на него поможет вам найти ошибку. https://plnkr.co/edit/9hD490m7nZxSTQPDTN0J?p=preview

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...