Angular1 Basic


// Angular 1 - Introduction and Basic stuffs

Angular is a JavaScript framework that embraces extending HTML into a more 
expressive and readable format. It allows you to decorate your HTML with 
special markup that synchronizes with your JavaScript leaving you to write your 
application logic instead of manually updating views.

AngularJS is a structural framework for dynamic web apps. Angular lets you use 
HTML as your template language and lets you extend HTML's syntax to express your 
application's components clearly and succinctly. Angular's data binding and 
dependency injection eliminate much of the code you would otherwise have to 

Angular use data binding to wire up your data model to your views.  With Angular,
we can create and run unit tests, with Karma.  We can create and run end-to-end 
tests, with Protractor.  With Angular, we can move application logic out of the 
template and into components and controllers.  We can also get data from a 
server using Angular services.

If we need to animate, we can use the ngAnimate module.

Angular allows us to create our own custom HTML tags.

ng-if="Some JavaScript Code"

ng-class="{ some JS code }"
<div ng-repeat="page in form.pages">...</div>
ng-if=" Some JS code "

Angular comes as a single .js file that needs to be included at the bottom of 
your HTML page:

If we do not want to use the provided CDN, we can download Angular 1:

1. Go to
2. Click on the "Download AngularJS 1" button
3. Select the appropriate version.  At this time, the latest stable release
   for Angular 1 is 1.6.x which is already selected by default
4. Click on the Download button

Put the downloaded file somewhere in our Document / Web root folder, and 
reference it in our HTML files.

The content of our HTML file:

<DOCTYPE html>
<html lang="en" ng-app="myApp">
    <meta charset="utf8"/>
    <title>My favorite page title</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
    <script type="text/javascript" src="/libs/angular.js"></script>
    <script type="text/javascript" src="/javascript/app.js"></script>
  <body ng-controller="MainController">

The content of our /javascript/app.js:

"use strict";

Let first focus on the content of our /javascript/app.js file.

When we load the Angular framework code into our HTML page, it creates a single 
global variable in JavaScript called angular.  Off of that single global variable, 
there are several properties and methods.  One of the most important method is 
module, which allows us to create independent modules in Angular.  Some of them 
might be applications, and others might be independent modules.

The above code creates a new application module named 'MyApp', and it does not 
have any dependencies yet.

On the subsequent line, we refer to an existing application that we just created, 
selecting it, and then add a controller to it.

For the module method, if we do not specify the second parameter, Angular does 
not create a module.  Instead, it looks for an existing module and returns the 
existing module.  To create a module, we must specify the second parameter, 
which represent its dependencies.  If the module does not depend on anything, 
then we must specify an empty array.

The above code creates a controller named 'MainController', and provides some 
information to allow Angular to instantiate the controller.

In the above HTML code, we specified Angular to manage the entire HTML 
document, via the ng-app attribute.  We also attached the controller to the body 
tag via the ng-controller attribute.

var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope) {
  // myApp.controller is available to you because myApp is an Angular module.
  // The first parameter ( mainController ) is a string.  It is the name 
  // that we give to this controller.  The second parameter is a function 
  // that implement this particular controller.

  // The $ in front of $scope represent a service.  When Angular see
  // the ng-controller attribute below, it automatically invoke this function 
  // and pass on object under the $scope variable.

  // Inside this function, we can add additional properties or variables to
  // this $scope object.
  $ = 'Tony';

  // We can also add functions:
  $scope.getName = function() {

  // We can also invoke our new function.

  // The scope is that middle piece between the view and the model.



<!DOCTYPE html>
<html lang="en-us" ng-app="myApp"> // The value for ng-app correspond to the 
  // module defined above.  This means that the scope of the html tag is
  // the myApp object.  The html tag (view) is now connected to the myApp 
  // object.

  <div class="container">
    <div ng-controller="mainController">
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License