Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

What the Heck is a Bootstrap (in Angular.js)?

1/10/2016

0 Comments

 
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.
Picture
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!
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Picture
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blockchain
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Investing
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    March 2023
    August 2021
    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2023