Alphasoftware and AngularJS - part 3.

Alphasoftware and AngularJS - part 3.

Date: June 26th 2016

Good Morning everyone.

Last week we did the home page that displays the main menu that will direct our user to various pages.  Normally, you should have a login page as the first page and when person is granted access then the main menu will show up. We will do that later, I did not implement that into my app since i will be the one to use.

Now we are going to take advantage of the angular routing to direct the user to different pages then we will fill in the content of the pages.

Go to the blogApp.js file open it.

When you look at the content 

it will be

'use strict';

var alphaBlog = angular.module('alphaBlog',[

    'ngRoute'

]);

alphaBlog.config(function($routeProvider){

    $routeProvider

    .when('/', {

        templateUrl: 'partials/home.html'

    });

    

});

change that to:

'use strict';

var alphaBlog = angular.module('alphaBlog',[
    'ngRoute'
]);

alphaBlog.config(function($routeProvider){
    $routeProvider
 
    .when('/items', {
        templateUrl: 'partials/items.html'
    })
    .when('/', {
        templateUrl: 'partials/home.html'
    });
 
});

save the file, note that between the routes there is no semicolon.
So now when you click on the items button the items page will pop up.
So let's go and create a new page.
Create a new file under partials, call that items.html and fill that with the following.

<div>
<h1>Items </h1>
</div>

and save it  and refresh the index.html on the browser and when you click on the items button the items page will pop up.  if all goes well then we can do that to all pages, we will fill in the content later on on each page along with the controller that will display the contents dynamically.
So now, let's see how we are doing:

https://www.youtube.com/watch?v=nAUR9KVLNZw

take a look at this video.
The finished routing should look like this:
'use strict';

var alphaBlog = angular.module('alphaBlog',[
    'ngRoute'
]);

alphaBlog.config(function($routeProvider){
    $routeProvider
    .when('/map', {
        templateUrl: 'partials/our_location.html'
    })
    .when('/weekly_wine_tasting', {
        templateUrl: 'partials/weekly_wine_tasting.html'
    })
    .when('/wine_recommendation_show', {
        templateUrl: 'partials/recommendation_list.html'
    })
    .when('/new_purchase_order', {
        templateUrl: 'partials/new_purchase_order.html'
    })
    .when('/vendors', {
        templateUrl: 'partials/vendors.html'
    })
    .when('/signin', {
        templateUrl: 'partials/signin.html'
    })
    .when('/appointments', {
        templateUrl: 'partials/appointments.html'
    })
    .when('/delivery', {
        templateUrl: 'partials/delivery.html'
    })
    .when('/items', {
        templateUrl: 'partials/items.html'
    })
    .when('/', {
        templateUrl: 'partials/home.html'
    });
 
});


Next week we will start filling in the contents of the page.

Please post any comments and let me know how to improve this blog.
Have a wonderful day.