Using ui-router as a Component Router

Intro

In Angular 1.5 we got the Component, it is an improvement on our old pal the Directive. In fact a Component is just a Directive with some default settings, and a nicer API.

Here is a great blog post by Todd Motto which explains Components in dept, and compares them to ordinary directives.

A tale of two Components

Components have one other nice feature, they are closely aligned to the way Angular 2.0 will work. In fact if you squint your eyes you cannot really see the difference:

Here is a nameCard Component in Angular 1.x:
 
 angular.module('myApp',[])
  .component('nameCard', {
    bindings: {
      name: "@"
    },
    controllerAs: 'nameCardController',
    template: `
      <h1>Hi my name is</h1>
      <h2>{{ nameCardController.name }}</h2>
    `
  });
 
Here is a nameCard Component in Angular 2.x:
 
@Component({
  selector: 'name-card',
  template: `
    <h1>Hi my name is</h1>
    <h2>{{ name }}</h2>
  `
})
export class NameCardComponent {
  @Input() name: String;
}
 
Here is how you use both of them:
 
 <name-card name="Maarten"></name-card>
 

Why use Components in Angular 1.5

So using Components in Angular 1.5 gets you pretty close the way Angular 2.0, works, which makes migrating to 2.0 a lot easier.

That is why we at 42 decided to use Components instead of Controllers and Element Directives (with restrict E), to prepare us for the migration ahead.

ui-router as a Component Router

But we hit one problem: we use ui-router, which is not geared towards using Components... or is it?

Turns out you can get ui-router to work with components quite easily:
 
 angular.module('myApp', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state('home', {
      url: '/greetings',
      template: '<name-card name="Maarten"></name-card>'
    })
  })
  .component('nameCard', {
    bindings: {
      name: "@"
    },
    controllerAs: 'nameCardController',
    template: `
      <h1>Hi my name is</h1>
      <h2>{{ nameCardController.name }}</h2>
    `
  });
 
Basically what we do is say that the template of the 'home' state is simply the use of a single Component. This way there is no need to define a controller and a separate template HTML file for the state.


Dealing with $stateParams

The first example hard-coded my name into the Component, what if we want to take a name from the URL instead, to make it more dynamic:
 
 angular.module('myApp', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state('home', {
      url: '/greetings/:name',
      template: '<name-card></name-card>'
    })
  })
  .component('nameCard', {
    controllerAs: 'nameCardController',
    controller: function($stateParams) {
      const nameCardController = this;

      nameCardController.name = $stateParams.name;
    },
    template: `
      <h1>Hi my name is</h1>
      <h2>{{ nameCardController.name }}</h2>
    `
  });
 
In this example we simply inject the $stateParams into the controller
for the nameCard Component, and use it to get the name from the URL.


Dealing with resolves

What if we have resolves in your states how do we deal with that? The answer is by using a 'route' controller like this:
 
 angular.module('myApp', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state('home', {
      url: '/greetings',
      template: '<name-card name="homeRouteController.name"></name-card>',
      controllerAs: "homeRouteController",
      controller: function(name) {
         const homeRouteController = this;
         homeRouteController.name = name;
      },
      resolve: {
        name: function() {
          /*
            Of course in real life this would get
            some data from some REST API.
          */
          return "Maarten";
        }
      }
    })
  })
  .component('nameCard', {
    bindings: {
      name: "<"
    },
    controllerAs: 'nameCardController',
    template: `
      <h1>Hi my name is</h1>
      <h2>{{ nameCardController.name }}</h2>
    `
  });
 
The job of a 'route' controller is acting purely as glue between the resolve and the Component. Its job is to inject all the 'resolves' and them on the scope, so that the template can access them.

Also note that the binding in the Component uses a one way binding (<) now instead of an interpolation binding (@), because name is now a variable instead of a string.


A Nuclear Weapon

There is one final weapon in our arsenal: the templateProvider, it allows you to dynamically create a template which ui-router will use.

We can implement the example from 'Dealing with $stateParams' with templateProvider like this:
 
 angular.module('myApp', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state('home', {
      url: '/greetings/:name',
      templateProvider: function($stateParams) {
        const name = $stateParams.name
        return `<name-card name="${name}"></name-card>`;
      }
    })
  })
  .component('nameCard', {
    bindings: {
      name: "@"
    },
    controllerAs: 'nameCardController',
    template: `
      <h1>Hi my name is</h1>
      <h2>{{ nameCardController.name }}</h2>
    `
  });
 

In the templateProvider you have access to all resolves and you can inject any service / factory that you need.

In this example we use it to create a route which passes the 'name' from the $stateParams as a string. This way the nameCard does not need to use a one way binding, but has an interpolation binding instead.

The reason I think this is a nuclear weapon is because you do not really need it. TemplateProviders hide the 'router' from your Component and I feel that this is dishonest. A Component should be aware that it represents a 'state' by injecting the $stateParams in its controller.

In Angular 2.0 when a Component needs a parameter from the route it will get it himself, see this blog post by Victor Savkin under the heading "Using Params". That is why I advocate always injecting the $stateParams in the Component so it is closer to best practices in Angular 2.0.

ui-router 1.0.0

In ui-router 1.0.0 it is going to be even easier to route to a Component, because it will be directly supported by ui-router. See this page: https://ui-router.github.io/tutorial/ng1/hellosolarsystem on how to do this.

Conclusion

Using Components in Angular 1.5 will make migrating easier.

Using ui-router as a Component router is really not that hard.

That is it, happy routing!

35 comments:

  1. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. 192.168.0.1

    ReplyDelete
    Replies
    1. With the right router bit, users can cut, trim, and shape workpieces with staggering versatility; these bits are available in numerous profiles and can be custom fabricated to create virtually any profile conceivable.wifi router

      Delete
  2. Awesome blog, thank you so much for sharing such amazing information with us. For a custom website design and SEO Services at the minimum cost.
    Website Designing Company in Delhi

    ReplyDelete
  3. Anonymous20/6/20 08:45

    Needed to compose you a tiny note to finally thank you very much yet again for your personal splendid methods you have discussed above. It is strangely open-handed with people like you to provide publicly all that a number of people would have marketed as an electronic book to generate some bucks for their own end, primarily now that you could possibly have tried it if you ever wanted. These inspiring ideas likewise acted like a fantastic way to know that the rest have the same dreams really like my personal own to see a whole lot more concerning this problem. I’m sure there are thousands of more enjoyable times in the future for many who check out your blog. design agencies sf

    ReplyDelete
  4. Anonymous20/6/20 15:58

    Excellent publish from specialist also it will probably be a fantastic know how to me and thanks very much for posting this useful data with us all. design agencies sf

    ReplyDelete
  5. To be sure using your thoughts here and I like your blog! I’ve bookmarked it to ensure I can come back & read more sometime soon. ipad device template

    ReplyDelete
  6. There is definately a great deal to know about this subject. I like all of the points you've made. wifi router for multiple devices

    ReplyDelete
  7. Amazing blog, thank you so much for sharing this valuable blog. Visit Protrek Adventure for affordable Everest Base Camp Trek and Three Passes Trek with the best guidance.
    Everest Base Camp Trek

    ReplyDelete
  8. I want to thank you for this excellent information, I definitely enjoyed this post. I have got you saved as a favorite to look at new stuff you post.
    Essay Assignment Help Middlesex
    Accounting Information System Assignment Help
    Macroeconomics Assignment Writing

    ReplyDelete
  9. Switch is a gadget which permits more than 1 PC to get to the Internet simultaneously. We should take a model. You have 2 PCs and you have 1 modem that is given by your Internet specialist organization (ISP). jiofi.local.html

    ReplyDelete
  10. We offer a tool to identify your router's IP address 192.168.0.1 - 192.168.0.1 Router Admin Login. If you spot devices that shouldn't be there, check where they're coming from and whether they should be there.

    ReplyDelete
  11. Thanks for the post. I have also using JioFi wifi router.
    Resources:-

    jioupdate.in/jiofi-local-html/
    jio4gvoiceapk.in/jiofi-local-html/

    ReplyDelete
  12. Keep going on this amazing blog. Visit RP Paper Impex for Business Diary Manufacturer and Tissue Paper Roll Suppliers in India at an affordable price.
    Business Diary Manufacturer in India

    ReplyDelete
  13. This blog was really amazing and valuable, thank you so much for sharing this blog. Sarswati Enterprises is a leading Pilfer Proof Caps Making Machinery and Die Set Manufacturers in Delhi, for more information visit our website.
    Pilfer Proof Caps Making Machinery

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. very best post keep it up... and also see more wifi related info at jiofi.local.html

    ReplyDelete
  16. Great Post, thanks for sharing such an amazing blog with us. Veramed is one of the leading Quality Herbal and Ayurvedic Products and Anti Hairfall Ayurvedic Hair Care Products in India.
    Best Quality Herbal and Ayurvedic Products in India

    ReplyDelete
  17. As an assignment helper, we know that assignment writing is the most important task for every student. The role of assignment writing in life and process is important for evaluating a student's skills and abilities, so if you are looking for assignment help UK, make the right decision and go for the best organization in the United Kingdom, GlobalAssignmentExpert is popular for my assignment help online, with us you can get all the necessary services at a pocket-friendly price. We satisfied all our customers with our quality services for global assignment.

    ReplyDelete
  18. A switch bit is a cutting device utilized with a switch to defeat out (or burrow out) spaces in the outside of a by and large hard workpiece. In spite of the fact that switches and switch pieces are all the more generally utilized in carpentry applications like cabinetry and carpentry, these cutting apparatuses can likewise act in metals, plastics and different materials.router ip

    ReplyDelete
  19. If yes, ARC Welder can be your best choice. arc welder can run Android Apps and Games on Windows computers.

    ReplyDelete
  20. latest release ringtone download free for you mobile ijn mp3 formates

    ReplyDelete
  21. xender apk download thye one of the best file sharing application

    ReplyDelete
  22. Amazing Blog, keep it up for more valuable like this. Visit OGEN Infosystem for Top SEO Agency, Content Writing Agency, Digital Marketing Agency, PPC Agency in Delhi in affordable price at Digitaginfo.
    SEO Agency in Delhi

    ReplyDelete
  23. Get one of the best World Import And Export Data services at Import Globals. For more information call +919999887320 or visit our website.
    Import Export Data

    ReplyDelete