Create a simple Angular app with Routing

Today we are going to learn how to create a simple app in Angular.js which uses the Angular Routing functionality for URL formatting.

First of all, let’s learn what is Angular:- The AngularJs is a structural framework for dynamic web apps. It allows us to create various Controllers and Services to consume the APIs data. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write.

We now move to AngularJs Routing:- It enables us to use different URLs for different contents in the site. We can bookmark the URLs for particular page and can send it to friends, neighbors, relatives, clients etc.

We will move to the steps to create a simple AngularApp which uses the AngularJs default Routing functionality.

  1. Create the directory structure and a file named “index.html” at root. Refer below screen for reference:
    2016-11-15_1235
  2. Open “index.html” file and paste the below code in it:
    <!DOCTYPE html>
    <html>
    <head>
     <!-- Angular Js: Start -->
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
     <script src="controllers/homeController.js"></script>
     <script src="ang-scripts/routes.js"></script>
     <!-- Angular Js: End-->
    </head>
    <body ng-app="myApp">
     <div>
     <a href="/">Home</a>&nbsp; &nbsp;
     <a href="/#/new">New page</a>&nbsp; &nbsp;
     <a href="/#/contact">Contact page</a>
     <div ng-view>
     </div>
     </div>
    </body>
    </html>
    
  3. Go to “ang-scripts” directory and create a file named “routes.js” in it. After creating the file, paste the below code in it:
    var myAppRoutes = angular.module('myApp', ['ngRoute', 'myAppHomeController']);
    
    myAppRoutes.config(['$routeProvider',
     function ($routeProvider) {
     $routeProvider
     // route for home page
     .when('/', {
     templateUrl: 'pages/home.html',
     controller: 'homeController'
     })
    
     // route for a new page
     .when('/new', {
     templateUrl: '../pages/new.html',
     controller: 'newController'
     })
    
     .when('/contact', {
     templateUrl: 'pages/contact.html',
     controller: 'contactController'
     });
     }]);
    
    
  4. Go to “controllers” directory create a file named “homeController.js“. After creating the file, paste the below code in it:
    angular.module("myAppHomeController", [])
    
    .controller('homeController', ['$scope', function ($scope) {
     $scope.pagename = "Home page";
    }])
    
    .controller('newController', function ($scope) {
     $scope.pagename = "New page";
    })
    
    .controller('contactController', function ($scope) {
     $scope.pagename = "Contact page";
    });
    
  5. Go to “pages” directory and create three files there with name:- “home.html“, “new.html” and “contact.html“. After finishing up, edit all the three files and paste the below same code in all the three files:
    <h1>{{pagename}}</h1>
    
  6. The next step is to create a server to run this application. I will explain how to create a server to run the Angular Routing app in my next post. But for now, I am opening the “index.html” file with Visual Studio by right click. If you have Visual Studio installed in your machine then you can also follow this step. No matter which version of Visual Studio you have. I opened the “index.html” file(Which was at root) using Visual Studio and right click in the Visual Studio and chose the option “View in Browser“. The file was opened in the browser and I got the result.
  7. Here are the screenshots after running the app:
    2016-11-15_1328
  8. 2016-11-15_1329
  9. 2016-11-15_1329_001

 

Thanks for reading. 🙂

Advertisements

One thought on “Create a simple Angular app with Routing

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s