如何角应用导航 [英] How to navigate in Angular App
问题描述
我建设我有角的第一个应用，需要一些帮助下车朝着正确的方向。我应该是一个单页的应用程序。
I am building my first app with Angular and need some help to get off in the right direction. I should be a single page app.
我的应用程序由几个页，例如像产品（有一个产品列表），联系方式（有联络方式）。 产品页面还应该链接到产品标识从列表中通过了产品。
My app consists of several "pages", like for example "Products" (with a list of products), Contact (with a contact form). The "Products" page should also link to an "Edit product" page where a productId is passed from the list on "Products".
这样做将有一个products.aspx并链接到editProduct.aspx？productId参数= 123的老派的方式。这就是我想模仿的行为。
The "old school" way of doing this would be to have a products.aspx and linking to editProduct.aspx?productId=123. That is the behavior I want to mimic.
我的问题是，如果我要使用的标签导航，或是否有这样做的更好的方式，是了解最新的1.2角
My question is if I should use Tabs as navigation or if there is a better way of doing this that is up to date with Angular 1.2.
感谢您的帮助！
推荐答案
你应该用角路由通过路由提供商委派你的页面加载。无需依赖于标签，以模仿单页的应用程序（当然，如果你想要的标签，你可以使用它们，但如果有好几页，可以更好的设置角度路由）。
you should use angular routing to delegate your page load via route provider. No need to depend on "tabs" to mimic a single page application (of course if you want tabs, you can use them, but if there are several pages, you can better set up angular routing).
第1步：
创建一个shell页 - index.html，然后设置NG-应用和NG-查看指令
Step 1 : create a shell page - index.html and setup ng-app and ng-view directive.
<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>
第二步：
创建一个JS（app.js）文件并设置角路由，它包括在外壳页面（的index.html）
下面是一个例子 -
Step 2 : create a js (app.js) file and set up angular routing and include it in the shell page (index.html) Here is an example -
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传递参数。
见 - 通网址为$ routeParam在AngularJS应用和
<一href=\"http://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl\">AngularJS - 如何在生成templateUrl使用$ routeParams
you can pass parameters via $routeParam. see - Pass URL to as $routeParam in AngularJS app and AngularJS - How to use $routeParams in generating the templateUrl?
这篇关于如何角应用导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
