|
There were various reasons why I avoided Javascript in the past, but when I finally did decide to get serious I was coming from actionscript, java, and other languages with eclipse editors, special library files, and a basic manual process for extending the api that's available in your code. For example, in actionscript 3 if you want to add a third party library you would download the swc file and add it in the build path of your project. Then the imports and code completion for the new library work like magic. In javascript it's a little different.
|
This a boot strap, but it's not the type of bootstrap we're talking about here.
|
Bootstrap, the "Import" of Javascript
Since I was coming from the world of adding swc files and jar files to the build path, I frequently found myself saying, "What the heck is a bootstrap??" when watching tutorial videos and trying to follow along with text tutorials. Well as it turns out, "bootstrapping" refers to adding third party libraries, which in javascript uses the <script> tag. In web development you have a main html (usually index.html), and you must declare which js files it uses (both your own js files and third party libraries). It's best practice to put the script tags as the last thing in the <body> tag. If you didn't your page would appear to load a bit slower. Here's an example that bootstraps the JQuery and Angular.js libraries:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
</html>
Notice how these are just HTTP links to files on a CDN. This reduces the headache of downloading files, moving them around, adding the path to your project, etc. You just drop the link in, and you're good to go (assuming you have internet connection while you are developing).
Bootstrapping in Angular
Normally bootstrapping a javascript library just means adding the script tag for the library, but in Angular you need to do a little more since just adding the script tag won't get anything working. You need to tell the html file that we're using an Angular app using the ng-app directive. You normally put this ng-app directive in the root element, <html> or maybe a <div>. You also "set it equal" to the javascript module that contains the code for the app. This just tells the html file to load that module.
<div ng-app="MyModuleName">
The Bootstrap Phase
In the big purple book Node.js, MongoDB, and AngulasJS Web Development, Brad Dayley describes something called a bootstrap phase in the life cycle of an angular application. Each time the web page is loaded into the browser, three phases occur- bootstrap phase, compilation phase, and runtime phase. The bootstrap phase is basically the browser loading up the script tag to the Angular library files, initializing basic under-the-hood Angular components, and initializing your module that you specified with the ng-app directive.
Twitter Bootstrap
As if all this was not confusing enough, there is a somewhat famous Javascript library that for some reason is also named bootstrap. It was originally created by employees of Twitter then later open-sourced, and for a while it was the most popular project on Github. It has some other nifty featuers, but the focus of the framework is to make a static html page responsive, allowing you to create a site with a fluid design where the desktop version has rows of columns, but the columns automatically stack nicely when you shrink the page by either dragging the bottom right corner of your browser around or viewing the site from a smaller mobile device. The Twitter Bootstrap library can be used with the Angular framework to give your sites a more responsive, fluid layout.
It's Time for Some Bootstrappin'
Welp, now that you know know the in's and out's of the word bootstrap in the context of Javascript and Angular it's time for you to go use it and go make your own Angular.js projects! If I missed any other obscure definitions, please let me know in the comments. Otherwise, I'll see you soon for new tutorials friends. Get your boots strapped up because this is just the beginning!
RSS Feed