Here we provide a gentle introduction to AngularJS showcasing data binding and templates as we explore what it means for AmgularJS to be a client side MVC framework

2. What is Angular?
• Client side MVC Framework
• Templating Engine
• So Much More

3. Client Side MVC
• Model is a JavaScript object
• View is HTML with AngularJS directives
• Controller is a JavaScript class

4. Templating Engine
• Part of the Two – Way Data Binding
• Implemented Through Directives
• UI is Updated as the Model Changes
• Model is Updated as the UI Changes

5. A Very Simple Example
• Install AngularJS
• Install-Package angularjs
• Add Script reference at the bottom
• <script src="~/Scripts/angular.js"></script>
• Calculate LTV for a Mortgage

6. Revisit the jQuery Fast Food Site
• New Controller called AngularController
• Three Samples
• Calculate LTV
• Calculate a Payment
• Apply

7. AngularController
Simply Returns an Empty View
public ActionResult MortgageCalculator()
{
return View();
}

8. Setting Up the View
<div ng-app
ng-init="loanAmount=150000;appraisedValue=180000">
Tell Angular to start and initialize some data.
ng-init rarely used except in simple scenarios.

9. Basic Binding and Simple Expressions
ng-model="loanAmount“
ng-model="appraisedValue“
{{(loanAmount/appraisedValue)*100| number:3}}

10. Adding a Controller
<div ng-app="mortgageCalculator">
<div ng-controller="calculatorController">
var myApp = angular.module('mortgageCalculator', []);
myApp.controller("calculatorController", [

11. Initializing Scope
"$scope", function($scope) {
$scope.title = "calculatorController";
$scope.amount = 100000;
$scope.term = 30;
$scope.rate = 4.5;

12. Declaring a Function
$scope.calculatePayment = function () {
var effectiveRate = ($scope.rate / 100) / 12;
var numberOfMonths = $scope.term * 12;
var numerator = effectiveRate * Math.pow(effectiveRate + 1, numberOfMonths);
var denominator = Math.pow(1 + effectiveRate, numberOfMonths) - 1;
$scope.payment = $scope.amount * (numerator / denominator);
};

13. Calling the Function
<div class="col-md-10">
<button ng-click="calculatePayment()" class="btn btn-default">
Calculate Payment
<span class=" glyphicon glyphicon-cog ">
</span>
</button>
</div>

14. Declaring a Function (part 2)
<input type="number" min="0" ng-model="amount" ng-
change="calculatePayment()" class="form-control text-box
single-line">

15. Angular and Razor
@Html.LabelFor(model => model.Borrower, htmlAttributes:
new { @class = "control-label col-md-2"})
<div class="col-md-10">
@Html.TextBoxFor(model => model.Borrower, htmlAttributes: new {
@class = "form-control ", ng_model = "Names.Borrower" })
</div>

16. Angular and Razor
<div id="borrowerPanel" class="panel-collapse collapse in">
<div class="panel-body">
@Html.Partial("NamesEditor")
</div>
</div>

17. Angular and Razor
• Attributes