Download to read offline
![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/75/intro-to-Angular-js-17-2048.jpg)
Uploaded byBrian Atkins
intro to Angular js
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.
intro to Angular js
- 1.
- 2. Working with angularjs •In order to use Angular I used Visual Studio Nuget Installer to install AngularJS
- 3. Google Hosted Libraries TheGoogle 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>
- 4.
- 5. You need toplace this tag in the top of your document <script src="Scripts/angular.min.js"></script>
- 6. AngularJS extends HTMLattributes 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> <divng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html>
- 8. The ng-model directive: Bindsthe 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> <divng-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, $scopeis the application object (the owner of application variables and functions).
- 11. AngularJS controllers control thedata of AngularJS applications. are regular JavaScript Objects.
- 12. ng-controller The ng-controller directivedefines 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 directiveallows you to specify custom behavior when an element is clicked
- 15. ng-repeat The ng-repeat directiveinstantiates 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: bindsapplication data to the HTML view.