Download presentation
Presentation is loading. Please wait.
1
AngularJS: JavaScript Framework
2
What? AngularJS is a JavaScript framework.
It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. <script src="
3
What You Should Already Know
Before you study AngularJS, you should have a basic understanding of: HTML CSS JavaScript
4
AngularJS History AngularJS version 1.0 was released in 2012.
Miško Hevery, a Google employee, started to work with AngularJS in 2009. The idea turned out very well, and the project is now officially supported by Google.
5
AngularJS Extends HTML
AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.
6
Example <!DOCTYPE html> <html>
<script src=" <body> <div ng-app=""> <p>Input something in the input box:</p> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
7
Example explained: AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application. The ng-model directive binds the value of the input field to the application variable name. The ng-bind directive binds the content of the <p> element to the application variable name.
8
AngularJS Directives As you have already seen, AngularJS directives are HTML attributes with an ng prefix. The ng-init directive initializes AngularJS application variables. <div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
9
AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS will "output" data exactly where the expression is written: <!DOCTYPE html> <html> <script src=" <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p>{{name}}</p> </div> </body> </html>
10
AngularJS Applications
AngularJS modules define AngularJS applications. AngularJS controllers control AngularJS applications. The ng-app directive defines the application, the ng-controller directive defines the controller. <div ng-app="myApp" ng-controller="myCtrl"> 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> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>
11
Data Binding In the next example two text fields are bound together with two ng-model directives: <div ng-app="" ng-init="quantity=1;price=5"> Quantity: <input type="number" ng-model="quantity"> Costs: <input type="number" ng-model="price"> Total in dollar: {{ quantity * price }} </div>
12
Data Binding In the next example two text fields are bound together with two ng-model directives: <div ng-app="" ng-init="quantity=1;price=5"> Quantity: <input type="number" ng-model="quantity"> Costs: <input type="number" ng-model="price"> Total in dollar: {{ quantity * price }} </div>
13
Repeating HTML Elements
The ng-repeat directive repeats an HTML element: <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
14
Validate User Input The ng-model directive can provide type validation for application data (number, , required): <form ng-app="" name="myForm"> <input type=" " name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error. ">Not a valid address</span> </form>
15
Adding Filters to Directives
Filters are added to directives, like ng-repeat, by using the pipe character |, followed by a filter: <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
16
Filter an Array Based on User Input
By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter. Type a letter in the input field, and the list will shrink/grow depending on the match: <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai' ]; }); </script> <p>The list will only consists of names matching the filter.</p> <div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter : test"> {{ x }} </li> </ul> </div>
17
Sort an Array Based on User Input
Click the table headers to change the sort order::
18
Sort an Array Based on User Input
Click the table headers to change the sort order:: <div ng-app="myApp" ng-controller="namesCtrl"> <table border="1" width="100%"> <tr> <th ng-click="orderByMe('name')">Name</th> <th ng-click="orderByMe('country')">Country</th> </tr> <tr ng-repeat="x in names | orderBy:myOrderBy"> <td>{{x.name}}</td> <td>{{x.country}}</td> </tr> </table> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Carl',country:'Sweden'}, {name:'Margareth',country:'England'}, {name:'Hege',country:'Norway'}, {name:'Joe',country:'Denmark'}, {name:'Gustav',country:'Sweden'}, {name:'Birgit',country:'Denmark'}, {name:'Mary',country:'England'}, {name:'Kai',country:'Norway'} ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); </script>
19
AngularJS Application
20
AngularJS Application
Step 1. Getting Started: Start by making an application called myShoppingList, and add a controller named myCtrl to it. The controller adds an array named products to the current $scope. In the HTML, we use the ng-repeat directive to display a list using the items in the array. <script> var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products">{{x}}</li> </ul> </div>
21
AngularJS Application
Step 2. Adding Items: In the HTML, add a text field, and bind it to the application with the ng-model directive. In the controller, make a function named addItem, and use the value of the addMe input field to add an item to the products array. Add a button, and give it an ng-click directive that will run the addItem function when the button is clicked. <script> var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function () { $scope.products.push($scope.addMe); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products">{{x}}</li> </ul> <input ng-model="addMe"> <button ng-click="addItem()">Add</button> </div>
22
AngularJS Application
Step 3. Removing Items: We also want to be able to remove items from the shopping list. In the controller, make a function named removeItem, which takes the index of the item you want to remove, as a parameter. In the HTML, make a <span> element for each item, and give them an ng-click directive which calls the removeItem function with the current $index. <script> var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function () { $scope.products.push($scope.addMe); } $scope.removeItem = function (x) { $scope.products.splice(x, 1); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products"> {{x}}<span ng-click="removeItem($index)">×</span> </li> </ul> <input ng-model="addMe"> <button ng-click="addItem()">Add</button> </div>
23
AngularJS Application
Step 4. Error Handling: The application has some errors, like if you try to add the same item twice, the application crashes. Also, it should not be allowed to add empty items. We will fix that by checking the value before adding new items. In the HTML, we will add a container for error messages, and write an error message when someone tries to add an existing item. <script> var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function () { $scope.errortext = ""; if (!$scope.addMe) {return;} if ($scope.products.indexOf($scope.addMe) == -1) { $scope.products.push($scope.addMe); } else { $scope.errortext = "The item is already in your shopping list."; } } $scope.removeItem = function (x) { $scope.errortext = ""; $scope.products.splice(x, 1); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products"> {{x}}<span ng-click="removeItem($index)">×</span> </li> </ul> <input ng-model="addMe"> <button ng-click="addItem()">Add</button> <p>{{errortext}}</p> </div>
24
AngularJS Application
Step 5. Design: The application works, but could use a better design. We use the W3.CSS stylesheet to style our application. Add the W3.CSS stylesheet, and include the proper classes throughout the application, and the result will be the same as the shopping list at the top of this page. <link rel="stylesheet" href=" <div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;"> <header class="w3-container w3-light-grey w3-padding-16"> <h3>My Shopping List</h3> </header> <ul class="w3-ul"> <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li> </ul> <div class="w3-container w3-light-grey w3-padding-16"> <div class="w3-row w3-margin-top"> <div class="w3-col s10"> <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding"> </div> <div class="w3-col s2"> <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button> <p class="w3-text-red">{{errortext}}</p>
25
AngularJS Application: Completed
<!DOCTYPE html> <html> <script src=" <link rel="stylesheet" href=" <body> <script> var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function () { $scope.errortext = ""; if (!$scope.addMe) {return;} if ($scope.products.indexOf($scope.addMe) == -1) { $scope.products.push($scope.addMe); } else { $scope.errortext = "The item is already in your shopping list."; } $scope.removeItem = function (x) { $scope.products.splice(x, 1); }); </script>
26
AngularJS Application: Completed
<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;"> <header class="w3-container w3-light-grey w3-padding-16"> <h3>My Shopping List</h3> </header> <ul class="w3-ul"> <li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li> </ul> <div class="w3-container w3-light-grey w3-padding-16"> <div class="w3-row w3-margin-top"> <div class="w3-col s10"> <input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding"> </div> <div class="w3-col s2"> <button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button> <p class="w3-text-red">{{errortext}}</p> </body> </html>
27
Source W3Schools.com Exercise
Similar presentations
