Creating route components
Let's create HomeComponent
, SearchResultComponent
, and NotFoundComponent
. Before that, let's create a component to display the search form. The search form will have a textbox and a search button. Follow these steps:
- Place this code in the
index.js
file, above theAppComponent
code:var FormComponent = ng.core.Component({ selector: "search-form", directives: [ng.router.ROUTER_DIRECTIVES], templateUrl: "componentTemplates/search-form.html", }).Class({ constructor: function(){}, ngOnInit: function(){ this.searchParams = { query: "" }; this.keyup = function(e){ this.searchParams = { query: e.srcElement.value }; }; } })
- Now, create a file named
search-form.html
in thecomponentTemplates
directory, and place this code in it:<div class="m-a-2 text-xs-center"> <h1>Search for Anything</h1> <form class="form-inline m-t-1"> ...