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 fromhttps://ajax.googleapis.com
. Is that correct? Or should I download it and store that file in the same directory asindex.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>