CODEWITHSUNDEEP
angularjsangular-ui
ethem
ethem

Reputation: 2918

I can't implement ui.Grid angularJS extension it gives 404 error

Below is my simple AngularJS stuff. Wwhen I run the code I get error 404 error. The issue is it searches the ui.grid directly under TA folder and I don't know why the ui.grid is not looking the files under /TA/ui-grid/ui-grid folder? I created a folder under TA/SiteAsstes/Scripts/uiGrid and in index.html I'm refering to this place. Why is ui-grid searching directly under "TA"?

I've also other AngularJS code which works fine. So like to understand why it searches the ui-grid directly under "TA" folder and not under "/TA/SiteAssets/Scripts/uiGrid/".

My folder structure looks like this:
/TA/SiteAssets/app.js
/TA/SiteAssets/index.html
/TA/SiteAssets/Scripts/angular.js   etc. etc.
/TA/SiteAssets/Scripts/uiGrid/ui-grid.css
/TA/SiteAssets/Scripts/uiGrid/ui-grid.js  etc. etc.
/TA/SiteAssets/Content

ERROR

 GET http://system123/TA/ui-grid/ui-grid 404 (NOT FOUND)

Error: [$compile:tpload] Failed to load template: ui-grid/ui-grid
http://errors.angularjs.org/1.3.5/$compile/tpload?p0=ui-grid%2Fui-grid
    at REGEX_STRING_REGEXP (angular.js:63)
    at handleError (angular.js:15946)
    at processQueue (angular.js:13075)
    at angular.js:13091
    at Scope.$get.Scope.$eval (angular.js:14291)
    at Scope.$get.Scope.$digest (angular.js:14107)
    at Scope.$get.Scope.$apply (angular.js:14395)
    at done (angular.js:9569)
    at completeRequest (angular.js:9756)
    at XMLHttpRequest.requestLoaded (angular.js:9697)angular.js:11500 (anonymous function)angular.js:8479 $getangular.js:13083 processQueueangular.js:13091 (anonymous function)angular.js:14291 $get.Scope.$evalangular.js:14107 $get.Scope.$digestangular.js:14395 $get.Scope.$applyangular.js:9569 doneangular.js:9756 completeRequestangular.js:9697 requestLoaded

app.js

var app = angular.module("app", ["ngTouch","ui.grid"]);

index.html

<html ng-app="app">
<script type="text/javascript" src="/TA/SiteAssets/Scripts/angular.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/Scripts/angular-touch.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/Scripts/angular-animate.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/Scripts/angular-ui-tree.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/Scripts/uiGrid/ui-grid.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/Scripts/angular-ui-router.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/app.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/employeeController.js"></script>
<script type="text/javascript" src="/TA/SiteAssets/employeeService.js"></script>
<script type="text/javascript">
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.myData = [
          {
              "firstName": "Cox",
              "lastName": "Carney",
              "company": "Enormo",
              "employed": true
          },
          {
              "firstName": "Lorraine",
              "lastName": "Wise",
              "company": "Comveyer",
              "employed": false
          },
          {
              "firstName": "Nancy",
              "lastName": "Waters",
              "company": "Fuelton",
              "employed": false
          }
        ];
    }]);
</script></head>


<body>


<div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
</body>

</html>

Upvotes: 2

Views: 2047

Answers (3)

Ashu Chauhan
Ashu Chauhan

Reputation: 79

@ethem, i was having the same problem and error message last night in my project and now i found the reason for the error in my project- actually i was using angular $http interceptor in app.config to add my project name as prefix to each url like-

config.url = "myproject/" + config.url

(debugging the app.config) so during ui grid js execution , some rquests were hitting my server like shown in the error message -

http://system123/TA/ui-grid/ui-grid 404 (NOT FOUND)

so,i just filtered the requests with url conatining "ui-grid" in the interceptor to avoid the ui-grid js hitting my server, and everything worked perfectly.

maybe this answer could help you with your problem.

i am using these two cdn files -

<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet" />

Upvotes: 1

PaulL
PaulL

Reputation: 6650

Normally we would expect people to install the grid through bower or a similar tool - this sets up the paths correctly for everything to be found. You could try that approach, as it would give you a smoother upgrade path.

Upvotes: 0

ethem
ethem

Reputation: 2918

I found the problem finally.

I had to include another JS file in my in : /ui-grid-unstable.js"

see sample: http://ui-grid.info/docs/#/tutorial/101_intro

But the error is very and very confusing and not clear.

Upvotes: 4

Related Questions