AngularJS Bootstrap 文件包含序列答案

【问题标题】：AngularJS Bootstrap file include sequenceAngularJS Bootstrap 文件包含序列
【发布时间】：2016-05-07 08:23:20
【问题描述】：

我正在使用 AngularJS 和引导程序开发新的 Web 应用程序。我需要澄清一下

1) 是否有任何顺序包含以下文件以获得更好的性能？如果是，为什么？

bootstrap.min.js
npm.js
angular.min.js
angular-ui-router.min.js
jquery.js
任何其他 jQuery 库
style.css
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map

2) AngularJS 1 和 AngularJS 2 有什么区别 3) bootstrap 3 和 bootstrap 4 有什么区别

【问题讨论】：

标签： angularjs twitter-bootstrap

【解决方案1】：

是的，有一个包含 CSS 和 Javascript 库文件的序列。此序列还将提高您网站的性能。您的网站将在客户端快速加载。

了解包含 CSS 和 js 库文件的顺序。应具备HTML5代码模板的基本知识。

基本 HTML5 代码模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

参考链接：http://getbootstrap.com/getting-started/#template

上面的模板是 BOOTSTRAP 框架代码模板。

CSS & JavaScript 库文件顺序如下

引导框架 - CSS 库。
A) 始终首先添加 BOOTSTRAP CSS 库。
想了解 Bootstrap 提供的 CSS 库和组件。参考链接：http://getbootstrap.com/css/
```
&lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
```
a) Bootstrap.min.css 是 Bootstrap 的缩小版。此版本仅用于生产目的。

b) Bootstrap.css 用于开发目的。

B) 如果需要，添加额外的 Bootstrap 主题。

<link href="css/bootstrap.theme.css" rel="stylesheet">

或者

<link href="css/bootstrap.theme.min.css" rel="stylesheet">

更多主题请参考此链接：https://bootswatch.com/
C) 在您可以添加所有自定义 CSS 样式表之后。

2. Bootstrap 框架 - JavaScript 库。
注意：始终在结束正文标记上方添加 JavaScript，即
<script src=""></script></body>

为什么要在正文上方添加 JavaScript结束标签：因为它提高了您网站的加载速度或网站在客户端打开速度非常快。
A) 始终首先添加 jQuery 库。否则，您将无法使用 BOOTSTRAP JavaScript 功能，例如（Modal、Dropdown 等）。想了解 Bootstrap 提供的 JavaScript 库和组件。参考链接：http://getbootstrap.com/js/

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;

B) 然后添加 BOOTSTRAP JavaScript 文件。

   &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;

C) 之后，您可以使用自己的自定义 JavaScript 文件，或者您可以使用 jQuery 插件。

3. Bootstrap 3 和 Bootstrap 4 的区别？
Bootstrap 3.3.6 是当前用于 Web 开发的稳定版本，而 Bootstrap 4 是测试版本。开发人员正在测试 Bootstrap 4。Bootstrap 4 是具有更多功能的 Bootstrap 3 的下一个版本。

4. Angular JS 1 和 Angular JS 2 的区别？
Angular JS 1 是 Angular JS 2 的旧版本。

【讨论】：

你明白一些事情了吗