如何在Angular App中导航[关闭]答案

【问题标题】：How to navigate in Angular App [closed]如何在Angular App中导航[关闭]
【发布时间】：2014-08-17 11:18:25
【问题描述】：

我正在使用 Angular 构建我的第一个应用程序，需要一些帮助才能朝着正确的方向前进。我应该是一个单页应用。

我的应用由几个“页面”组成，例如“产品”（带有产品列表）、“联系人”（带有联系表格）。 “产品”页面还应链接到“编辑产品”页面，其中产品 ID 是从“产品”列表中传递的。

执行此操作的“老派”方式是使用 products.aspx 并链接到 editProduct.aspx?productId=123。这就是我想模仿的行为。

我的问题是我是否应该使用 Tabs 作为导航，或者是否有更好的方法来做到这一点，它是 Angular 1.2 的最新版本。

感谢您的帮助！

【问题讨论】：

您设计导航的方式不依赖于 Angular，而是依赖于您的前端框架（Bootstrap、Yui、Foundation 等）。使用 Bootstrap，我通常使用导航栏菜单，但标签也可以。

标签： angularjs

【解决方案1】：

您应该使用角度路由来通过路由提供程序委托您的页面加载。无需依赖“tabs”来模拟单页应用（当然如果你想要tabs，你可以使用它们，但是如果有多个页面，你可以更好地设置角度路由）。

第 1 步： 创建一个 shell 页面 - index.html 并设置 ng-app 和 ng-view 指令。

<html data-ng-app="myApp">
<body>
<a href="#/projects">Projects</a>
<div data-ng-view="">
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
</body>
</html>

第 2 步： 创建一个 js (app.js) 文件并设置角度路由并将其包含在 shell 页面 (index.html) 中这是一个例子 -

var app = angular.module("myApp", ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider.when("/login", { controller: "LoginController", templateUrl: "/app/login/login.html" });
    $routeProvider.when("/projects", { controller: "ProjectController", templateUrl: "/app/project/projects.html" });
    $routeProvider.when("/home", { controller: "HomeController", templateUrl: "/app/home/home.html" });
    $routeProvider.otherwise({ redirectTo: "/home" });
});

您可以通过 $routeParam 传递参数。见 - Pass URL to as $routeParam in AngularJS app 和 AngularJS - How to use $routeParams in generating the templateUrl?

【讨论】：

谢谢！例如，我在哪里放 HomeController？在 app.js 中还是应该将它放在处理 home.html 中所有逻辑的 home.js 中？
最好为每个控制器使用单独的js文件。
我已经设置了一些带有路由的 html 页面，但是当我在其中一个子页面中放置一个表单时，我意识到我正在使用的 Bootstrap 切换并且验证停止工作。任何想法为什么会发生这种情况以及如何解决它？当我将表单放在 shell 页面中时，它运行良好。
如果我理解正确，您正在尝试使用角度验证。如果您在使用符合 HTML5 的浏览器时未向
添加 novalidate 属性，则会进行 HTML5 验证。所以改变你的表格：

.....
。如果您仍然没有得到结果，最好创建一个 plunk 并添加一个新问题。
感谢您的帮助！我为这个问题提出了一个新问题，它不仅仅是关于验证。 stackoverflow.com/questions/25357684/…

【解决方案2】：

我建议您查看 angular-route 模块的文档。这不包含在标准 Angular 框架中，但可以作为 Angular 网站上的额外 JS 包含。

获取信息的最佳起点是：https://docs.angularjs.org/tutorial/step_07

一般来说，现代浏览器会将“#”符号之前的任何内容视为从服务器请求的 URL，而忽略它之后的任何内容。更改 '#' 符号之后的 URL 部分将触发 JavaScript 事件，但实际上不会从服务器请求任何新内容。因此，例如，从 /MyOnePageApp/#/Products 链接到 /MyOnePageApp/#/Products/123 应该会导致 Angular 从您的路由配置中读取，而无需实际向您的 Web 服务器提交新的页面请求。

如果您想了解更多信息，请告诉我；我记得当我第一次开始使用 AngularJS 时，我曾为此苦苦挣扎。

【讨论】：