如何/在哪裏導入我的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文件？

回答

相關問題