Which router for Angular1.5?

Question

This question seems a bit "IdidntwanttosearchonGoogle" but I did. A lot, and anything worked.

I'm trying to build a little web app with angular 1.5. The problem is that I never used route (NEVER !), and Angular 1.5 seems ambiguous about it. I've seen that 1.5 uses Component Router like Angular 2, then on the Angular page it says that it is deprecated and we have to use ngRoute.

The fact is that anyway, I don't manage to understand which to take and how to use it. Tried this in my bower.json :

{
  "name": "doit"
  "dependencies": {
  "angular": "1.5.8",
  "angular-component-router": "0.2.0"
  }
}

And in my 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>

If you have a guide that explain routes in Angular 1.5 correctly, who works, It would be perfect !

iQ. · Accepted Answer · 2016-08-11T13:41:44.533

Are you specifically wanting to use the Angular 1.5 router or are you asking for suggestions on which router library to use?

Personally if you are not strict on using the Angular router, I would recommend using ui-router, it has become almost a standard in angular apps anyway.

Things I like about it:

It is well maintained and very stable.
Easy to configure and comprehensive.
Simple directives that easily allow navigation on tags.
Good parent child support (e.g. /Categories, /Categories/Football)
Large community support so you will find lots of guides and help easily.

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

Put this in your bower.json:

{
  "angular-ui-router": "~0.3.1"
}

Put this in your app:

angular.module('myApp', ['ui.router', ...other dependencies]);

EDIT:

So if you wish to use the component routing, you can fake it in 0.3.

However if you want full component routing then 1.0 alpha is the one to use.

Check this github issue link for more info:

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

Hi ! It depends, so I can route components with ui-router ? In this case I'll use it :P Thanks !c — Kalas Yagami, Aug 10 '16 at 09:35
I would say avoid the alpha for now, the 0.3 version is very stable and do not be fooled by the '0.3' number, it is well matured library. You can fake the component routing in 0.3. However if you want fully component routing then yes use 1.0 alpha which has it. — iQ., Aug 11 '16 at 13:38

score 2 · Answer 2 · answered Aug 10 '16 at 09:41

2

In a perfect angular 1.5 app every route is bound to a component which can in turn register new sub routes. You can find more details in the new Component Router Developer Guide from 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' },
  ],
});

answered Aug 10 '16 at 09:41

Rohit Gupta

41
1

The problem is firstly in the fact that I can't even use it :/ When I try, I get a : Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:modulerr] Failed to instantiate module angular-component-router due to: [$injector:nomod] Module 'angular-component-router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. – Kalas Yagami Aug 10 '16 at 09:47
you have this ['ngComponentRouter'] in your main js ? – Dan M. CISSOKHO Aug 10 '16 at 09:55
angular .module('app', ['ngComponentRouter', 'angular-component-router', 'app.header']); (If I understood components, I have to write my child components in the params, no ?) – Kalas Yagami Aug 10 '16 at 11:53

score 1 · Answer 3 · answered Aug 10 '16 at 09:26

1

Follow the tutorial for ui-router (which is the most used librairy for routing in ng1)

In the second part they explain how to route to components.

answered Aug 10 '16 at 09:26

gyc

4,300
5
32
54

Thanks ! I'm gonna look at this ;) – Kalas Yagami Aug 10 '16 at 09:35

Which router for Angular1.5?

3 Answers3