What is Angular?

AngularJS is an open-source JavaScript application development framework. What a framework does is to provide us a top-level access to some of the lower-level functions in JavaScript. What AngularJS does is better than jQuery: it provides a different work flow.

AngularJS is especially usefull when you have data-heavy applications where the data changes frequently. AngularJS gives us an architectural pattern that we can follow as well as the utility to actually be able to interact with data.

Setting Up

Put these two lines just before </body>:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script></script>

Modules and Dependency Injection

Our Very First Module

When talking about coding, we have three main files which I will name them JS, CSS, and HTML. First, we should put this into JS:

var app=angular.module('testApp', []);

Then we can create our controller in JS:

app.controller('testController',
    function($scope /* the scope of the controller */) {
    $scope.test = 'hello'; // declare a test variable in scope
);

In HTML, inside body, put this:

<div ng-app='testApp' ng-controller='testController'></div>

"ng-app" tells angular to load testApp module onto this <div>, and "ng-controller" binds "test" variable to this <div>.

Inside this <div>, you can use {{test}}.

Basic Dependency Injection

Dependency injection practically means including something else into that controller. In Angular, DI allows us to share variables and functions between self-contained modules without having to reuse code, and maintains the state of each component. Let's declare a constant:

app.constant('testConstant',  'constantValue');

Then we inject this constant into our controller by changing controller like this:

app.controller('testController',
    function($scope, testConstant) {
        $scope.test = 'hello';
        $scope.constant = testConstant;
});

Then we should be able to put constant value in HTML by {{constant}}.

Week One Code Sample

Week One Week Two Week Three Week Four Week Five