Question

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

我的应用程序包含多个“页面”，例如“产品”（带有产品列表），联系人（带有联系表单）。 “产品”页面还应链接到“编辑产品”页面，其中productId从“产品”列表中传递。

“老派”这样做的方法是拥有products.aspx并链接到editProduct.aspx？productId = 123。这就是我想模仿的行为。

我的问题是我是否应该使用Tabs作为导航，或者是否有更好的方法可以使用Angular 1.2更新。

感谢您的帮助！

Answer 1

您应该使用角度路由通过路由提供程序委派您的页面加载。无需依赖＆＃34;标签＆＃34;模仿单个页面应用程序（当然，如果你想要标签，你可以使用它们，但如果有几个页面，你可以更好地设置角度路由）。

第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?

Answer 2

我建议你看一下angular-route模块的文档。这不是标准角度框架的一部分，但可以作为Angular网站上的额外JS包含。

开始获取信息的最佳位置是：https://docs.angularjs.org/tutorial/step_07

一般情况下，现代浏览器会在“＃＆＃39;＃”之前对待任何内容。 symbol作为从服务器请求的URL，以及忽略它之后的任何内容。在＆＃39;＃＆＃39;之后更改网址的部分符号将触发JavaScript事件，但实际上不会从服务器请求任何新内容。因此，例如，从/ MyOnePageApp /＃/ Products链接到/ MyOnePageApp /＃/ Products / 123应该导致angular从您的路由配置中读取而不实际向您的Web服务器提交新的页面请求。

如果您想了解更多信息，请告诉我们;我记得第一次开始使用AngularJS时，我一直在努力解决这个问题。

如何在Angular App中导航

2 个答案: