Dynamic Routing Using AngularJS with ngRoute

This blog help us to understand how to implement dynamic routing with AngularJs. 

Click here to download whole application

Below Image tell us the Solution architecture for implementing the Dynamic Routing using angularjs.

In solution we can observe AngularjsApp folder where we maintain Angularjs file need for application and and other files need for routing.

1. App.js
2. Routing.js
3. RoutingUrl.json

In App.js file we create app module and write controller need to Angular application

In Routing.js we write routing configuration code to route the templates

In RoutingUrl.json file we maintain template URL and controller for specific Template with unique key.

Let see the code in above files so that we can understand it easily.

Above image is about App.js.

Above image is about Routing.js file.

Above image is about RoutingUrl.json where we maintain URL path and Controller with respective to KeyName.

When we run the application it load App.config first and check for default routing with "/" KeyName so it load welcome.html first as KeyName "/" mapped to welcome.html.

In Below image we can see the json data. which we take and route to correct URL

Here's the calling order of angular application:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

And than we setup our layout and startup page as we need to create SPA application with angularjs.

Above image is about landing page of application

Layout page for whole application

so that's it friends now we can see the result of the application

Even though we can navigate to contact page when click on button "Go to Contact"

Thank you for going through blog.