Here is the code to generate random data. We earlier downloaded the Chance.js package to use with Node.js. We will generate random data on the server side, not on client side, so that we can later demonstrate how to make an HTTP request using Angular 2.Ĭhance.js is available for both client-side and server-side JavaScript. For this, we can use the Chance.js library. To populate our template, we need to generate some random search result data. And finally, is what displays the component based on the current URL. The navigation bar has an anchor tag that doesn't have an href attribute instead, we are using the routerLink directive to assign the redirect link so that when clicked on, instead of a complete page reload, it only changes the URL and component. In the AppComponent template, we are displaying a navigation bar.ng.router.APP_BASE_ HREF is used to find the base URL of the app. Also, we are providing a custom provider, which returns the / character when an instance of the ng.router.APP_BASE_HREF service is requested. While initializing the app, we're passing the ng.router.ROUTER_PROVIDERS provider, which will be used to create instances of various services related to routing. The ng.router.RouteConfig method returns a function that takes the root component and attaches the routes to it. Here, the first route is for the home page, second for displaying the search result, and finally, the third for handling invalid URLs, that is, URLs for which routes are not defined. The paths can be static, parameterized, or wildcard, just like Express route paths. A route consists of a path, component, and the name of the route. We are providing an array of routes as an argument to the ng.router.RouteConfig method. Then, we use ng.router.RouteConfig to configure the routes for our application.While creating the root component, we add the ng.router.ROUTER_DIRECTIVES directive to it, which lets us use the routerLink directive. At first, we create the root component, called AppComponent.Now, create a file named app.html in the componentTemplates directory and place this code in it:."name": "SearchEngine-Template", "dependencies": ) In the initial directory, you will find app.js and package.json.The final directory contains the final search engine template whereas the initial directory contains the files to quickly get started with building the search engine template. In the exercise files of this recipe, you will find two directories, initial and final.Generating random textual data using the Chance.js libraryįollow these steps to set up your project:.The built-in HTTP client provided by Angular 2. In this recipe, we will cover the following topics: At the end of this recipe, you will be comfortable with building SPAs using Angular 2.īefore working on this tutorial, reading Comprehensive overview of Angular 2 architecture and features is highly recommended. We will use Bootstrap 4 to design the search engine template. We won't be building a complete search engine because that's out of the scope of this recipe. In this recipe, we will build a basic search engine template to demonstrate routing in Angular 2. Angular 2 comes with built-in routing APIs, which are very powerful, feature rich, and easy to use. To build single page applications ( SPAs) using Angular 2, we need to learn how to implement routing in Angular 2. For complete self-paced web design training, visit our Web design and development bundle page. We offer HTML5, CSS3, JavaScript, Bootstrap, Angular.JS, WordPress Node.JS, React.JS, Joomla, Drupal, Vue.JS and more classes in self-paced video format starting at $60.
0 Comments
Leave a Reply. |