DEV Community: Dankwansere

The new way to navigate in angular using aop-routing library

Dankwansere — Mon, 04 Jan 2021 20:39:58 +0000

This article is originally posted on medium The AOP-Routing library for Angular

There’s an amazing new npm library called aop-routing that enhances and brings a lot of neat features to navigation and routing in an Angular application.

What exactly is aop-routing?

Taken straight from the documentation: Aop-Routing Provides the capability to perform Imperative and Popstate navigation operations in Angular through the ease of typescript decorators, without the need to inject or import the Angular Router object.

To sum it up, the aop-routing library allows you to perform navigation between components without having to import or inject the Router object into your component and also provides other neat features such as dynamically updating the routing table at runtime. To perform navigation is as easy as putting a decorator at the top of a method, that’s it!

Below are the list of features the aop-routing provides:

Imperative navigation using decorators
PopState navigation using decorators
Custom navigation logic to override default navigation logic
Dynamically add new path to routing table at runtime
Dynamically change the component of a path at runtime
Dynamically add/remove CanActivate guards at runtime

Let’s see how we can install and integrate this library into our application

- Note: The aop-library requires angular version 8.1 or higher to be installed!

Install the aop-routing library to your angular application npm install aop-routing

npm install aop-routing

After installing the library add AopRoutingModule to the top level/root module import array of your application.

imports: [
   ...
    AopRoutingModule
  ]

Add AopNavigationService dependency into your top level/root module constructor.

export class AppModule {
  constructor(private navigationService: AopNavigationService) {}
 }

That’s pretty much all that’s required to integrate the aop-routing library to your angular application.

Now let’s see how we can use the aop-routing library and it’s cool features!

I will be using the below Routing Table for demonstrating the features

const routes: Routes = [
{path: 'page1', component: Page1Component, canActivate: [TestGuard,]},
{path: 'page2', component: Page2Component },
{path: 'page3', component: Page3Component }
];

Routing to a next page:

With the aop-routing library, when you need to route to a next page or component, it’s as easy as using the RouteNext() decorator on top of the function you want to perform the navigation.

Below example will route to page2 at the end of execution of the testMethod1 — Note there is no injection or usage of the Router Object.

import { Component} from '@angular/core';
@Component({
...
})
export class Page1Component {
constructor() {}
@RouteNext('page2')
public testMethod1() {
...some logic...
 }
}

If your navigation is based on dynamic data, this can also be achieved by making your method return a ‘string’ or an ‘AopNavigator’ object. The decorator will use the return value to perform the routing.

//Routing dynamically with RouteNext Decorator by returning a string
import { Component} from '@angular/core';
@Component({
...
})
export class Page1Component {
constructor() {}
@RouteNext()
public testMethod1(): string {
...some logic...
return 'page2';
 }
}
-----------------------------------------------------------------
// Routing dynamically with RouteNext Decorator by returning an 
// AopNavigator
import { Component} from '@angular/core';
@Component({
...
})
export class Page1Component {
constructor() {}
@RouteNext()
public testMethod1(): string {
  ...some logic...
  const obj: AopNavigator = {
     destinationPage: 'Test2',
   };
  return obj;
 }
}

The aop-routing also has decorators with suffix of Async (eg. RouteNextAsync), that can be used with asynchronous methods.

// The RouteNextAsync decorator will route to page2 by subscribing // to testMethod1 and using it's string value to perform the routing
@RouteNextAsync()
public testMethod1(): Observable<string> {
  ...some logic...
  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of('page2');
   })
 );
}
----------------------------------------------------------------
// The RouteNextAsync decorator will route to page2 by subscribing // to testMethod1 and using the returned AopNavigator object value // to perform the routing
@RouteNextAsync()
public testMethod1(): Observable<AopNavigator> {
  ...some logic...

   const obj: AopNavigator = {
    destinationPage: 'Test2',
  };

  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(obj);
   })
 );
}

Navigating back

RouteBack and RouteBackAsync decorators that can be used to perform a popstate navigation to the previous page.

//testMethod1 will navigate back to previous page after execution
@RouteBack()
public testMethod1() {
 ...some logic...
}
------------------------------------------------------------------- 
//Will navigate to the previous page after the asynchronous //execution of testMethod1
@RouteBackAsync()
public testMethod1() {
 return of(...some async operations).pipe(
 ...rxjs operators...)
}

Navigate to a specific state in browser history

aop-routing library also provides the capability of using popstate navigation to route to a specific state in the browser history, by using the RouteToState and RouteToStateAsync decorators.

// Will traverse 2 states backwards of the browser history state 
// equivalent to hitting the browser back button twice
@RouteToState(-2)
public testMethod1() {
 ...some logic...
}
------------------------------------------------------------------
// Will traverse 2 states forward of the browser history state
@RouteToState(2)
public testMethod1() {
 ...some logic...
}
------------------------------------------------------------------
// Will subscribe to the targeted method and use the returned value to traverse 2 states backwards of the browser history state after end of targetted method.
@RouteToStateAsync()
public testMethod1(): Observable<number> {
  ...some logic...
  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(-2);
   })
 );
}
------------------------------------------------------------------
// Will make the decorator subscribe to the AopNavigator object returned from the targetted method and use the destinationPage property value to perform popstate navigation traversal of the browser history state.
@RouteToStateAsync()
public testMethod1(): Observable<AopNavigator> {
  ...some logic...

   const obj: AopNavigator = {
    destinationPage: -2',
  };

  return of(1, 2, 3).pipe(
   switchMap(x => {
     return of(obj);
   })
 );
}

AopNavigator interface has other optional properties that can be used to enhance the aop-routing navigation.

destinationPage: This property can be passed a string or numeric value that can be used for the RouteNext, RouteNextAsync, RouteToState and RouteToStateAsync decorators to perform navigation.

navigationExtra: This property takes an Angular NavigationExtras object to allow extra options to modify the Router navigation strategy for RouteNext and RouteNextAsync decorator.
preprocess: This property takes a reference function. This function will be executed prior to any navigations performed by the decorators.
param: This property will take a value of any type that can be used as parameter(s) for the passed function in the preprocess property.

Custom logic

If you desire to have finer control of the navigation, this can be done also. The aop-routing library provides the capability for users to provide their own custom implementation to override the default navigation logic.

This can be accomplished in as easy as 3 steps.

Create a class that extends the AopBaseNavigation abstract class.

export class SampleClass extends AopBaseNavigation {}

Implement the required abstract methods of the AopBaseNavigation abstract class.
goToNextPage()
goToPreviousPage()
goToState()

export class SampleClass extends AopBaseNavigation {
 public goToNextPage(...) {
  ...custom logic...
}


 public goToPreviousPage(...) {
  ...custom logic...
}

 public goToState(...) {
  ...custom logic...
}

In the top level/root module add the AopProxyNavigationService to the providers array and set the useClass to the newly created class

@NgModule({
  imports: [
    ...
    AopRoutingModule
  ],
  providers: [{provide: AopProxyNavigationService, useClass: SampleClass}],
})

Now the SampleClass will override the default navigation logic. So the decorators will call the methods of the SampleClass instead of the default logic.

Dynamic changes

One of the coolest feature of the aop-routing library is the ability to modify the Routing table on runtime of an application.

Note: It is marked on the documentation page that the below features are still in the experimental stage.

To turn on the experimental feature, you need to pass an object with experimentalNav property set to true to the AopRoutingModule forRoot method to the top level/root module:

@NgModule({
  ...
  imports: [
    ...
    AopRoutingModule.forRoot({expirementNav: true})
  ],
  ...
})

Add new path to routing table:

Scenario: Suppose during run time of the application, for a specific flow we want to add new route path object for the application to navigate to. We are going to use the aop-routing library to add a new path during execution of the application to the Routing table created above.

The path will be page4 and it should route to Page4Component:

Create a RouteTransform object and set the path and *component property:

const routeTransform: RouteTransform = {
    path: 'page4',
    component: Page4Component
 };

In the RouteNext or RouteNextAsync deocrator of the targetted function, return an AopNav object with the routeTransform property set.

// aop-routing library will use this object and add this new path to
// the routing table at run time and navigate to it.
@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page4',
    component: Page4Component
 };
  return {routeTransform}
}

Changing component of a path at runtime

With aop-routing, we can also change the component of an existing path at runtime. Recall from our Routing table in the previous section, page1 will route to **Page1Component.

Suppose we want to change the component at runtime to go to Page4Component instead.

// aop-routing will override the default component(Page1Componet)  // set for page1 path and instead set attach Page4Component to 
// page1
@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page1',
    component: Page4Component
 };
  return {routeTransform}
}

Add CanActivate guard(s) at runtime:
We can also add CanActivate guards to a route path at runtime
Below example will add guard1 and guard2 to the page2 route path dynamically and route to it.

@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page2',
    canActivateGuards: [guard1, guard2]
 };
  return {routeTransform}
}

Removing CanActivate guard(s) at runtime:

CanActivate guards can also be removed from a route path at runtime. It is the same code as above. The aop-routing library is able to detect and remove If the guards provided exist in the routing table.

Disabling all CanActivate guard(s) at runtime:

To remove all CanActivate guards associated to a path is the same steps as adding a guard. Instead the canActivateGuards property should be set to an empty array.

@RouteNext()
public testMethod() {
  const routeTransform: RouteTransform = {
    path: 'page1',
    canActivateGuards: []
 };
  return {routeTransform}}

Note: Changes made to the routing table are not persisted. The routing table is reverted back to its pristine state after navigation.

aop-routing library is great tool that greatly enhances and also makes navigation easier for angular developers.

Have you used the aop-routing library yet? Comment below and let me know your thoughts!

From student to professional Software Developer

Dankwansere — Mon, 11 Dec 2017 02:59:58 +0000

So where do I start? Software development is my passion. I'm a professional full stack Software developer, and outside of work I spend a lot of time learning new frameworks, technologies reading programming and tech articles. Sometimes I even dream about codes(Seriously!)

I look back now and I recall how my journey began. It all started in 2007, my first semester in college, my major was "Computer Engineering". Prior to college I had no clue what computer programming was. All I knew was that I've always had an interest in Computers and Robotics and also Astronomy and Physics but we'll save that for another post. I was aware that Computer Engineering would be the right field to be in. In my first semester, the first programming language I was introduced to was the widely known "C". First few weeks of the course it wasn't that difficult, you know..the usual "Hello world" and basic stuff. AS I was completing those assignments I did not quite understand the purpose of this course nor did I really understand the importance of a programming language. Then halfway through the course, we started learning functions which was a bit difficult to grasp, and then after that "Pointers" which the whole class struggled with. Anyways, I finished my first programming course with a good grade, but I still did not understand the importance of it, so I did not have much passion for programming.

It wasn't until my 2nd semester, when I took a Java course that I finally understood the power of programming. My first assignment was to build a simple GUI application with a button, and once that button is clicked it would display "Hello world". When I compiled my program and executed it, at that moment when I seen the GUI, and I clicked the button, and the "hello world" was displayed, I was blown away. I was so impressed, I finally understood the importance of programming. It was at that moment, my passion started to grow for programming. I guess all it required was for me to build a GUI application.

From then on, I began to read Java books to better my skills, I spend lots of time in and out of school programming for fun. After graduating College and going to University, I had to take a university level Java course, and I was the top of my class. I was always so excited for every lecture to learn what the professor will teach us next. In my last year of University I felt like I was a Java programming Guru. I felt I was ready for the real world as a professional programmer.

After graduating University in 2013 October, and landing my first Software developer job in November as a "Junior Java Developer", I was excited and nervous but very confident also. My first week or 2, after seeing the team's application and code base, with all the frameworks they used and all, got me feeling overwhelmed and scared. I went from feeling like a Java Guru in University times to feeling like a kindergartener in High School. As much as I tried I had a hard time understanding how the code works. Java EE? Struts 2? JSP? "What is this"? I asked my self. In my college and University years, I was only taught "Java SE". My first task was really easy but I struggled to understand it. I was frightened and that's when I started to feel the "Imposter syndrome". I felt like maybe I'm not cut out to be a programmer.

I was depressed for a few days, BUT I did not give up. I joined online forums and asked questions such as "how were other programmers first real world experience was like, from college/university to the corporate world". I got some answers that were kind of similar to my situation. One answer that stood out the most to me was this.
"If you passed the interview, and they decided to hire you, knowing you're fresh out of school, then they must believe you have the skills to be a developer in their company"

That post really motivated me. From then on, I told myself I will give it my best and told my self "no one is born an expert, everybody learns and progress" So I decided to ask my senior developers a lot of questions and mentorship. And also every day after work I would spend at least 3 - 4 hours learning the programming skills I'm lacking. I started to learn the basics of Java EE such as Servlets and Jsp, also diving into the Struts framework, learning Hibernate, learning advanced JavaScript also. It wasn't easy but I enjoyed the challenge. Then I realized something. The more I was learning, the more I began to understand my work code base, the more work assignments and projects became easier to understand for me.

I started to feel confident again. Sure there were times when I would come across a big obstacle, but I always felt confident enough that I could find a solution for it.

Fast forward a few months and my manager asked me to learn "C# and SharePoint development". It took me 3 months to learn as much as I could, and I was assigned two major projects that required a C# and SharePoint developer, and I successfully completed both, that was all during my first year in my role. Fast forward again a year later, and since I was the only developer in my team that knew C# and SharePoint, I became the SME(Subject Matter Expert) for one of the critical component my company uses.

Through my constant learning I became a vital member in my team doing both front end and back end development with Java,.NET, JavaScript etc.

I guess the moral of my story is, If you land your first Software development job straight out of school, you might face a few or a lot of challenges and also will feel the imposter syndrome at times. My advice is to never give up. We live in the information technology age where information is easily accessible over the web. Constant learning as a software developer will greatly yield results!