intro to Angular js

Angular JS
Brians Section
Part 1 and 2

Working with angularjs
• In order to use Angular I used Visual Studio Nuget Installer to
install AngularJS

Google Hosted Libraries
The Google Hosted Libraries is a stable, reliable, high-speed,
globally available content distribution network for the most
popular, open-source JavaScript libraries. To add a library to your
site, simply use <script> tags to include the library.
<script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.2
.26/angular.min.js"></script>

You need to place this tag in the top
of your document
<script src="Scripts/angular.min.js"></script>

AngularJS extends HTML attributes
with Directives, and binds data to
HTML with Expressions.
The ng-app directive:
defines an AngularJS application.
To create an expression use {{ }}

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

The ng-model directive:
Binds the value of HTML controls (input, select, textarea) to
application data.
To initialize a value use ng-init.

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" ng-model="qty">
</div>
<div>
Costs: <input type="number" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</body>
</html>

$scope
In AngularJS, $scope is the application object (the owner of
application variables and functions).

AngularJS controllers
control the data of AngularJS applications.
are regular JavaScript Objects.

ng-controller
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard
JavaScript object constructor.

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
}
</script>
</body>
</html>

ng-click
The ng-click directive allows you to specify custom behavior
when an element is clicked

ng-repeat
The ng-repeat directive instantiates a template once per item
from a collection. Each template instance gets its own scope,
where the given loop variable is set to the current collection
item, and $index is set to the item index or key.

<!doctype html>
<head>
<title>Example - example-guide-concepts-2-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="invoice1.js"></script>
</head>
<body >
<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
<div>
Quantity: <input type="number" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c}}
</span>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
</body>
</html>

Invoice.js
angular.module('invoice1', [])
.controller('InvoiceController', function () {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = ['USD', 'EUR', 'CNY'];
this.usdToForeignRates = {
USD: 1,
EUR: 0.74,
CNY: 6.09
};
this.total = function total(outCurr) {
return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
};
this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
};
this.pay = function pay() {
window.alert("Thanks!");
};
});

The ng-bind directive:
binds application data to the HTML view.

intro to Angular js

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to intro to Angular js

Similar to intro to Angular js (20)

Recently uploaded

Recently uploaded (20)

intro to Angular js