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

我是新来的网络前端编程，并教我自己AngularJS。如何/在哪里导入我的index.html中的Angular和Bootstrap .js文件？

我创建了一个非常简单的web应用程序，只是让用户登录和注销。我在我的Mac OSX本地运行它。

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

我的问题如下。我一直无法通过谷歌搜索找出这些东西。我需要有人向我解释这个东西。

我正在从https://ajax.googleapis.com导入angular.js文件。那是对的吗？或者我应该下载它并将该文件存储在与index.html相同的目录中？为什么？我应该何时使用非缩小文件？使用非缩小的有什么好处？
我目前没有导入任何引导文件。我应该导入哪些文件？我是否应该将其作为URL或作为来自同一目录的文件导入：index.html
对于Bootstrap和AngularJS，
我应该检查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>

来源

2015-12-30 Saqib Ali

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

URL/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.文件的代码都没有任何空格，制表符和新行。这使得计算机的加载速度更快，但如果将来要定制角度或引导程序，则会发现压扁的格式无法阅读。

如果你刚刚起步，你不必太在意'做完所有事情'的完美方式。当我将其推送到Github时，我曾经在我的项目中包含angular.js和bootstrap.css文件以及我的index.html文件。过了一段时间，尽管您可能会发现它更简洁，只需使用URL格式即可。

有些人会说你应该把你所有的JS文件和链接放在你的网页底部（就在</body>标签前面），但这又是对'完美'的另一种优化，你不应该太担心关于。

来源

2016-01-01 09:04:01 vtange

这是建议对于初学者来说，如果你是一个专家，这可能并不适用于您：

我会建议你在当地有文件在你开发的时候，你的网站将不带网络工作，如果你禁用了现金支付（你应该在开发的时候应该这样做），它的响应速度会更快！
- 你应该禁用兑现在浏览器中，当你正在开发，否则，当你改变你的CSS和JS文件，它会采取减浏览器检测前的文件已更改
- 最小化的版本是小，但不可读的，我将使用没有最小化版本同时开发，所以我能理解错误信息，然后切换到最小化版本或者a）从来没有或b）当速度成为重要
看到1
作为初学者，你应该，但它在头标记中，即在第2行和第3行之间人们把它放在body标签之后，首先加载网页，然后是脚本，这也没有问题，但作为一个初学者，我认为只要你看到它，你的网页就可以完全工作。
很好的问题，我会做出于懒惰，替代你可以有一个脚本调用get_dependencies.sh，你必须记“ wget的东西”

来源

2015-12-30 08:37:27 jcr

通常的做法是将CSS文件放入<head>标记（2-3）中的链接标记中，以便在加载内容时在html和样式将应用时呈现它们，以便用户将甚至在完全加载之前就开始看到页面建立起来，而不是事先看到一些没有风格的元素。更多的是：What's the difference if I put css file inside <head> or <body>?

现在，脚本应在身体的末端（他们现在）被加载，由于以下原因：

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

你问缩小：缩小时应该使您的文件下载速度更快，因为它们被压缩，并且具有重量轻。它是生产的理想选择，但由于您无法很好地进行调试，所以对开发不利。这就是为什么你应该只在生产中启用缩小。（因为你使用的角度，也可以使用$ compileProvider.debugInfoEnabled（假），寻找它。）

为在项目中使用的文件（下载照片），或从CDN（https://ajax.googleapis.com）：发展的好习惯是在你的项目中使用文件，这样你就可以开发而不关心你的互联网连接，以及内容在他们的服务器和你的机器之间的距离。然而，在制作时，一个很好的约定会在你的页面中使用cdn，因为许多其他网页可能包含你想要获取的库（角度和引导是相当普遍的），所以文件很有可能已经存在存储在您的浏览器缓存中，而不需要再次加载。但是，您应该在页面中定义回退，以便如果cdn的某些原因不可用，用户将从项目服务器获取文件。 here's an example

了最后一个问题：你可以把它们放在一些“Libraryscripts”目录，所以这是很清楚，他们只是依赖关系

来源

2016-01-01 11:11:50

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

回答

相关问题