Angular1.5 的哪个路由器?
Which router for Angular1.5?
这个问题好像有点"IdidntwanttosearchonGoogle"不过我确实是。很多,一切都奏效了。
我正在尝试使用 angular 1.5 构建一个小型网络应用程序。问题是我从来没有使用过路由(从来没有!),Angular 1.5 似乎对此模棱两可。我已经看到 1.5 使用像 Angular 2 这样的组件路由器,然后在 Angular 页面上它说它已被弃用,我们必须使用 ngRoute。
事实上,无论如何,我都不知道该拿哪个以及如何使用它。在我的 bower.json 中试过这个:
{
"name": "doit"
"dependencies": {
"angular": "1.5.8",
"angular-component-router": "0.2.0"
}
}
在我的 index.html 中:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DoIt Application</title>
<!-- SCRIPT DE CONNEXION -->
<script src="bower_components/angular/angular.js"></script>
<script src="bootstrap.js"></script>
<script src="app/app.component.js"></script>
<script src="bower_components/angular-component-router/angular_1_router.js"></script>
<script src="bower_components/angular-component-router/ng_route_shim.js"></script>
</head>
<body ng-app="app">
<my-app></my-app>
</body>
</html>
如果你有一个指南可以正确解释 Angular 1.5 中的路线,谁有用,那将是完美的!
遵循 tutorial for ui-router(这是 ng1 中最常用的路由库)
在第二部分他们解释了 how to route to components。
您是特别想使用 Angular 1.5 路由器还是想就使用哪个路由器库寻求建议?
就个人而言,如果您对使用 Angular 路由器不严格,我会推荐使用 ui-router,无论如何它几乎已成为 angular 应用程序的标准。
我喜欢它的地方:
- 它维护得很好,非常稳定。
- 易于配置且全面。
- 简单的指令,可以轻松地在标签上导航。
- 很好 parent child 支持(例如 /Categories,/Categories/Football)
- 庞大的社区支持让您可以轻松找到大量指南和帮助。
https://github.com/angular-ui/ui-router
将此放入您的 bower.json:
{
"angular-ui-router": "~0.3.1"
}
将其放入您的应用中:
angular.module('myApp', ['ui.router', ...other dependencies]);
编辑:
所以如果你想使用组件路由,你可以在 0.3 中伪装它。
但是,如果您想要完整的组件路由,则可以使用 1.0 alpha。
查看此 github 问题 link 了解更多信息:
在完美的 angular 1.5 应用程序中,每个路由都绑定到一个组件,该组件又可以注册新的子路由。您可以在 https://docs.angularjs.org/guide/component-router
的新组件路由器开发人员指南中找到更多详细信息
var portalModule = angular.module('portal', ['ngComponentRouter']);
portalModule.value('$routerRootComponent', 'portal');
portalModule.component('portal', {
templateUrl: 'components/portal.html',
$routeConfig: [
{ path: '/home', component: 'home', name: 'Home', useAsDefault: true },
{ path: '/apps/:name/:location*', component: 'app', name: 'Apps' },
],
});
这个问题好像有点"IdidntwanttosearchonGoogle"不过我确实是。很多,一切都奏效了。
我正在尝试使用 angular 1.5 构建一个小型网络应用程序。问题是我从来没有使用过路由(从来没有!),Angular 1.5 似乎对此模棱两可。我已经看到 1.5 使用像 Angular 2 这样的组件路由器,然后在 Angular 页面上它说它已被弃用,我们必须使用 ngRoute。
事实上,无论如何,我都不知道该拿哪个以及如何使用它。在我的 bower.json 中试过这个:
{
"name": "doit"
"dependencies": {
"angular": "1.5.8",
"angular-component-router": "0.2.0"
}
}
在我的 index.html 中:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DoIt Application</title>
<!-- SCRIPT DE CONNEXION -->
<script src="bower_components/angular/angular.js"></script>
<script src="bootstrap.js"></script>
<script src="app/app.component.js"></script>
<script src="bower_components/angular-component-router/angular_1_router.js"></script>
<script src="bower_components/angular-component-router/ng_route_shim.js"></script>
</head>
<body ng-app="app">
<my-app></my-app>
</body>
</html>
如果你有一个指南可以正确解释 Angular 1.5 中的路线,谁有用,那将是完美的!
遵循 tutorial for ui-router(这是 ng1 中最常用的路由库)
在第二部分他们解释了 how to route to components。
您是特别想使用 Angular 1.5 路由器还是想就使用哪个路由器库寻求建议?
就个人而言,如果您对使用 Angular 路由器不严格,我会推荐使用 ui-router,无论如何它几乎已成为 angular 应用程序的标准。
我喜欢它的地方:
- 它维护得很好,非常稳定。
- 易于配置且全面。
- 简单的指令,可以轻松地在标签上导航。
- 很好 parent child 支持(例如 /Categories,/Categories/Football)
- 庞大的社区支持让您可以轻松找到大量指南和帮助。
https://github.com/angular-ui/ui-router
将此放入您的 bower.json:
{
"angular-ui-router": "~0.3.1"
}
将其放入您的应用中:
angular.module('myApp', ['ui.router', ...other dependencies]);
编辑:
所以如果你想使用组件路由,你可以在 0.3 中伪装它。
但是,如果您想要完整的组件路由,则可以使用 1.0 alpha。
查看此 github 问题 link 了解更多信息:
在完美的 angular 1.5 应用程序中,每个路由都绑定到一个组件,该组件又可以注册新的子路由。您可以在 https://docs.angularjs.org/guide/component-router
的新组件路由器开发人员指南中找到更多详细信息var portalModule = angular.module('portal', ['ngComponentRouter']);
portalModule.value('$routerRootComponent', 'portal');
portalModule.component('portal', {
templateUrl: 'components/portal.html',
$routeConfig: [
{ path: '/home', component: 'home', name: 'Home', useAsDefault: true },
{ path: '/apps/:name/:location*', component: 'app', name: 'Apps' },
],
});