Static Vs Angular JS Template

In Angular, the view is a projection of the model through the HTML template. This means that whenever the model changes, Angular refreshes the appropriate binding points, which updates the view.

The view component is constructed by Angular JS from the template like below 

html ng-app=‘phonecatApp’ 

head

script src=‘bower_components/angular/angular.js

/head

body ng-controller=‘phonelistCtrl’

ul

li ng-repeat=“phones in phones”

span {{phone.name}}

p {{phone.snippet}}

/li

/ul

/body

/html

Now having the view is setup, we need the model and controller. The data model can be placed in the controller. The controller is just a constructor function that takes a $scope parameter. 

app/js/controller.js 

var phonecatApp = angular.module(‘phonecatApp’,[]);

phonecatApp.controller (‘phonelistCtrol’, function($scope)

{

$scope.phones = [

{'name': 'Nexus S',

            'snippet': 'Fast just got faster with Nexus S.'},

        {'name': 'Motorola XOOM™ with Wi-Fi',

            'snippet': 'The Next, Next Generation tablet.'},

        {'name': 'MOTOROLA XOOM™',

            'snippet': 'The Next, Next Generation tablet.'}

];

}

The ngController directive, located on the tag, references the name of our controller, PhoneListCtrl (located in the JavaScript file controllers.js).

The concept of scope in Angular JS is actually critical. A scope can be seen as glue between template, model and controller to work together.

Any change thats reflected in view happens in the model and vice versa. 

References:

https://docs.angularjs.org/tutorial/step_02

https://docs.angularjs.org/tutorial/step_01