Java IoT Authors: Tim Hinds, Elizabeth White, Yeshim Deniz, Liz McMillan, Pat Romanski

Related Topics: Java IoT, Agile Computing, @ThingsExpo

Java IoT: Blog Feed Post

Angular 2: Passing Data to Routes By @YFain | @ThingsExpo #IoT

Angular offers a directive RouteParams so a route can receive data from the parent component

In the previous blog I did a high-level overview of Angular 2 router and wrote a basic routing application that demonstrated displaying different components in a predefined area of the window. We often need not only display a component, but also pass some data to it.

For example, if we navigate from the Home to the Product Detail route we need to pass the product ID to the destination route. Angular offers a directive RouteParams so a route can receive data from the parent component. There is also a RouteData directive that can be used to pass additional data to a route from the @RouteConfig section. I’ll illustrate the use of both directives by modifying the app from the previous blog.

Using RouteParams
When the user navigates to the ProductDetail route, we need to pass the product ID to display details of the particular product. Let’s modify the code so the RootComponent can pass the product ID to ProductDetailComponent. The new version of this component will be called ProductDetailComponentParam and it’ll use the directive RouteParams:

import {Component} from 'angular2/angular2';
import {RouteParams} from 'angular2/router';

selector: 'product',
template: `<h1 class="product">Product Detail for Product: {{productID}}</h1>` , // 1
styles: ['.product {background: cyan}']})
export class ProductDetailComponentParam {
productID: string;
constructor(params: RouteParams) { // 2
this.productID = params.get('id'); // 3

  1. Display the received product ID using binding.
  2. The constructor of this component requests Angular to inject the object RouteParams, which contains all parameters that are passed to this component. In TypeScript you just need to declare the argument specifying its type, and Angular will know how to instantiate and inject this object. We’ll cover dependency injection in details in Chapter 5.
  3. Get the value of the parameter named id and assign it to the class variable productID, which is used in template via binding.

Now let’s see how we can change @RouteConfig and router-link to ensure that the value of the product ID will be passed to the component ProdutDetailComponentParam if the user choses to go this route. We’ll do the changes in the file main.ts:

import 'reflect-metadata';
import 'zone.js'; // 1

import {Component, bootstrap, provide} from 'angular2/angular2';
import {HomeComponent} from './components/home'; // 2
import {ProductDetailComponentParam} from "./components/product_param";

LocationStrategy, HashLocationStrategy} from 'angular2/router';

selector: 'basic-routing',
template: `<a [router-link]="['/Home']">Home</a>
<a [router-link]="['/ProductDetail', {id: 1234}]">Product Details</a> // 3
directives: [ROUTER_DIRECTIVES]})
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/product/:id', component: ProductDetailComponentParam, as: 'ProductDetail' }]) // 4
class RootComponent {}

bootstrap(RootComponent, [ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})]);

  1. Angular asynchronously modifies the values of properties participated in binding. In our case, after the user choses to open the product detail component, the value of the variable productID changes and its bindings need to be updated. The library zone.js will automatically sync up all the bindings and watchers in the entire component tree of the application.
  2. I kept my components in the _components_ directory and need import them from there.
  3. This time there are two elements in the array given to router-link. The first one is the name of the route and the second is a JavaScript object containing a name/value pair that represents the parameter to be passed to the /ProductDetail route. For simplicity we’ve hardcoded the id to be 1234, but if we had a variable product pointing to the corresponding object, we could have written {id: product.id} here.
  4. The path property has an additional fragment /:id. The name of this URL fragment must match the name of the parameter property used in router-link. Angular will construct the URL fragment /product/1234 for this ProductDetail route. Note that we still use the same route name in router-link even though it points not to the ProductDetailComponent but to ProductDetailComponentParam.

The following screenshot shows how the product detail view will be rendered in the browser:


Note the URL. Angular router replaced the path /product/:id with /product/1234.

Let’s overview the steps that Angular did under the hood for rendering the main page of the application:

  1. Check the the content of each router-link to find the corresponding routes configurations.
  2. Modify the URL fragments the parameters with actual values where specified.
  3. Build the actual <a href=””> tags that the browser understands.

The next screenshot shows a snapshot of the home page of our application with the Chrome Dev Tools panel open.


Since the path property of the Home route contains just the slash, Angular simply removed it – a single slash base URL of the page. But the anchor under Product Details link is already converted into a regular HTML tag. When the user will click on the Product Details link, the router will attach a hash sign and add /product/1234 to the base URL so the absolute URL of the Product Detail view will become http://localhost:8080/#/product/1234.

Using RouteData
While most of the times parent components will be passing data to their children, Angular also offers a mechanism to pass additional data to components at the time of the route configuration. For example, besides the data that a component needs for implementing application logic, we may need to pass a flag indicating if the application runs in production environment or not. This can be done by using the data property of the @RouteConfig annotation. For example, our ProductDetail route can be configured as follows:

{path: '/product/:id', component: ProductDetailComponentParam,
as: 'ProductDetail', data: {isProd: true}}])

Accordingly, the constructor of the ProductDetailComponent will need an extra argument of type RouteData:

export class ProductDetailComponentParam {
productID: string;
constructor(params: RouteParams, data: RouteData) {
this.productID = params.get('id');

console.log(`Is this prod environment: ${data.get('isProd')}`);

Passing data to a route with RouteData is not an alternative to RouteParams. While RouteParams is used to pass the data from one route to another using based on the user’s selections (e.g., show details of the selected product), RouteData can come handy when you need to pass some data to a route during the configuration phase, e.g. is it a production or QE environment, should the user have administrator’s privileges, or what URL of use for the product service.

To see this application in action follow this plank and press the button Run. For simplicity, all the code is located in one file main.ts. Also, I imported the dev version of Angular in the index.html that includes such libraries as zone.js and reflect-metadata, so there is no need to import them separately.

Stay tuned for more Angular 2 blogs. My other Angular-related blogs are here . Manning started publishing drafts of our book “Angular 2 Development with TypeScript“.

Read the original blog entry...

More Stories By Yakov Fain

Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs (http://yakovfain.com) and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain

@ThingsExpo Stories
"There's plenty of bandwidth out there but it's never in the right place. So what Cedexis does is uses data to work out the best pathways to get data from the origin to the person who wants to get it," explained Simon Jones, Evangelist and Head of Marketing at Cedexis, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect at GE, and Ibrahim Gokcen, who leads GE's advanced IoT analytics, focused on the Internet of Things / Industrial Internet and how to make it operational for business end-users. Learn about the challenges posed by machine and sensor data and how to marry it with enterprise data. They also discussed the tips and tricks to provide the Industrial Internet as an end-user consumable service using Big Data Analytics and Industrial C...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City. Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term.
To Really Work for Enterprises, MultiCloud Adoption Requires Far Better and Inclusive Cloud Monitoring and Cost Management … But How? Overwhelmingly, even as enterprises have adopted cloud computing and are expanding to multi-cloud computing, IT leaders remain concerned about how to monitor, manage and control costs across hybrid and multi-cloud deployments. It’s clear that traditional IT monitoring and management approaches, designed after all for on-premises data centers, are falling short in ...
With privacy often voiced as the primary concern when using cloud based services, SyncriBox was designed to ensure that the software remains completely under the customer's control. Having both the source and destination files remain under the user?s control, there are no privacy or security issues. Since files are synchronized using Syncrify Server, no third party ever sees these files.
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
"Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
Internet-of-Things discussions can end up either going down the consumer gadget rabbit hole or focused on the sort of data logging that industrial manufacturers have been doing forever. However, in fact, companies today are already using IoT data both to optimize their operational technology and to improve the experience of customer interactions in novel ways. In his session at @ThingsExpo, Gordon Haff, Red Hat Technology Evangelist, shared examples from a wide range of industries – including en...
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City. Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of bus...
delaPlex is a global technology and software development solutions and consulting provider, deeply committed to helping companies drive growth, revenue and marketplace value. Since 2008, delaPlex's objective has been to be a trusted advisor to its clients. By redefining the outsourcing industry's business model, the innovative delaPlex Agile Business Framework brings an unmatched alliance of industry experts, across industries and functional skillsets, to clients anywhere around the world.
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
Headquartered in Plainsboro, NJ, Synametrics Technologies has provided IT professionals and computer systems developers since 1997. Based on the success of their initial product offerings (WinSQL and DeltaCopy), the company continues to create and hone innovative products that help its customers get more from their computer applications, databases and infrastructure. To date, over one million users around the world have chosen Synametrics solutions to help power their accelerated business or per...