Question

我是网络前端编程的新手，我正在自学AngularJS。

我创建了一个非常简单的webapp，只允许用户登录和注销。我在Mac OSX上本地运行它。

以下是我的index.html文件。虽然它有效，但我不确定我是否正确行事。我需要知道如何以及在何处导入angular.js文件和bootstrap.js文件。

我的问题如下。我还没能通过谷歌搜索来解决这个问题。我需要有人向我解释这些东西。

我目前正在从angular.js导入https://ajax.googleapis.com文件。那是对的吗？或者我应该下载它并将该文件存储在与index.html相同的目录中？为什么？我什么时候应该使用非缩小文件？使用非缩小的好处是什么？
我目前没有导入任何引导程序文件。我应该导入哪些文件？我应该将它/它们作为URL或文件从index.html
对于Bootstrap和AngularJS，请告诉我哪些行号应放在我的HTML中script src行。
我应该将Angular和Bootstrap文件检查到我的Github存储库吗？

的index.html：

<html ng-app="app">
    <head>
    </head>
    <body ng-controller="Main as main">
        <input type="text" ng-model="main.username" placeholder="username">
        <br>
        <input type="password" ng-model="main.password" placeholder="password">
        <br>
        <br>
        <button ng-click="main.login()" ng-hide="main.isAuthed()">Login</button>
        <button ng-click="main.logout()" ng-show="main.isAuthed()">Logout</button>
        <br/> {{main.message}}
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
        <script src="app.js"></script>
    </body>

</html>

Answer 1

通常，您在html的<head>（第2行和第3行之间）区域添加CSS样式表和JS脚本。您可以使用以下示例链接文件，也可以只下载整个Angular.js或Bootstrap.css文件（两者都不是那么大）并将它们放在与index.html相同的文件夹中文件。

网址/ CDN示例：

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
</head>

本地文件夹示例：

<head>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script type="text/javascript" src="angular.min.js"></script> 
</head>

缩小的文件（angular.js vs angular.min.js）将以相同的方式运行。唯一的区别是.min.文件的代码都被压缩而没有任何空格，制表符和新行。这使得它对计算机的加载速度更快，但如果您将来要自定义角度或引导程序，您会发现无法读取压扁格式。

你不必太在意做所有事情，而是完美的方式＆＃39;如果你刚刚开始。当我把它推到Github时，我曾经在我的项目中包含angular.js和bootstrap.css文件以及我的index.html。过了一会儿，虽然你可能会发现它更干净，只是使用URL格式。

有些人会说你应该将所有的JS文件和链接放在网页的底部（就在</body>标记之前），但这又是对“完美”的另一个优化。你不应该过分担心。

Answer 2

这是初学者的建议，如果您是专家，这可能不适用于您：

我建议您在开发过程中将文件保存在本地，然后您的网站将无需互联网，如果您禁用兑现（在开发时应该这样做），它会更快地响应！
- 您应该在开发时禁用浏览器中的兑现，否则当您更改css和js文件时，它会在浏览器检测到文件发生变化之前减去
- 最小化版本较小但不可读，我会在开发时使用非最小化版本，因此我可以理解错误消息，然后切换到最小化版本a）never或b）当速度变得重要时
见1
作为一个初学者你应该但它在头标记中，即在第2行和第3行之间。有时人们把它放在body标签之后首先加载网页然后脚本，这也没关系，但作为一个初学者，我认为一旦您看到它，您的网页就可以完全正常工作。
好问题，我会用懒惰来做，替代你可以有一个名为get_dependencies.sh的脚本，你的行有“wget stuff”

Answer 3

通常的惯例是将CSS文件放在<head>标记（2-3）内的链接标记中，以便在html之前呈现它们，并在加载内容时应用样式，以便用户将在完全加载之前开始看到页面构建，而不是事先看到一些未设置样式的元素。更多内容：What's the difference if I put css file inside <head> or <body>?

现在，脚本应该加载到正文的末尾（现在它们），原因如下：

如果它们将在大多数html之前呈现，它们将延迟页面渲染，直到加载整个脚本，这就是用户体验。
大多数脚本应该在文档完全加载时运行，有时开发人员会使用类似DOMContentLoaded的东西来确保，但有时他们不会，然后脚本将在没有相应的html加载的情况下运行。更多内容：Where should I put <script> tags in HTML markup?

至于使用项目中的文件（下载它们）或cdn（https://ajax.googleapis.com）：一个好的开发惯例是在项目中使用文件，这样您就可以在不关心互联网连接的情况下进行开发，以及内容在服务器和计算机之间的距离。但是，在制作时，一个好的惯例就是在页面中使用cdn，因为许多其他网页可能包含您要获取的库（角度和引导程序非常常见），因此该文件很有可能已存储在浏览器缓存中，而不需要再次加载。然而，你应该在你的页面中定义一个后备，这样如果cdn是为什么不可用，那么用户将从你的项目服务器获取文件。 here's an example

关于最后一个问题：你可以将它们放在一些“Libraryscripts”目录中，这样很清楚它们只是依赖性

如何/在哪里导入我的index.html中的Angular和Bootstrap .js文件？

3 个答案: