(public).sospep.systems ~ view step ~ step-000-bootstrapping

<h1 style="text-align: center;">step 000 - bootstrapping</h1>
&nbsp;
<ol>
<li>*] You are now ready to build the AngularJS phonecat app. In this step, you will become familiar with the most important source code files, learn how to start the development servers bundled with angular-seed, and run the application in the browser.</li>
<li>] NEW step IN bootstrapping</li>
<ol>
<li>] reset your workspace to step-#, where # is the step you wish to reset to</li>
<ol>
<li>] git checkout -f step-0</li>
</ol>
<li>] You must repeat this for every future step in the tutorial and change the number to the number of the step you are on. This will cause any changes you made within your working directory to be lost.</li>
</ol>
<li>x] NEW step IN bootstrapping ( if you havent done this already)</li>
<ol>
<li>x] npm install - been there, done that (installs dependancies)</li>
<li>x] npm start - been there, done that (launches local web server )</li>
</ol>
<li>x] NEW step IN bootstrapping - view the app in the browser</li>
<ol>
<li>x] <a href="http://localhost:8000/app" target="_blank">http://localhost:8000/app</a>&nbsp;&nbsp;</li>
<li>*] i currently have the "completed" app showing BUT i think after checkout -f step-0, i am going to be back to nothing</li>
<li>x] confirmed - checkout step-0, resets the app back to nothing</li>
</ol></ol>
&nbsp;
<hr />
&nbsp;
<ol>
<li>] what is the code doing?</li>
<ol>
<li>ng-app directive &lt;html lang="en" ng-app&gt;</li>
<li>angularjs script -&nbsp; This code downloads the <code>angular.js</code> script which registers a callback that will be executed by the browser when the containing HTML page is fully downloaded. When the callback is executed, Angular looks for the <a href="https://docs.angularjs.org/api/ng/directive/ngApp" target="_blank">ngApp</a> directive. If Angular finds the directive, it will bootstrap the application with the root of the application DOM being the element on which the <code>ngApp</code> directive was defined.</li>
<li>double curly binding with an expression:&nbsp; &lt;p&gt;Nothing here {{'yet' + '!'}}&lt;/p&gt;</li>
<li>* a binding, denoted bydouble-curlies `{{ }}` </li>
<li>The binding tells Angular that it should evaluate an expression and insert the result into the DOM in place of the binding. Rather than a one-time insert, as we'll see in the next steps, a binding will result in efficient continuous updates whenever the result of the expression evaluation changes.</li>
<li><a href="https://docs.angularjs.org/guide/expression" target="_blank">Angular expression</a> is a JavaScript-like code snippet that is evaluated by Angular in the context of the current model scope, rather than within the scope of the global context (<code>window</code>).</li>
</ol>
<li>] bootstrapping angularjs apps</li>
<ol>
<li>] Bootstrapping AngularJS apps automatically using the <code>ngApp</code> directive is very easy and suitable for most cases.</li>
<ol>
<li>] In advanced cases, such as when using script loaders, you can use the <a href="https://docs.angularjs.org/guide/bootstrap" target="_blank">imperative / manual way</a> to bootstrap the app.</li>
</ol>
<li>] There are 3 important things that happen during the app bootstrap:</li>
<ol>
<li>The <a href="https://docs.angularjs.org/api/auto/service/$injector" target="_blank">injector</a> that will be used for dependency injection is created.</li>
<li>The injector will then create the <a href="https://docs.angularjs.org/api/ng/service/$rootScope" target="_blank">root scope</a> that will become the context for the model of our application</li>
<li>Angular will then "compile" the DOM starting at the <code>ngApp</code> root element, processing any directives and bindings found along the way.</li>
</ol>
<li>] Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse click, key press or incoming HTTP response) that might change the model. Once such an event occurs, Angular detects if it caused any model changes and if changes are found, Angular will reflect them in the view by updating all of the affected bindings.</li>
<li>] The structure of our application is currently very simple. The template contains just one directive and one static binding, and our model is empty. That will soon change!</li>
</ol>
<li>] what are all these files in my working directory</li>
<ol>
<li>] Most of the files in your working directory come from the <a href="https://github.com/angular/angular-seed">angular-seed project</a> which is typically used to bootstrap new Angular projects. The seed project is pre-configured to install the angular framework (via <code>bower</code> into the <code>app/bower_components/</code> folder) and tools for developing a typical web app (via <code>npm</code>). For the purposes of this tutorial, we modified the angular-seed with the following changes:</li>
<ol>
<li>] Removed the example app</li>
<li>] Added phone images to <code>app/img/phones/</code></li>
<li><code></code>] Added phone data files (JSON) to <code>app/phones</code></li>
<li><code></code>] Added a dependency on <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> in the <code>bower.json</code> file.</li>
</ol></ol>
<li>] experiments</li>
<ol>
<li>] add new expression to index.html&nbsp;&lt;p&gt;1 + 2 = {{ 1 + 2 }}&lt;/p&gt;</li>
<li>] displays: 1 + 2 = 3</li>
</ol></ol>

~ view step ~ Procedure] angular-tutorial FROM [ App] framework-angular IN [ servers] technology-developer-www