Question

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

template with login form
template with content

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

如何使用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>

Answer 1

您正在寻找的是$ route

https://docs.angularjs.org/api/ngRoute/service/ $路线

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

如果您不想使用路线和视图，可以使用ng-include和dynamicaly加载部分，但IMHO路线对用户来说看起来更干净

- extended-- 我认为你在ui-view setup

中缺少基础知识

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'}
  })

的login.html

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

content.html

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

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

1 个答案: