Controller unable to access Module Angularjs MVC vs 2013

37 views Asked by At

I am getting Error : Reference Error: myAppmd is not defined, when running the application

I have created app.js in Script folder of MVC project

var myAppmd = angular.module("myApp", []);

Controller "name = HomeController" file is stored in ~/Scripts/angularScripts folder. Code of controller is below

 myAppmd.controller("IndexCtrl",  function ()
    {
        $scope.students
        {
            LoginID,  LPassword;
        }

        $scope.submitForm = function($scope)
        {

        }
    }
    )

The Bundle file is configured as :

bundles.Add(new ScriptBundle("~/bundles/angularz").IncludeDirectory(
"~/Scripts/angularScripts","*.js",true).Include("~/Scripts/app.js"));

In the _layout.cshtml

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/angularz")
....

The Index.cshtml file code is below

@{
    ViewBag.Title = "Index";
}

    <h2>Welcome to Students Screen/h2>
        <div>
        <form name="frmStudents" ng-app="myApp" ng-controller="IndexCtrl">
            <input name="LoginID" type="text" class="col col-lg-4" ng-model="LoginID" value="{{LoginID}}" required />
            <input name="LPassword" type="password" class="col col-lg-4" ng-model="LPassword" value="{{LPassword}}" required />

            <input type="submit" value="Login" ng-click="submitForm()" ng-disabled="$invalid" />
        </form>
    </div>
1

There are 1 answers

2
Yaser On

If your controller is sitting in a separate file you need to get a reference to the app in that file before using it. Note that defining myAppmd in app doesn't make it global.

Long story short change your controller code from:

myAppmd.controller("IndexCtrl",  function ()

To:

angular.module('myApp').controller("IndexCtrl",  function ()