Search code examples
javascriptangularjsroutesangular-component-routerngcomponentrouter

Which router for Angular1.5?

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 !

Solution

  • 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:

    1. It is well maintained and very stable.
    2. Easy to configure and comprehensive.
    3. Simple directives that easily allow navigation on tags.
    4. Good parent child support (e.g. /Categories, /Categories/Football)
    5. 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