Блог

Я пытаюсь реализовать панель навигации начальной загрузки пользовательского интерфейса

 <div ng-controller="MainCtrl">
<nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">

        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
          <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="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" ng-class="!navCollapsed amp;amp; 'in'">

        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" ng-controller="DropdownCtrl">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><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>

        </ul>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <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><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
</div>
  

Мой угловой код:

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

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});

app.controller('DropdownCtrl', function($scope) {

    $scope.items = [
        "The first choice!",
        "And another choice for you.",
        "but wait! A third!"
    ];
});
  

Я включил navbar.js и файлы navbar.css, но не вижу правильной навигационной панели. Я получаю такой вид.
Какой файл мне не хватает? Есть ли файл, который я не включил?

  <script src="{% static 'login/bower_components/angular/angular.min.js' %}"></script>
    <script src="{% static 'login/bower_components/angular-bootstrap/ui-bootstrap.min.js' %}"></script>
    <script src="{% static 'login/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js' %}"></script>
    <script src="{% static 'login/bower_components/angular-cookies/angular-cookies.min.js' %}"></script>
    <script src="{% static 'login/bower_components/angular-ui-router/release/angular-ui-router.min.js' %}"></script>
    <script src="{% static 'login/bower_components/ui-navbar/release/js/ui-navbar.min.js' %}"></script>
    <script src="{% static 'login/navbar.app.js' %}"></script>

<link href="{% static 'login/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
<link href="{% static 'login/bower_components/bootstrap/dist/css/bootstrap-theme.min.css' %}">
<link href="{% static 'login/bower_components/ui-navbar/release/css/ui-navbar.min.css' %}">
  

Это все файлы, которые я включил в свою индексную страницу