Javascript 如何将angular应用程序连接到html_Javascript_Html_Angularjs_Node.js

Javascript 如何将angular应用程序连接到html

javascript html angularjs node.js

Javascript 如何将angular应用程序连接到html,javascript,html,angularjs,node.js,Javascript,Html,Angularjs,Node.js,我试图更好地理解如何连接应用程序的不同部分。我现在正试图弄清楚，如果文件位于不同的文件夹中，如何将angular应用程序连接到html文件。我的文件夹结构如下所示： |--Timer/ | -browser/ | -js/ | -app.js --> This is where I declare my angular app like var app = anguler.module('app', []); | -scss/ | -server/ |

我试图更好地理解如何连接应用程序的不同部分。我现在正试图弄清楚，如果文件位于不同的文件夹中，如何将angular应用程序连接到html文件。我的文件夹结构如下所示：

|--Timer/
|  -browser/
|      -js/
|      -app.js --> This is where I declare my angular app like var app = anguler.module('app', []);
|      -scss/
|  -server/
|      -public/
|         -index.js --> using ExpressJS to handle routing here. Essienntially just send all requests to index.html since I plan on eventually using the UI-Router from Anguler for state changes
|         -index.css
|      -index.html

这是我在app.js中看到的

'use strict'
var angular = require('angular'); //I don't know if this is the right way to use angular but otherwise I get an error saying angular is undefined. I have it installed through node as a dependency

var app = angular.module('PomodoroTimer', []);

app.controller('MainCtrl', function($scope) {
    $scope.message = 'THIS IS A MESSAGE';
});

app.config(function($locationProvider) {
    $locationProvider.html5Mode(true);
});

这是index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- Custom css style sheet -->
        <link rel="stylesheet" href="index.css">

        <!-- Include Angular from google cdn  -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

        <script type="text/javascript" src='index.js'> </script>
    </head>

    <body ng-app='PomodoroTimer'>
        <p>{{message}}</p>
    </body>
</html>


{{message}}

如何使index.html文件引用app.js并加载angular应用程序。当我尝试使用脚本标记时，比如在我如何加载index.js中，我会得到一个错误，说require未定义，因为它只能在服务器上使用，不能在浏览器上使用？而且，即使在index.js中，我也会得到一个错误，即require没有定义，但是如果express不能被要求，那么应该如何使用它呢

我研究了使用browserify来绕过require的错误，但是我的页面加载时间猛增。非常感谢你的帮助。我知道有很多工具可以像yeomen Generator一样完成所有这些引导，但我想了解如何从头开始自己完成这些。

Github链接：

在HTML模板中，应该是

<body ng-app='pomodoro-timer'>
        <p>{{message}}</p>
</body>


{{message}}

您的帖子中有几个问题。一般来说，您会混淆node作为appserver的一部分用于服务网页的文件和将加载到用户浏览器中的javascript。一旦你记得把这两个分开，就更容易理解了

如何使index.html文件引用app.js并加载angular应用程序。当我尝试使用脚本标记时，比如在我如何加载index.js中，我会得到一个错误，说require未定义，因为它只能在服务器上使用，不能在浏览器上使用

这是正确的，因为现在

require

仅在服务器端使用，而不是在浏览器中使用（除非您使用的是类似于AMD/require.js/bowserify的东西）。要使用

angular

关键字，只需在脚本中使用

angular

，无需：

'use strict'
// var angular = require('angular');     
var app = angular.module('PomodoroTimer', []);

包含angular js库后，angular关键字将在全局范围内可用，您可以使用与包含

index.js

相同的方式来包含它

而且，即使在index.js中，我也会得到一个错误，即require没有定义，但是如果express不能被要求，那么应该如何使用它呢

这里要记住的是index.js是服务器的一部分（因此不应该在

public

目录中）。这意味着在HTML中不包含

index.js

。相反，您可以通过使用

node/path/to/index.js

启动Web服务器来启动节点。将服务器端脚本与HTML分开，这样就可以很好地运行了！记住，您在服务器端使用节点语义，在脚本/HTML中使用浏览器javascript语义。index.html中不包含服务器端JS

好的，明白了。非常感谢你。这现在变得更加合理了。为什么当我将angular应用程序声明为：var app=angular.module（'PomodoroTimer'，[]）时，它的大小写应该是小写；惯例是将其声明为小写还是将其更改？