Извините за возможный репост, но я не знаю, как еще написать это.Я использовал этот веб-сайт для создания небольшой веб-страницы angularJS, используя также nodeJS, и я дошел до того, что отделил угловой код от вида или HTML.Я обнаружил, что когда я пытался разделить их, ничего не работало.
Вот мой код:
Home.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- <script>
var myApp = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myColor = "red";
});
</script> -->
</head>
<body>
<!-- <script>
myApp.directive('myDirective', function() {
return {
template: "This is a test directive."
};
})
</script> -->
<h2>myApp Test</h2>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="quantity = 10; cost = 5">
<p>Color: <input type="text" style="background-color:{{myColor}}" ng-model="myColor" value="{{myColor}}"></p>
<p>Total in dollar (raw exp): {{quantity * cost}}</p>
<p>Total in dollar (span): <span ng-bind="quantity * cost"></span></p>
<p> First Name: <input type="text" ng-model="firstName"></p>
<p> Last Name: <input type="text" ng-model="lastName"></p>
<h1>Hello, {{firstName + " " + lastName}}</h1>
</div>
Are you even changing?!
</body>
<script type="javascript" src="../JS/myApp.js"></script>
<!-- <script type="javascript" src="../JS/myApp.module.js"></script> -->
<script type="javascript" src="../JS/myCtrl.js"></script>
<!-- <script type="javascript" src="../JS/myCtrl.component.js"></script> -->
</html>
myApp.js / myApp.module.js:
var myApp = angular.module('myApp', []);
myCtrl.js / myCtrl.component.js :
myApp.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myColor = "red";
});
// app.directive('myDirective', function() {
// return {
// template: '<p><h3>This is a test directive.<h3></p>'
// };
// });
Наконец, вот моя иерархия папок:
Если то, что я сделал неправильно, уже очевидно,вам не нужно продолжать читать.
Теперь закомментированный код также важен.Это и другие вещи, которые я пробовал, и то, что я хотел реализовать.Я попытался:
- Повторно добавить весь угловой код обратно в тег head, чтобы убедиться, что он все еще работает.Это работало, за исключением директивы (которая, я думаю, должна была бы быть частью отдельного модуля, но, тем не менее, не имела значения).
- Перемещение ссылок на скрипты, которые есть и были, расположенный ниже тела, к голове.
- Перемещение ссылок на скрипт в верхнюю часть тела.
- Перемещение всего в один * один * файл (myApp.module.js).
- Переименование обоих «myCtrl.component.js» и «myApp.module.js» в «myCtrl.js» и «myApp.js», соответственно, чтобы гарантировать, что номенклатура angularJS, возможно, устарела, не является атрибуцией.
- Добавление "type =" javascript "" в ссылки на сценарии.
- "Жесткое обновление", чтобы убедиться, что старые документы не были кэшированы.
- Протестировано, чтобы увидеть,даже запрашивал файлы с сервера, используя узел.Не похоже, что это так.
Если вам нужна часть nodeJS, она тоже здесь ( index.js ):
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
http.createServer(function(req, res) {
var myUrl = url.parse(req.url);
var basename = path.basename(myUrl.path);
console.log('request url: ' + req.url);
console.log('url path: ' + myUrl.path);
console.log('basename: ' + basename);
fs.readFile('../HTML/Home.html', function(err, data) {
res.writeHead(200, { 'ContentType': 'text/html' });
res.write(data);
res.end();
});
}).listen(8080);