Post on 16-Jul-2015
Angular JSBrians 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>
https://angularjs.org/
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>
<script src="Scripts/angular.min.js"></script>
</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><script src="Scripts/angular.min.js"></script>
</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.