Currently, I am utilizing NPM along with various angular packages. As per the tutorial on Basic Grid Part 1 at this link, I am encountering challenges.
This is my file directory structure:
D:/nodeStuff/uiGrid includes:
node_modules uigrid.css uigrid.html uigrid.js
In the node_modules directory, you will find:
angular angular-animate angular-touch angular-ui-grid
The error in my browser console reads as follows:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module angular-touch due to:
Error: [$injector:nomod] Module 'angular-touch' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
The provided jsfiddle in the tutorial includes imported dependencies in the CSS, which left me puzzled on how to replicate it outside of jsfiddle.
Here's the structure of my HTML:
<script src="./node_modules/angular/angular.js"></script>
<link rel="stylesheet" type="text/css" href="./node_modules/angular-ui-grid/ui-grid.css" />
<script src="./node_modules/angular-ui-grid/ui-grid.js"></script>
<script src="./node_modules/angular-touch/angular-touch.js"></script>
<script src="./uigrid.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<div ui-grid="{ data: myData }" class="grid"></div>
</div>
</div>
This is how my JavaScript looks like:
var app = angular.module('app', ['angular-touch', 'ui.grid']);
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
}];
}]);
Lastly, here's my CSS snippet:
.grid {
width: 500px;
height: 250px;
}