In last post we saw how to setup local environment for angular. In this post we will learn the MVC capabilities to create a dynamic view. We will create controller & model and bind the model data to views. We will create some sample exercises to demonstrate these.
Controller and Models in angular
ng-controller
ng-controller directive declares the controller to be used with in its DOM.<div ng-controller="myController"> :::: </div>
Here myController represents a javascript function. A controller can be defined in several ways. The easiest way is to create a JavaScript function and include the scipt in your Html page.function myController($scope){ :: :: }
When angular finds ang-controller
directive, it creates a controller instance and injects required services. Among these services$scope
is most important. A page can contain several Controllers, even controllers can be nested.$scope
$scope
is the data model that binds view and controller.$scope
defines the executionContext for the DOM elements with in specificng-controller
directive.All of the properties and methods are defined in$scope
context.$scope has two primary apis ($watch
and$apply
) that helps in data-binding.$watch
observes the changes in model and triggers a change notification when any model is changed.$apply
will apply these changes and updates the view.
Whenever angular compiles the view template, it finds theng-model
directive and sets a$watch
expression on these property. When angular finds an expression{{..}}
it executes in $scope context. By default when we declareng-app
directive, it creates a$rootScope
.
Here we have definedname
variable in$scope context
andemail
variable in$rootScope
.$rootScope
is available anywhere with in ng-app. In above example we have injected both$scope
and$rootScope
intomyController
.ng-click
We have added model and properties to $scope and linked to view. Now lets add some behavior to $scope.Lets add a button to HTML and on click of the button display a message.ng-click
directive is used to trigger a click event and we can add a behavior to it.ng-repeat
ng-repeat
directive is used to repeat over a list of items. Any DOM withng-repeat
will be repeated along with its child DOM. But all expressions with inng-repeat
will be executed in parent context. In below code{{name}}
will run in class context. To access individual item we can use{{item.property}}
. ng-repeat scope contains some useful variables like $index,$first,$last etc.
Demo 1: Angular calculator
Using above concepts lets create a calculator. ng-repeat will loop through numbers and operators and attaches properties and behaviors.
For live demo visit github page. Find JSFiddle code block as following. Angular minimizes the html code and moves the logic to controller keeping the view clean. I have used underscore js for few of the operations.
Demo 2: ELibrary - Display books
Lets start building our ELibrary application. You can download the module from git-hub. but i would suggest to use the code for reference and try building of your own. You are always welcome to fork the branch and suggest improvements. For live demo visit ELibrary-start Below is the JSFiddle codes.
Exercises
- Create a sample registration form and display user information on click of "Register".
- Try out other angular events.(like ng-mouseover)
- Display a series of students and on click of each student display their details.