Edvinas Urbasius


Front-end developer. Interested in IT, history and economics. The life-long learner.


Notes from PhoneCat App Tutorial (AngularJS) - Environment Setup and Bootstrapping

Notes from AngularJS tutorial.

Environment Setup

Installing dependencies

npm install

Starting up the server

npm start

Unit tests

  • We use unit tests to ensure that the JavaScript code in our application is operating correctly.
  • The app is configured to use Karma.
  • npm test will start the Karma unit test server.

npm test

E2E tests

  • We use E2E tests to ensure that the application as a whole operates as expected.
  • This app is configured to use Protractor.

npm run protractor

Protractor dependencies

  • Java Development Kit (JDK)

Check if Java installed

java --version

if it fails, Install Chrome browser.

0 - Bootstrapping

git checkout -f step-0

ng-app attribute

<html lang="en" ng-app>

The ng-app attribute represents an AngularJS directive, named ngApp. This directive is used to flag the HTML element that AngularJS should consider to be the root element of our application.

Double-curly binding with an expression

  • A binding, denoted by double-curlies
  • A simple expression used in this binding
<p>Nothing here {{'yet' + '!'}}</p>

This binding tells AngularJS that it should evaluate an expression and insert the result into the DOM in place of the binding.

AngularJS expressions are JavaScript-like code snippets that are evaluated by AngularJS in the context of the current model scope.

As expected, once this template is processed by AngularJS, the HTML page contains the text.

Bootstrapping AngularJS Applications

There are 3 important things that happen during the bootstrap phase:

  • The injector that will be used for dependency injection is created
  • The injector will then create the root scope that will become the context for the model of our application
  • AngularJS will then compile the DOM starting at the ngApp root element, processing any directives and bindings found along the way.

You'll only receive email when Edvinas Urbasius publishes a new post

More from Edvinas Urbasius: