一个 AngularJS 应用程序的不同模板答案

【问题标题】：Different templates for one AngularJS application一个 AngularJS 应用程序的不同模板
【发布时间】：2014-06-12 21:37:49
【问题描述】：

我正在尝试在 AngularJS 中创建“普通”WEB 应用程序，它会有不同：

当打开应用程序时 - 显示登录表单，在向服务器提交凭据并授权后，显示内容模板，当注销时 - 显示登录表单。

如何使用 AngularJS 来实现？谢谢！

更新

我正在使用 Angular-UI 路由器，到 /login 或 /content 的路由没有问题 :) 我有 HTML 结构：

<html>
<body ng-app="MyApp">
    <header>...</header>
    <section>
        <nav>...</nav>
        <section ui-view> THERE ARE CONTENT </section>
    </section>
    <footer>...</footer>
</body>
</html>

在ui-view (Angular-UI ng-view) 中，我包含带有控制器的“模块化”模板，一切正常。

但是如何将“/login”的主模板更改为：

<html>
<body ng-app="MyApp">
    <section ui-view> THERE SHOULD BE LOGIN FORM</section>
</body>
</html>

【问题讨论】：

最好先阅读关于 AngularJS 的教程，然后再在这里提问。例如：revillweb.com/tutorials/…
是的，你是对的 - 我需要一些关于这个的教程，但是你给出的，并没有回答我的问题。我试图在我的更新中指定。
我已经根据你的扩展扩展了我的答案;)

标签： angularjs angular-ui

【解决方案1】：

你要找的是$route

https://docs.angularjs.org/api/ngRoute/service/$route

然后您可以指定一个路由，即/login，并在成功登录后将用户重定向到/content

如果你不想使用路由和视图，你可以使用 ng-include 和动态加载部分，但恕我直言，路由对用户来说看起来更干净

--扩展-- 我认为您在这里缺少 ui-view 设置的基础知识

https://github.com/angular-ui/ui-router#get-started结帐步骤5

index.html

<body ng-app="testApp" ng-controller="navigationCtrl">
<section id="main" ng-include="currentPartial.partial+'.html'"></section>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="app.js"></script>

app.js

angular.module('testApp', [])
  .controller('navigationCtrl', function navigationCtrl($scope){
      $scope.currentPartial = {partial:'login'}
  })

<div><button ng-click="currentPartial.partial = 'content'">switch to content</button>

内容.html

<div><button ng-click="currentPartial.partial = 'login'">switch to login</button>

【讨论】：

是的，你是对的，但这只是其中的一部分。我试图在我的更新中指定。
感谢您的回答，但您为我提供了使用一种布局的信息，但有很多部分。我对如何更改布局感兴趣。或者您认为我需要为 body 定义 ui-view 并在不更改布局的情况下包含所有内容？
为什么登录页面需要有ng-view标签？它是网站其余部分的单独布局，因此不需要它。
或者您可以根据用户是否登录来显示页眉和页脚，例如
..
所以，据我所知，不可能在一个应用程序中更改布局。那么最好的解决方案是制作一个大容器并根据 url/state 显示/隐藏 header/menu/content/footer 或登录表单？