Я использую NPM и некоторые угловые пакеты. Я пытаюсь следовать этот учебник, часть 1: Базовая сетка linkНеуверенный в том, как пререкаться с моими зависимостями от javascript
Моя установка каталога файла:
D:/nodeStuff/uiGrid, который содержит:
node_modules uigrid.css uigrid.html uigrid.js
Папка node_modules содержит:
angular angular-animate angular-touch angular-ui-grid
Я не могу решить эту ошибку в моем браузере консоли:
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.
Я знаю, что учебник дает jsfiddle, но она импортировала зависимости в CSS (это нормально?) И я озадачен о том, как заставить его работать за пределами jsfiddle
Мой 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>
Мой JavaScript:
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
}];
}]);
Мой CSS:
.grid {
width: 500px;
height: 250px;
}