Angular1.5的哪个路由器?

时间:2016-08-10 09:14:08

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

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

我正在尝试构建一个角度为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中的路线,谁工作,那将是完美的!

3 个答案:

答案 0 :(得分:4)

您是否特别想使用Angular 1.5路由器,或者您是否在寻求有关使用哪个路由器库的建议?

就个人而言,如果你不严格使用Angular路由器,我建议使用ui-router,它几乎已成为角度应用程序的标准。

我喜欢的事情:

  1. 维护良好且非常稳定。
  2. 易于配置和全面。
  3. 简单的指令,可以轻松地在标签上进行导航。
  4. 良好的父母子女抚养费(例如/类别,/类别/足球)
  5. 大型社区支持,因此您可以轻松找到许多指南和帮助。
  6. 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

答案 1 :(得分:2)

在完美的角度1.5 app中,每条路线都绑定到一个组件,该组件又可以注册新的子路径。您可以在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' },
  ],
});

答案 2 :(得分:1)

关注tutorial ui-router(这是ng1中路由最常用的librairy)

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