Angular Js recieve Url Parameters

[MagnusTheRed90]

I am trying to pass url parameters to an angular js page for page setup. I was wondering if anyone could tell me whether I am missing something from these two code samples. The following is some code from a game related program that I am writing. The $routeProvider parameter is providing me null variables.

/*Author: XXX
    Purpose: controller for units aggregate root single page application. */

//units
var units = [];

//declare the module/application
var app = angular.module('UnitModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider.when('/AddWeapon/:unitId', {
        templateUrl: 'AddWeapon/index.cshtml',
        controller: 'AddWeaponController'
    })
});

//declare the controller
app.controller("AddWeaponController", ['$scope', '$routeParams', function ($scope, $routeParams, $http, $q, $rootScope, $route) {
    $scope.ApiControllerName = "Units";
    $scope.ApiDomainName = "http://localhost";
    $scope.ApiPortNumber = "59971";
    $scope.ApiRoutePrefix = "api";

    $scope.oneAtATime = true;

    $scope.unit = {
        Weapons: []
    };

    $scope.Weapon = {
        WeaponName: "",
        Type: "",
        ArmourPenetration: 0,
        Abilities: "-"
    }

    $scope.GetUrl = function (funcName, args) {
        var url = $scope.ApiDomainName + ":"
            + $scope.ApiPortNumber
            + "/" + $scope.ApiRoutePrefix + "/"
            + $scope.ApiControllerName;

        if (funcName)
            url += "/" + funcName;

        if (!Array.isArray(args))
            throw "Argument is not an array... ";

        //build argument list
        if (args && args.length > 0)
            angular.forEach(args, function (value, key) {
                url += "/" + value;
            });

        return url;
    }//end method

    $scope.GetSelfUrl = function (htmlFile) {
        var domainName = 'http://localhost';
        var portNum = 49752;
        var url = domainName + ":"
            + portNum;

        if (!htmlFile.startsWith("/"))
            url += "/";

        url += htmlFile;

        return url;
    }//end method

    $scope.Get = function (id) {
        var url = $scope.GetUrl('', [id]);
        return $http.get(url);
    }//end method

    $scope.Post = function (unit) {
        return $http.post($scope.GetUrl('', []),
            {
                data: { unit: unit }
            }
        );
    }//end method

    $scope.SaveUnit = function () {
        var promise = $scope.Post($scope.unit);
        promise.then(function (response) {
            if (response.status == 200)
                alert("Unit successfully submitted. ");
            else
                alert("Error occurred on submission code: " + response.status);
        })
        .catch(function () {
            alert("Error occurred on submission. ");
        });
    }//end method

    $scope.AddWeapon = function () {
        //add weapon to the current unit
        $scope.unit.Weapons.push($scope.Weapon);

        //clear text boxes
        $scope.strength = 0;
        $scope.strengthNumTimes = 0;
        $scope.damage = 0;
        $scope.diceHighVal = 0;
        $scope.isMelee = false;
        $scope.range = 0;

        //clear selection
        $scope.Weapon = {
            WeaponName: "",
            Type: "",
            ArmourPenetration: 0,
            Abilities: "-"
        };
    }//end method

    $scope.RemoveWeapon = function (weapon) {
        //get index of weapon
        var index = $scope.unit.Weapons.indexOf(weapon);

        //remove from index
        if (index > -1) {
            $scope.unit.Weapons.splice(index, 1);
        }
    }//end method

    $scope.initialize = function () {
        var unitId = $routeParams['unitId'];
        $scope.unit = $scope.Get(unitId);
    }//end method

    $scope.initialize();
}]);

<!-- Author: XXXX
    Purpose: Adds weapons to the selected unit. -->

@{
    ViewBag.Title = "Add Weapon";
}

@Scripts.Render("~/Scripts/angular.min.js")
@Scripts.Render("~/Scripts/angular-route.min.js")

@Scripts.Render("~/Scripts/angular-ui/ui-bootstrap-tpls.min.js")
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />

@Scripts.Render("~/Scripts/angular-route.js")

@Scripts.Render("~/Scripts/DeveloperScripts/AddWeaponController.js")

<div ng-app="UnitModule" class="container">
    <div class="jumbotron">
        <h1>Add Weapons</h1>
        <p class="lead">Add Weapons to warhammer 40k Units. </p>
    </div>

    <!-- Accordion code. -->
    <script type="text/ng-template" id="group-template.html">
        <div class="panel-heading">
            <h4 class="panel-title" style="color:#fa39c3">
                <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
                    <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                        {{heading}}
                    </span>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
            <div class="panel-body" style="text-align: right" ng-transclude></div>
        </div>
    </script>

    <div ng-view></div>
    <div id="cntrlDiv" ng-controller="AddWeaponController">
        @Html.AntiForgeryToken()

        <!-- Place rest of page here... -->
        <h3>Add Weapons to the Unit. </h3>
        <div class="form-group">
            <label class="control-label col-md-4" for="txtWeaponName">Weapon Name: </label>
            <div class="col-md-8 form-control-static">
                <input name="txtWeaponName" type="text" class="form-control" ng-model="Weapon.WeaponName" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-4" for="txtWeaponType">Weapon Type: </label>
            <div class="col-md-8 form-control-static">
                <input name="txtWeaponType" type="text" class="form-control" ng-model="Weapon.Type" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-4" for="txtArmourPenetration">Armour Penetration: </label>
            <div class="col-md-8 form-control-static">
                <input name="txtArmourPenetration" type="text" class="form-control" ng-model="Weapon.ArmourPenetration" />
            </div>
        </div>

        <h3>Choose one from each section. </h3>

        <uib-accordion close-others="true">

            <uib-accordion close-others="true">
                <div uib-accordion-group class="panel-default" heading="Strength Standard Numeric">
                    <!-- Content of the accordion goes here. -->
                    <!-- Strength Numeric. -->
                    <div class="form-group">
                        <label class="control-label col-md-4" for="txtStrengthNumeric">Strength Numeric: </label>
                        <div class="col-md-8 form-control-static">
                            <input name="txtStrengthNumeric" type="text" class="form-control" ng-model="strength" ng-blur="AddStrengthNumeric(strength)" />
                        </div>
                    </div>
                </div>

                <div uib-accordion-group class="panel-default" heading="Strength Nuber of Times">
                    <!-- Content of the accordion goes here. -->
                    <!-- Strength Num Times. -->
                    <div class="form-group">
                        <label class="control-label col-md-4" for="txtNumTimes">Num Times: </label>
                        <div class="col-md-8 form-control-static">
                            <input name="txtNumTimes" type="text" class="form-control" ng-model="strengthNumTimes" ng-blur="AddStrengthNumTimes(strengthNumTimes)" />
                        </div>
                    </div>
                </div>
            </uib-accordion>

            <div uib-accordion-group class="panel-default" heading="Damage Numeric">
                <!-- Weapon Related rules. -->
                <!-- Weapon damage related rules. -->
                <!-- Damage Numeric. -->
                <div class="form-group">
                    <label class="control-label col-md-4" for="txtUnitName">Damage Numeric: </label>
                    <div class="col-md-8 form-control-static">
                        <input name="txtDamageNumeric" type="text" class="form-control" ng-model="damage" ng-change="AddDamageNumeric(damage)" />
                    </div>
                </div>
            </div>

            <div uib-accordion-group class="panel-default" heading="Damage Dice Roll">
                <!-- Damage Dice Roll. -->
                <div class="form-group">
                    <label class="control-label col-md-4" for="txtDiceMax">Dice Max: </label>
                    <div class="col-md-8 form-control-static">
                        <input name="txtDiceMax" type="text" class="form-control" ng-model="diceHighVal" ng-change="AddDamageDiceRoll(diceHighVal)" />
                    </div>
                </div>
            </div>
        </uib-accordion>

        <uib-accordion close-others="true">
            <div uib-accordion-group class="panel-default" heading="Melee Range">
                <!-- Content of the accordion goes here. -->
                <!-- Range Melee. -->
                <div class="form-group">
                    <label class="control-label col-md-4" for="chkMeleeRange">Range Melee: </label>
                    <div class="col-md-8 form-control-static">
                        <input name="chkMeleeRange" type="checkbox" class="form-control" ng-model="isMelee" ng-click="AddMeleeRange()" />
                    </div>
                </div>
            </div>

            <div uib-accordion-group class="panel-default" heading="Firearm Range">
                <!-- Content of the accordion goes here. -->
                <!-- Range Firearm. -->
                <div class="form-group">
                    <label class="control-label col-md-4" for="txtFirearmRange">Range: </label>
                    <div class="col-md-8 form-control-static">
                        <input name="txtFirearmRange" type="text" class="form-control" ng-model="range" ng-blur="AddFirearmRange(range)" />
                    </div>
                </div>
            </div>
        </uib-accordion>

        <div class="row">
            <button type="button" class="btn btn-primary" ng-click="AddWeapon()">Submit Weapon</button>
        </div>
        <div class="row" ng-if="unit.Weapons.length > 0">
            <table ng-repeat="weapon in unit.Weapons">
                <tr>
                    <th>Weapon Name</th>
                    <th>Weapon Type</th>
                    <th>Armour Penetration</th>
                    <th> Strength Metric </th>
                    <th> Damage Metric </th>
                    <th> Range Metric </th>
                    <th> Remove </th>
                </tr>
                <tr>
                    <td> {{weapon.WeaponName}} </td>
                    <td> {{weapon.Type}} </td>
                    <td> {{weapon.ArmourPenetration}} </td>
                    <td> {{weapon.Abilities}} </td>
                    <td> {{DisplayStrengthMetric(weapon)}} </td>
                    <td> {{DisplayDamageMetric(weapon)}} </td>
                    <td> {{DisplayRangeMetric(weapon)}} </td>
                    <td> <button type="button" ng-click="RemoveWeapon(weapon)">Remove</button> </td>
                </tr>
            </table>
        </div>

        <div class="btn-group">
            <button class="btn btn-primary" type="button" ng-click="SaveUnit()">Save</button>
            <button class="btn btn-primary" type="button" onclick="location.href='/Units/index/'">Back</button>
        </div>

    </div>
</div>

[MagnusTheRed90]

I believe that I have the answer to my own question. Looks like not many of you do angular js. The most profound thing I learned from this is that we are using multiple views in all the online examples, with one view, "the home view" being the initial drop page. This was really really important to figuring anything out. I am not completely done with my application, but I think this is an appropriate response, and my code compiles. I am also doing a uib modal, so ignore anything that is ui bootstrap.

angular.module('UnitModule', [
    'UnitModule.UnitsController',
    'UnitModule.AddWeaponController',
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: '/Units',
        controller: 'Units',
    });
    $routeProvider.when('/AddWeapon/:unitId', {
        templateUrl: '/Home/AddWeapon',
        controller: 'AddWeapon',
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });
}]);

//Units controller
angular.module('UnitModule.UnitsController', ['ngRoute', 'ui.bootstrap'])
    .controller('Units', function ($scope, $http, $routeParams, $q, $rootScope, $route, $uibModal) {

});

angular.module('UnitModule.AddWeaponController', ['ngRoute'])
    .controller('AddWeapon', function ($scope, $http, $routeParams) {
        $scope.unitId = $routeParams.unitId;

}//end class

//additionally you need an AddWeapon() method that returns a partial view
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using TroopTransportGeneticAlgorithim.Repositories;
using TroopTransportGeneticAlgorithim.Models;

namespace TroopTransportOptimizer.Controllers {
    public class UnitsController : Controller {
        // GET: Units
        public ActionResult Index() {

            return View();
        }//end method

        public ActionResult AddWeapon() {
            return PartialView();
        }

    }//end class

}//end namespace

//additionally you need at least two files/views under the Units folder
    -index.cshtml
    -AddWeapon.cshtml