如何将单页AngularJS应用程序中的MenuController与主页集成_Angularjs_Navbar_Angularjs Routing

如何将单页AngularJS应用程序中的MenuController与主页集成

angularjs

如何将单页AngularJS应用程序中的MenuController与主页集成,angularjs,navbar,angularjs-routing,Angularjs,Navbar,Angularjs Routing,在我的Angular应用程序中，index.html中有以下代码： <!DOCTYPE html> <html data-ng-app="MyApp"> <head> <title>AngularJS</title>  </head> <body>  <nav ng-co

在我的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文件加载的

但是现在，我想添加一个没有菜单控制器的登录页面。当用户未连接时，不应显示

栏

如何将我的

条放置在

MenuCtrl

中，而不在每个部分html文件中重复代码

您可以通过使用

工厂

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>


以{{share.user.username}身份登录
注销
登录

查看
<h2>Home</h2>

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

主页
以{{share.user.username}身份登录
我强烈建议使用ui路由器，而不是内置路由。这个问题很容易解决。请为菜单栏编写一个指令，仅当用户登录到ui路由器而不是ngRoute时才插入它，因为我的主页与其他页面完全不同。我的主页上只有一张表格。