Getting started with Angular 17 routing, beginners guide #1

first create your angular 17 application using the command new your app name and navigate into your project folder with CD your app app name next run your app with serve and preview it at Local Host Bart 4200 in your browser now create two components about and contact using generate component about customize the content in the respective HTML files about. component HTML and contact. component tml let's dive into the app routing. module. TS file navigate to line number eight where we're going to define the roots for our application we'll do this by creating an array of objects with each object having two properties path for the URL path and component for the corresponding angular component to display first let's import the components add the following import statements at the top of your file now let's add these components to the root array this sets up the routing for about and contact paths associating them with the about component and contact component respectively feel free to add more routes to suit your application structure and that's it save your file and your angular 17 application is now equipped with basic rooting let's address invalid Roots earlier we noticed that when users entered an invalid URL there was no notification so let's create a not found component whenever a user types an invalid URL this component will be displayed blade to start generate the not found component with the command generate component not found then import the not found component at the top of your app routing model test file next add a route for the not found component in your rout array this sets up a wild card route that will match any invalid URL redirecting the user to the notfound component save your file and now if a user enters an invalid URL they'll be directed to the notfound page in angular roots are processed in a sequential manner scanning from top to bottom if a user enters a path angular checks the roots in order if a match is found it displays the corresponding component if no match is found it considers the Wild Card root as the default displaying the not found component now let's experiment with the root order if we move the Wild Card route to the second position in the root array save the file and navigate to the about or contact page you'll notice that the URL is not found this is because the wildcard path is encountered first and angular doesn't continue scanning let's revert the order back to the Wild Card route being last in the array save the file and observe now your application should run smoothly and that's it for today

Channel: CodeForLife

Views: 9,353

Keywords: Angular, Angular rountes, Typescript

Id: X3ejpAAQnoY

Length: 7min 21sec (441 seconds)

Published: Tue Nov 21 2023