var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$routeProvider','$locationProvider', '$httpProvider',
    function ($routeProvider, $locationProvider, $httpProvider) {
        $locationProvider.hashPrefix('!').html5Mode(true);
        $routeProvider
        .when('/NewOrder', {
            templateUrl: 'templates/NewOrder',
            controller: 'AddOrderController'
        }).when('/ShowOrders/:orderID', {
            templateUrl: function (params) {return '/templates/ShowOrders?orderID=' + params.orderID; },
            controller: 'ShowOrdersController'
        }).otherwise({
            redirectTo: '/ShowOrders'
        });
    }
]);

myApp.controller('AddOrderController', function ($scope) {
    $scope.message = 'This is the add new order controller screen';
});

myApp.controller('ShowOrdersController', function ($scope,$routeParams) {
    $scope.message = 'This is the show orders controller';
    $scope.order_id = $routeParams.orderID;
});

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
            name: "NewOrder",
            url: "templates/NewOrder",
            defaults: new { controller = "Templates", action = "AddOrder" });

            routes.MapRoute(
                name: "ShowOrders",
                url: "templates/ShowOrders/{orderID}",
                defaults: new { controller = "Templates", action = "ShowOrders", orderID = "" });

            routes.MapRoute(
                 name: "Default",
                 url: "{controller}/{action}/{id}",
                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
              );

            routes.MapRoute(
             name: "Defaults",
             url: "{*url}",
             defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
         );