ng-view & $routeprovider Angular JS example

If you’ve been using Angular JS you’ve probably got to a stage where you want to make full use of ng-view & router providers. In this blog post i am going to walk you through setting this up in Angular JS. By the end of this blog post you will have an understanding of how ng-view & route providers work and how to set them up.


For our index.html file we are using a basic HTML structure calling ng-app on the HTML tag and loading in angular.min.js, angular.route.js & our app.js file, inside our body tag we are using ng-view on a div tag. This will pull in HTML from another file of our choice.


To setup our application we are going to need to write some javascript. We can add this to our app.js file. It’s here we will setup Angular, define our dependencies and setup a router provider & controller for our application.


Now we have setup our applications javascript we can go ahead and create our view.html file which will be outputted into our ng-view on the index.html page.

To test if the above has worked we can use the following code below to display our message from our controller.

Glenn Smith

© 2017, All Rights Reserved - Glenn Smith