Почему директива ng-view не работает в моем случае?

ProgramBox

Почему директива ng-view не работает в моем случае?

Post author:admin
Запись опубликована:13 мая, 2023
Post category:Вопросы по программированию

#html #angularjs #ng-view

#HTML #angularjs #ng-view

Вопрос:

Я создаю приложение AngularJS. У меня есть следующая структура:

 --/app
-----app.js
-----index.html
-----/css(bootstrap,app.css,...)
-----/fonts
-----/css(bootstrap,app.css,...)
-----/images
-----/partials(home.html, register.html, login.html)

Вот мой app.js файл:

 //configure the app : load module, configure route

var app = angular.module('app',['ngRoute','ngResource','ui.bootstrap']);

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

app.controller('HomeController', function ($scope) {
    //nothing to do time being
});

Вот index.html :

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">
  <link rel="stylesheet" href="css/toaster.css">
  <link rel="stylesheet" href="css/loading-bar.css">
  <link rel="stylesheet" href="css/app.css"> 
  <script src="libs/angular.js"></script>
  <script src="libs/angular-resource.js"></script>
  <script src="libs/angular-route.js"></script>
  <script src="libs/angular-animate.js"></script>
  <script src="libs/toaster.js"></script>
  <script src="libs/loading-bar.js"></script>
  <script src="libs/ui-bootstrap-0.11.0.js"></script>
  <script src="libs/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="app.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <link href="favicon.ico" rel="shortcut icon" />
</head>
<body ng-app="app">
    <div id="page">
 <!--   <header class="container"> -->
            <!-- nav bar-->
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Crowd Recruitment</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li ng-class="{'active':isActive('/ourmagic')}"><a href="#/ourmagic">How it's work ?</a></li>
        <li ng-class="{'active':isActive('/register')}"><a href="#/register">Register</a></li>
        <li ng-class="{'active':isActive('/login')}"><a href="#/login">Login</a></li>
        <!--<li><button type="submit" class="btn btn-default pull-right">Login</button></li>-->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
     <!--   </header>-->
<div ng-view></div>
</div>


</body>
</html>

У меня нет ошибок в браузере, но когда я загружаю index.html , home.html не включается. Мне интересно, почему? index.html Просто содержит меню, но ng-view не работает, моя часть не загружена.

Добавлено: Спасибо, я заметил, что у меня ошибка в конфигурации строк модуля var app = angular.module('app',['ngRoute','ngResource','ui-bootstrap']);

Я удалил загрузку ui-bootstrap, которая вызвана ошибкой. Итак, мой код теперь работает, позже я увижу, почему я не могу загрузить модуль ui-bootstrap. Спасибо @Edminsson за код, который вы вставляете в Plunker

1. Работает ли это для любого из других маршрутов?

2. посмотрите на запросы ajax, сделанные в инструментах разработчика браузера, чтобы увидеть, где выполняются запросы. Я бы попробовал удалить /app/ в templateUrl

3. Я удалил /app / в templateUrl и протестировал. Мне жаль, что это не работает

Ответ №1:

У вас есть два объявления ng-app. Вы должны удалить директиву в html-элементе. Вы также написали «template» вместо «templateUrl» в конфигурации «home».

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

Вот рабочий плунжер

1. Проблема не в приложении в templateUrl: ‘/app/partials/home.html ‘. Это пустое ng-app в <html lang=»en» ng-app>. Удалите это ng-приложение. У вас есть другое ng-приложение в элементе body, <body ng-app=»app»>. У вас должно быть только одно объявление ng-app.