intro to Angular js
Download as PPTX, PDF1 like329 views
The document provides an overview of key concepts in AngularJS including directives, controllers, scopes and data binding. It demonstrates how to get started with AngularJS by including the AngularJS script, using directives like ng-app, ng-model, ng-controller and ng-repeat. Controllers are used to define the application logic and bind data to the view using scopes. Data can be formatted for display using filters like currency.
![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!");
};
});](https://image.slidesharecdn.com/angularjs-150305144828-conversion-gate01/85/intro-to-Angular-js-17-320.jpg)
intro to Angular js
- 1. Angular JS Brians Section Part 1 and 2
- 2. Working with angularjs • In order to use Angular I used Visual Studio Nuget Installer to install AngularJS
- 3. 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>
- 5. You need to place this tag in the top of your document <script src="Scripts/angular.min.js"></script>
- 6. 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 {{ }}
- 7. <!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>
- 8. The ng-model directive: Binds the value of HTML controls (input, select, textarea) to application data. To initialize a value use ng-init.
- 9. <!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>
- 10. $scope In AngularJS, $scope is the application object (the owner of application variables and functions).
- 11. AngularJS controllers control the data of AngularJS applications. are regular JavaScript Objects.
- 12. ng-controller The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.
- 13. <!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>
- 14. ng-click The ng-click directive allows you to specify custom behavior when an element is clicked
- 15. 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.
- 16. <!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>
- 17. 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!"); }; });
- 18. The ng-bind directive: binds application data to the HTML view.