Angular Controller - Angular Not Defined

Question

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" ;   }      .tableData {   border-left: solid 1px #D8C3C3;   border-top: solid 1px #D8C3C3;   }   .tableData tr {   }   .tableData td, .tableData th {   border-right: solid 1px #D8C3C3;   border-bottom: solid 1px #D8C3C3;   text-align: left;   padding: 5px;   }   .tableData td {   }   .tableData th {   background-color: #FAFAFA;   padding: 7px 5px;   border-bottom-color: #9C9C9C;   }   .odd {   background-color: #f3f3f3;   }   .even {   background-color: #ffffff;   }      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.

Riddhi Valecha · Answer

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.

Riddhi Valecha · Answer

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

Riddhi Valecha · Answer

Hello Team, I have attached the code. THe data is not being displayed on the screen. Please help in this.

Kiran Mohanty · Answer

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" );   }

Riddhi Valecha · Answer

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" ;   }      .tableData {   border-left: solid 1px #D8C3C3;   border-top: solid 1px #D8C3C3;   }   .tableData tr {   }   .tableData td, .tableData th {   border-right: solid 1px #D8C3C3;   border-bottom: solid 1px #D8C3C3;   text-align: left;   padding: 5px;   }   .tableData td {   }   .tableData th {   background-color: #FAFAFA;   padding: 7px 5px;   border-bottom-color: #9C9C9C;   }   .odd {   background-color: #f3f3f3;   }   .even {   background-color: #ffffff;   }      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 Singh · Answer

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">