Angular1.5 用哪个路由器？答案

【问题标题】：Which router for Angular1.5?Angular1.5 用哪个路由器？
【发布时间】：2016-12-16 13:52:49
【问题描述】：

这个问题似乎有点“IdidntwanttosearchonGoogle”，但我做到了。很多，一切都奏效了。

我正在尝试使用 angular 1.5 构建一个小型 Web 应用程序。问题是我从来没有使用过路由（从来没有！），而 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 中路线的指南，谁在工作，那将是完美的！

【问题讨论】：

标签： javascript angularjs routes angular-component-router ngcomponentrouter

【解决方案1】：

您是特别想使用 Angular 1.5 路由器，还是希望获得有关使用哪个路由器库的建议？

如果你对使用 Angular 路由器不严格，我个人建议使用 ui-router，反正它已经成为 Angular 应用程序的标准。

我喜欢它的地方：

维护良好且非常稳定。
易于配置且功能全面。
简单的指令，可以轻松地在标签上导航。
良好的父母子女支持（例如 /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 问题链接了解更多信息：

https://github.com/angular-ui/ui-router/issues/2793

【讨论】：

嗨！这取决于，所以我可以使用 ui-router 路由组件？在这种情况下，我会使用它：P 谢谢！c
我可以使用 1.0 alpha 吗？
我会说暂时避免使用 alpha，0.3 版本非常稳定，不要被 '0.3' 数字所迷惑，它是非常成熟的库。您可以在 0.3 中伪造组件路由。但是，如果您想要完全组件路由，那么可以使用具有它的 1.0 alpha。

【解决方案2】：

在一个完美的 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' },
  ],
});

【讨论】：

问题首先在于我什至无法使用它：/当我尝试时，我得到一个：错误：[$injector:modulerr] 无法实例化模块应用程序，原因是：[ $injector:modulerr] 无法实例化模块 angular-component-router，原因是：[$injector:nomod] 模块 'angular-component-router' 不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
你的主 js 中有这个 ['ngComponentRouter'] 吗？
angular .module('app', ['ngComponentRouter', 'angular-component-router', 'app.header']); （如果我理解组件，我必须在参数中编写我的子组件，不是吗？）

【解决方案3】：

关注tutorial for ui-router（这是ng1中最常用的路由库）

在第二部分他们解释了how to route to components。

【讨论】：

谢谢！我要看看这个;)