How/where to import Angular and Bootstrap .js files in my index.html?

Question

I'm new to web front-end programming and am teaching myself AngularJS.

I have created a very simple webapp that just lets users login and logout. I am running it locally on my Mac OSX.

Below is my index.html file. Although it works, I'm not sure if I'm doing it right. I need to know how and where to import the angular.js files and the bootstrap.js files.

My questions are as follows. I haven't been able to figure this stuff out by googling. I need someone to explain this stuff to me please.

I'm currently importing the angular.js file from https://ajax.googleapis.com. Is that correct? Or should I download it and store that file in the same directory as index.html? Why? When should I use the non-minified file? What is the benefit of using non-minified?
I'm currently not importing any bootstrap file(s). Which file(s) should I import? Should I import it/them as a URL or as a file from the same directory as index.html
For both Bootstrap and AngularJS, please tell me which line numbers I should put the script src lines in my HTML.
Should I check the Angular and Bootstrap files into my Github repository?

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>

vtange · Accepted Answer · 2016-01-05T06:29:08.233

Normally, you add CSS stylesheets and JS scripts in the <head>(between lines 2 and 3) area of your html. You can either link files with URLs like the example below or just download the whole Angular.js or Bootstrap.css file (both of them aren't that big) and put them in the same folder as your index.html file.

URL/CDN example:

<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>

Local folder example:

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

Minified files (angular.js vs angular.min.js) will both run the same way. The only difference is the .min. file has the code all squished without any spaces, tabs, and new lines. This makes it load faster for computers, but if you're going to customize your angular or bootstrap in the future, you will find the squished format impossible to read.

You don't need to be too concerned with doing everything 'the perfect way' if you're just starting out. I used to include the angular.js and bootstrap.css files along with my index.html in my project when I pushed it to Github. After a while though you might find it cleaner to leave them out and just use the URL-format.

Some people will say you should put all your JS files and links at the bottom of your webpage (just before the </body> tag), but again this is just another optimization towards 'perfect' that you shouldn't worry too much about.

score 2 · Answer 2 · answered Dec 30 '15 at 08:37

This is advise for beginners, if you are an expert this may not apply to you:

I would advice you to have the files locally while you are developing, then your website will work w/o internet, and it will respond faster if you disable cashing (which you should when you are developing)!
- You should disable cashing in your browser when you are developing, otherwise when you change your css and js files it will take minus before the browser detects the files have changed
- the minimized versions are smaller but unreadable, I would use the none minimized versions while developing so I can understand error messages, and then switch to the minimized version either a) never or b) when speed becomes important
see 1
as a beginner you should but it in the head tag ie between line 2 and 3. sometimes people put it after the body tag to first load the webpage and then the scripts, this is fine also, but as a beginner I think it is advantageous for your webpage to fully work as soon as you can see it.
good question, I would do it out of laziness, alternative you could have a script called get_dependencies.sh where you have lines as "wget stuff"

score 2 · Answer 3 · edited May 23 '17 at 12:22

The usual convention is to put the CSS files in link tags inside your <head> tag (2-3), so that they are rendered before the html and the styles will apply when the content is loaded, so that the user will begin to see the page building up even before it is fully loaded, instead of seeing some not styled elements beforehand. more on that:What's the difference if I put css file inside <head> or <body>?

now, the scripts should be loaded at the end of the body(where they are now), for the following reasons:

if they will be rendered before most the html, they will delay the page from rendering until the whole script is loaded, and that's a UX hit.
most scripts are supposed to run anyway when the document is fully loaded, sometimes developers will use something like DOMContentLoaded to ensure that, but sometimes they don't and then a script will run without the corresponding html loaded. more on that :Where should I put <script> tags in HTML markup?

you asked about minification: minification is supposed to make your files downloaded faster since they are compressed and have less weight. it is ideal for production, but bad for development since you can't debug them well. that's why you should enable minification only on production. (and because you use angular, also use $compileProvider.debugInfoEnabled(false), look for it.)

as for using files in your project (download them) or from cdn (https://ajax.googleapis.com): a good convention for development is to use files on your project, so that you can develop without caring about your internet connection, and the distance the content need to go between their servers and your machine. however, on production, a good convention would be using the cdn in your page, since many other web pages may include the libraries you want to fetch(angular and bootstrap are quite common) so the file has a good chance to be already stored in your browser cache, and not need to be loaded again. and yet, you should define a fallback in your page such that if the cdn's are some why unavailable, the user will get the files from your project server. here's an example

for the last question: you can put them in some "Libraryscripts" directory, so that's it's clear they are just dependancies

How/where to import Angular and Bootstrap .js files in my index.html?

3 Answers3