Блог

Главная - Вопросы по программированию - как интегрировать MenuController в одностраничное приложение AngularJS с домашней страницей

как интегрировать MenuController в одностраничное приложение AngularJS с домашней страницей

#angularjs #navbar #angularjs-routing

#angularjs #панель навигации #angularjs-маршрутизация

Вопрос:

В моем приложении Angular у меня есть этот код в index.html:

 <!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
    <title>AngularJS</title>
    <!-- load css ... -->
</head>
<body>
    <!-- My menu bar -->
    <nav ng-controller="MenuCtrl">
        <ul>
            <span ng-repeat="action in actions">
                <li><a href="{{action.href}}">{{action.name}}</a></li>
            </span>
        </ul>
    </nav>

    <div class="container" ng-view>
        <!-- content -->
    </div>

    <!-- load Angular Library -->
    <!-- load services -->
    <!-- load controllers -->
</body>
</html>

Содержимое загружается из частичного HTML-файла.

Но теперь я хотел бы добавить страницу входа без контроллера меню. Когда пользователь не подключен, <nav> панель не должна отображаться.

Как я могу разместить свою <nav> панель с MenuCtrl без дублирования кода в каждом частичном HTML-файле?

Комментарии:

1. Я настоятельно рекомендую использовать ui-router вместо встроенного ngRoute. Эту проблему было бы очень легко решить.

2. напишите директиву для строки меню и вставляйте ее только в том случае, если пользователь вошел в систему

3. я попробовал ui-router вместо ngRoute, потому что моя домашняя страница полностью отличается от других страниц. на моей домашней странице есть только одна форма.

Ответ №1:

Вы можете использовать внедрение зависимостей angular с помощью factory

проверьте этот плунжер

js

 app.factory('ShareObject', function() {

  var ShareObject = function(){};

  return ShareObject;
});

app.controller('MenuCtrl', function($scope, ShareObject) {
  $scope.share = ShareObject;

  $scope.login = function() {
    // Go to backend and login,
    // ...
    $scope.share.user = {
      username: 'julien_dumortier',
      name: 'Julien Dumortier'
    };

  };

  $scope.logout = function() {
    // Go to backend and logout,
    // ...
    $scope.share.user = null;

  };
});

app.controller('mainController', function($scope, ShareObject) {
  $scope.share = ShareObject;
});

HTML

  <!-- My menu bar -->
  <nav ng-controller="MenuCtrl">

      <div ng-show="share.user" >
        Logged in as {{ share.user.username }} 
        <a ng-click="logout()">logout</a>
      </div>
      <a ng-show="!share.user" ng-click="login()">login</a>

  </nav>

    <div class="container" ng-view></div>

Вид

 <h2>Home</h2>

Logged in as {{ share.user.username }}