{"id":435,"date":"2018-03-11T21:19:08","date_gmt":"2018-03-11T15:49:08","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=435"},"modified":"2018-03-12T10:54:31","modified_gmt":"2018-03-12T05:24:31","slug":"angular-5-app-setup-routing","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/","title":{"rendered":"Angular 5 app setup and Routing"},"content":{"rendered":"

 <\/p>\n

In this blog I am going to show you how to setup a Angular 5 app and how to create routing with its components. As you all know Angular is the powerful framework of Javascript, and it is basically a front end development computer language for SPA’s (Single Page Application).<\/p>\n

Before I start about this setup process, assuming that you all have installed Node JS<\/strong><\/em><\/a> and NPM(Node Package Manager) in your machine as NPM will be our key feature to install Angular CLI(Command Line Interface). What is CLI? If you don’t know about CLI you can go through my previous blog where I have explained about CLI by clicking this link<\/a>.<\/strong><\/em><\/p>\n

If you haven’t installed Node JS<\/strong><\/em><\/a> yet, install it first before install Angular app.<\/p>\n

 <\/p>\n

Install Angular<\/h2>\n

 <\/p>\n

Open command prompt (cmd) for Windows, Terminal for Linux \/ MacOS. As I\u00a0am using\u00a0a windows machine,\u00a0will use command prompt here.<\/p>\n

Step 1<\/strong><\/p>\n

Open cmd, and type node -v<\/em><\/strong> to\u00a0view the version of installed node and type npm -v<\/strong>\u00a0<\/em>to view the version of npm. If everything is ok. then install Angular CLI globally by typing\u00a0npm install <\/span>–<\/span>g <\/span>@angular<\/span>\/<\/span>cli<\/span><\/strong>\u00a0<\/span><\/em>(-g for globally installation)<\/p>\n

 <\/p>\n

Step 2<\/strong><\/p>\n

Go to the project directory where you want to store your project, (eg. cd var\/www\/html\/my-angular-project)\u00a0<\/em>and create a new project by typing the command ng new my-first-angular-app,\u00a0<\/strong><\/em>which will take some times to create the project and the skeleton of application (it will install all its dependencies)<\/p>\n

 <\/p>\n

Step 3<\/strong><\/p>\n

Your installation is completed. Now go to the project directory by typing cd my-first-angular-app\u00a0<\/strong><\/em>and serve the project on your browser by typing the command\u00a0ng serve <\/span>—<\/span>open .<\/span><\/strong>\u00a0<\/span><\/em>If the app doesn’t run automatically to the browser, you can directly go to the browser and type\u00a0http:\/\/localhost:4200\/\u00a0<\/strong><\/em>(4200 is the port on which the app is running). Yay! now you can see your app is running like the following<\/p>\n

\"angular<\/p>\n

You can edit your app by changing the files app.component.ts<\/strong><\/em>, app.component.html<\/strong><\/em> or app.component.css\u00a0<\/strong><\/em>(Please note: If you edit any file and hit save CTRL+S, it will automatically compile and reload\/refresh the app).<\/p>\n

 <\/p>\n

Routing between Components<\/h2>\n

 <\/p>\n

Step 1<\/strong><\/p>\n

Create a file\u00a0app.routes.ts\u00a0<\/strong><\/em>within src\/app<\/strong><\/em> folder. Open the file in any code\/text editor and edit the file. Type the following codes in app.routes.ts file. We are assuming that all the components (.ts files) are within the same folder (src\/app)<\/p>\n

<\/code><\/pre>\n
import<\/span> {<\/span> NgModule }<\/span> from<\/span> '@angular\/core';\r\n<\/span><\/code>import {<\/span> RouterModule, Routes }<\/span> from<\/span> '@angular\/router'<\/span>;<\/span><\/pre>\n
import<\/span> {<\/span> HomeComponent }<\/span> from<\/span> '.\/home.component'<\/span>;<\/span> \r\nimport<\/span> {<\/span> AboutComponent }<\/span> from<\/span> '.\/about.component'<\/span>;\r\n<\/span><\/code>import {<\/span> ProductComponent }<\/span> from<\/span> '.\/product.component'<\/span>; \r\n<\/span>import {<\/span> ContactComponent }<\/span> from<\/span> '.\/contact.component'<\/span>;<\/span> \r\nimport {<\/span> ErrorComponent }<\/span> from<\/span> '.\/error.component'<\/span>; <\/span><\/pre>\n
export<\/span> const<\/span> routes:<\/span> Routes =<\/span> [<\/span>\r\n{<\/span> path:<\/span> ''<\/span>, redirectTo: 'home',<\/span> pathMatch:<\/span> 'full' },<\/span>\r\n{<\/span> path:<\/span> 'home'<\/span>,<\/span> component:<\/span> HomeComponent },\r\n<\/span><\/code>{ path:<\/span> 'about'<\/span>,<\/span> component:<\/span> AboutComponent }, <\/span> \r\n{ path:<\/span> 'product\/:id'<\/span>,<\/span> component:<\/span> ProductComponent }, <\/span> \r\n{ path:<\/span> 'contact'<\/span>,<\/span> component:<\/span> ContactComponent }, <\/span> \r\n{ path:<\/span> '**'<\/span>,<\/span> component:<\/span> ErrorComponent }<\/span><\/pre>\n
];\r\n\r\n<\/span><\/pre>\n
@NgModule({<\/span>\r\nimports<\/span>:<\/span> [  RouterModule.forRoot(routes)  ],<\/span>\r\nexports: [  RouterModule  ]<\/code><\/pre>\n
})\r\n\r\nexport class AppRoutingModule {\r\n\r\n}<\/pre>\n
\u00a0<\/span><\/pre>\n
Now open app.module.ts<\/strong><\/em> file, and add the routing component to the app.module.ts by the following method.<\/span><\/p>\n
..\r\n..\r\nimport { AppRoutingModule } from '.\/app.routes';\r\n..\r\n..\r\n\r\n@NgModule({\r\n..\r\n..\r\nimports: [\r\n ..,\r\n AppRoutingModule,\u00a0\r\n ..\r\n],\r\n})\r\n<\/span><\/pre>\n
 \r\n<\/code><\/pre>\n
Step 2<\/strong><\/p>\n
Now open app.component.html\u00a0<\/strong><\/em>to edit for app router outlet (The dynamic section where all the routes will load dynamically). Edit the file like the following<\/p>\n
<header><\/header>\r\n<!-- all routing components will be visible at the below section dynamically<\/em> -->\r\n<router-outlet><\/router-outlet>\r\n<footer><\/footer>\r\n\r\n<\/pre>\n
Now you have an Angular project with its routes. You can view the files by providing the full url<\/strong><\/em> with the routes names as suffix. For example<\/p>\n
http:\/<\/a>\/localhost:4200\/home\r\nhttp:\/\/localhost:4200\/about\r\nhttp:\/\/localhost:4200\/product\/55\r\nhttp:\/\/localhost:4200\/contact\r\nhttp:\/\/localhost:4200\/abcd \/*This will load the ErrorComponent as there is no \"abcd\" route present*\/<\/pre>\n
Or, you can view the routes by linking them with <a> anchor element tag such as following example<\/p>\n
<<\/span>a<\/span> routerLink<\/span>=<\/span>\"\/home\"<\/span>><\/span>Home<\/span><\/<\/span>a<\/span>><\/span>\r\n<<\/span>a<\/span>\u00a0routerLink<\/span>=<\/span>\"\/about\"<\/span>><\/span>About us<\/span><\/<\/span>a<\/span>><\/span>\r\n<<\/span>a<\/span>\u00a0routerLink<\/span>=<\/span>\"\/product\/55\"<\/span>>Products<\/span><\/<\/span>a<\/span>><\/span>\r\n<<\/span>a<\/span>\u00a0routerLink<\/span>=<\/span>\"\/contact\"<\/span>><\/span>Contact us<\/span><\/<\/span>a<\/span>><\/span><\/pre>\n
 <\/p>\n
That’s all<\/p>\n
Please share if you like it!<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
  In this blog I am going to show you how to setup a Angular 5 app and how to create routing with its components. As you all know Angular is the powerful framework of Javascript, and it is basically a front end development computer language for SPA’s (Single Page Application). Before I start about […]<\/p>\n","protected":false},"author":10,"featured_media":436,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,3,5],"tags":[],"yoast_head":"\nAngular 5 app setup and Routing - Openweb Solutions Blog<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 5 app setup and Routing - Openweb Solutions Blog\" \/>\n<meta property=\"og:description\" content=\"  In this blog I am going to show you how to setup a Angular 5 app and how to create routing with its components. As you all know Angular is the powerful framework of Javascript, and it is basically a front end development computer language for SPA’s (Single Page Application). Before I start about […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-11T15:49:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-12T05:24:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2018\/03\/banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"497\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2018\/03\/banner.jpg\",\"width\":1024,\"height\":497,\"caption\":\"angular 5 app setup and routing\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/\",\"name\":\"Angular 5 app setup and Routing - Openweb Solutions Blog\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/#primaryimage\"},\"datePublished\":\"2018-03-11T15:49:08+00:00\",\"dateModified\":\"2018-03-12T05:24:31+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/615090f954d8460cf6186cf920b47398\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/angular-5-app-setup-routing\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/615090f954d8460cf6186cf920b47398\",\"name\":\"Preetam Mallick\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed836329485e177373e4ff5323b6670a?s=96&r=g\",\"caption\":\"Preetam Mallick\"},\"description\":\"Frontend developer at Openweb Solutions\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/435"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":14,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions\/451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/436"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}