Angular Controller - Angular Not Defined

C# Corner

Riddhi Valecha

5y883Angular

Dear Team,

I have a MVC Application, in which I have got the data in datatable.

I have created a view, and also made Angular Controller file.

I have debugged the code, I am getting the data in datatable, but I am not able to display it in view.

My View Code -

@{
ViewBag.Title = "PendingAssets";
}
PendingAssets
"pendingassetscontroller">
class="tableData" width="80%" border="0" cellpadding="0" cellspacing="0">
Computer.ComputerType
Model.Brand.Name
Model.Name
Computer.TcpIpHostName
Asset.SerialNo
User.UserName
RIL_Inventoried_User.UserName
Asset.Field1
"e in PendingAssets" ng-class-odd="'odd'" ng-class-even="'even'">
{{e.ComputerComputerType}}
{{e.ModelBrandName}}
{{e.ModelName'}}
{{e.ComputerTcpIpHostName}}
{{e.AssetSerialNo}}
{{e.UserUserName}}
{{e.RIL_Inventoried_UserUserName}}
{{e.AssetField1}}

@section scripts{

"~/Scripts/AngularController/pendingassetscontroller.js">

}

pendingassetscontroller.js Code -

//(function () {
// 'use strict';
var app = angular.module('myApp', [])//'MyApp') // extending from previously created angular module in the First Part
.controller('pendingassetscontroller', function ($scope, PendingAssetsService) { // explained in Part 2 about controller
$scope.PendingAssetsSrc = null;
PendingAssetsService.GetPendingAssetsList().then(function (d) {
$scope.PendingAssetsSrc = d.data; //Success callback
}, function (error) {
alert('Error!'); // Failed Callback
});
})
.factory('PendingAssetsService', function ($http) { // I have explained about factory in the Part 2
var fac = {};
fac.GetPendingAssetsList = function () {
return $http.get('/PendingAssets/GetPendingAssetsList')
}
return fac;
});
//})();

I am also sharing the error screenshot.

Please guide- where am I going wrong.

Please help as it is very urgent.

THank you all in advance.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Riddhi Valecha5y ago
Hello Team,

I am again facing an error with Angular Controller - Please guide in this.

I am sharing the screen shot.

Error says - "argument 'pendingassetscontroller' is not a function, got undefined.

+1
Riddhi Valecha5y ago
Hello Team,
I am again getting error - MyApp Module not available. Please guide in this. THanks a ton.

+1
Riddhi Valecha5y ago
Hello Team,
I have attached the code.
THe data is not being displayed on the screen.
Please help in this.
+1
Kiran Mohanty5y ago
Try adding angular.js file reference as below.
@Scripts.Render("~/Scripts/angular.js")
Or budle all js in one package and add only one reference.
public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle(("~/bundles/customBundle").Include(
     "~/Scripts/yourScript.js",
     "~/Scripts/anotherScript.js");
}
+1
Riddhi Valecha5y ago
Hello sir,

I have added the scripts.

Still, the data is not being displayed and I am getting error in main.js file.

I am sharing the screenshot.

Please help.

I am also attaching the structure of the views.

.cshtml code -
@{
ViewBag.Title = "PendingAssets";
}

PendingAssets

"~/Scripts/angular.js">
"~/Scripts/angular.min.js">
"~/Scripts/main.js">
@*"~/Scripts/angular.min.js.map">*@
"pendingassetscontroller">
class="tableData" width="80%" border="0" cellpadding="0" cellspacing="0">

Computer.ComputerType
Model.Brand.Name
Model.Name
Computer.TcpIpHostName
Asset.SerialNo
User.UserName
RIL_Inventoried_User.UserName
Asset.Field1

"e in PendingAssets" ng-class-odd="'odd'" ng-class-even="'even'">
{{e.ComputerComputerType}}
{{e.ModelBrandName}}
{{e.ModelName'}}
{{e.ComputerTcpIpHostName}}
{{e.AssetSerialNo}}
{{e.UserUserName}}
{{e.RIL_Inventoried_UserUserName}}
{{e.AssetField1}}
@section scripts{
"~/Scripts/AngularController/pendingassetscontroller.js">
}

Sachin Singh5y ago

The error is causing becaue other scripts depends on the angular library, so angular will always be on the top of all other scripts.

means , place the angular script above to all other scripts for example as shown below

"text/javascript" src="angular.min.js">
"text/javascript" src="main.js">

Angular Controller - Angular Not Defined

PendingAssets

PendingAssets