Our end game for routers. Pardon me; I can’t explain my recent obsession with angular dart despite the fact that less than a certain percentage which am yet to figure out are actually interested in angular dart right here in Nigeria. Straight into today’s tutorial and explanation of Router basics, we are going to apply the use of router to our navigation menu in our web app. So I actually saved you from the stress and prepared the files you need with a custom navigation bar made with HTML, some CSS and Bulma CSS framework. Alright, let’s clone the repository from my run pub get to update dependencies and then webdev serve to setup our live server. github, Great, I guess we are good to go. By observing, you notice that clicking the links has no effect and doesn’t lead to other pages and that’s the good news. The bad news is we have to configure everything to function properly. Let’s recap and look into Routers or Routing, am all about explaining what can’t be found on a single page. The angular router enables navigating from one view to another as a user performs app tasks. Skipping what’s already explained in the angular dart official documentation let’s add router provider to our program. Adding Router Provider Firstly, we head over to our file and add our Router Providers there. With router provider; there are two location strategy which are the hash Location strategy and path location strategy and you are going to learn how to switch between the two location strategies easily. main.dart Let’s import the router package into our main dart file import ‘package:angular_router/angular_router.dart’; After that, we import the file to reference it within the program as “ ”, self isn’t a keyword and it can be named anything of your choice. main.dart self import ‘main.template.dart’ as self; Now, if you don’t know about dependency injection in angular dart please go back to the documentation and read about it and if you don’t understand it then read my article on dependency injection right here. We want to make our (hash location strategy) available to every component within our program and the only way to do that is if we make it a service that can be injected. The annotation is what we need to inject into our program that generates an at compile time with parameter <object> which could either be a provider or module. routersProviderHash @GenerateInjector routersProviderHash InjectorFactory Alright let’s pass as our parameter to to be injected into our program. Since router is a custom service, we have to pass it as an argument in our runApp() function. routersProviderHash @GenerateInjector runApp(ng.AppComponentNgFactory, createInjector: injector); So obviously we created an injector, but we haven’t actually specified what that injector does so let’s do that. final InjectorFactory injector = self.injector$Injector; Add this code above your method. We are well aware that generates an which defines a function that creates an injector around a parent injector and is used to retrieve object instances as defined by router provider that also instantiate a type, invoke methods and also load modules, while refers to the main file referencing the injector within it. Yeah, that’s all it takes to add a router provider. main() @GenerateInjector InjectorFactory $Injector self.injector Just before we move on, I replaced the <script>…..</script> we can find in quickstart master index.html file within the head tag with: <base href=”/”></base> The base should always be used for production and maybe a minor coding practice. Configuring Routes Routes tell the router which view to display when a user click a link or paste a URL into the browser address bar. Based on the nav menu, we have four links which means we have to create four routes but before we go into creating routes we all want each link to display different information so let’s set that up first. To do this, we need to create five (Five links == Five components) components first. Head to the folder and create another folder title . With these changes our file structure looks like this. lib -> src linksComponent lib -> src -> linksComponent Our page looks like that when you run it and we all can see four links and I stated five links, the fifth link is actually for the home page which will be used to explain default route. So our component names for each links will be and respectively. I’ll be working with only the and while you can fill the rest as homework. components.dart, angular.dart, something.dart , learn.dart home.dart components.dart, angular.dart something.dart Alright, let’s treat each component the same way we treat our ** **t file. app_component.dar For components.dart: For angular.dart: For home.dart: Great, you can work the rest out. Let’s head into routes. Simply, routes tell the router which views to display when a link is clicked as mentioned earlier. So we want to define the route path which will be used for route definition (to generate urls). Our app structure now looks like this: lib -> src -> linksComponent Now, under the folder we create another folder to handle operation relating to routes. Create a folder for Routes and in this folder create a and file. src route_path.dart routes.dart Starting with the route path file we import angular routers and create a and define the route path for each app’s view, in this case we create for all links in the navbar and since am only working with three links I’ll be creating route path for just three links. class RoutePaths There we have our route path for the three links. The String argument passed to path is what displays in the URL bar and you can name it whatever you like. We want to define each route paths in our file which is responsible for handling navigation to the path and rendering of associated view. routes.dart Quickly, let’s import the following package and file: import ‘package:angular_router/angular_router.dart’; import ‘../linksComponent/components.template.dart’; import ‘../linksComponent/angular.template.dart’; import ‘../linksComponent/home.template.dart’; import ‘route_path.dart’; Yes, our importation is complete but not fully we can see the extension on all links component but we didn’t actually create any file, what it simply does is that we are trying to access each components factory to use within the route definition and we must reference it with as or or anything that works for you. Let’s make this correction to our program right away: .template.dart .template.dart xyz_template xyz mycomponent import ‘package:angular_router/angular_router.dart’; import ‘../linksComponent/components.template.dart’ as components_template; import ‘../linksComponent/angular.template.dart’ as angular_template; import ‘../linksComponent/home.template.dart’ as home_template; import ‘route_path.dart’; class Routes{ } Here changes made and I added a where we are going to define each route path. class Routes So let’s define the route path for components, angular and home: We’ve defined all the route paths, a encapsulate a route definitions property and create link urls. Now, let’s store all the routes defined in an array of type : RoutePaths RouteDefinition Add this piece of code just after the last route definition. That’s it we are done with creating our route path and defining them and we actually do need the routes in our file so we need to export the file so it can be used from any component. navbar_component.dart routes.dart export ‘routes.dart’; Add the export line of code above the class file and your program should look like this: RoutePath Right in our navbar component file, let’s add our , export and to the List of exports referenced in the template under the method. routeDirectives Routes RoutePaths @Component directives: [routerDirectives], exports: [Routes, RoutePaths], Almost done! All we need to do is put this bunch of code into effect by binding each router link to a route path by adding: [routeLink] = “RoutePaths.components.toUrl()” Where refer to the variable name defined in both the routes and route path file. components Ensure your variable name for each link is the same across your router files. A sample of me binding router link to its respective anchor tags: The is necessary in every anchor tag or link else you won’t be able to click on the link. routerLinkActive Now we’ve bonded the router link to each anchor tag and we are well aware that this pages display output or another set of information for a user to carry out a task and we have to specify which area it appears in with the tag. router-outlet Add the following code to the area you specifically want your output to be displayed in and as a developer where other than just after the on your webpage. router-outlet navbar <router-outlet [routes]= “Routes.all”></router-outlet> refers to all the links in the array of telling it to display its content within this area. So to display in the appropriate area which is just after the navbar we switch to our file and insert the tag beneath it. Routes.all RouteDefinition app_component.dart router-outlet If you noticed after adding this, the build command line shows a severe failure rather than success if our code is 100% correct. To fix this, import file and then add the and also export and routes, routePath angular_router routerDirectives RoutePaths Routers directives: [NavBarComponent, routerDirectives], exports: [RoutePaths, Routes], Now it works right and our page works well. Default Route: Default route can be used to set which page should be loaded by default once the user loads the page and in every case that’ll be the homepage so we head to the file and add the following code to the link attribute we would like to use as the default view page: routePaths useAsDefault: true, The only receive value and at most you can only use one default case within your program. useAsDefault bool Home is now the default page to view on window load. Let’s add a little styling to know the difference between the active pages. styles: [‘.active-route {color: #039be5;}’], Add this piece of CSS styling code to the component file and that’s it all done. navbar The final look of our program Switching between RouterProviderHash and RouterProviders: The as used within our program attaches a “#” before the url like this: routerProviderHash http://localhost:8080/#angular While the displays the url in a similar way to how most web pages display url. E.g.: routerProviders http://localhost:8080/angular Either you want to use or , just head to your file and change the parameter passed to to any location strategy of your choice. providersHash providers main.dart @GenerateInjector Ensure you maintain one location strategy when building your web app. See! Router is easy and angular dart is cool. Up next we look into navigating imperatives, child and router lifecycle hook.
