ANGULARJS #7
7.1 Review JS
3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15; var saucers = 4; // check if cups is greater than (>) saucers if (cups > saucers) { alert("we need to order more saucers"); }
4 You can save code as a function and execute it repeatedly // specify a variable in the brackets. You can use it inside your function. function welcome(message) { alert("welcome to the website " + message); } // execute your function and place a value/variable in the round brackets. welcome("mary"); var name = "Peter"; welcome(name);
7.2 jquery
6 jquery is a JavaScript library. You can load it from Google's CDN service or download and include in your site folder. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min. js"></script> Before executing jquery code, you should tell the browser to wait until the page has finished loading. $(document).ready( function () { }); //code here
7 The basic syntax of jquery is $(selector).action(); Like CSS the selector is the HTML element you want to target. You can then perform an action to that element/those elements. The $ symbol is used at the start of all jquery lines of code. It is telling the browser to parse the following code using jquery. The selector is based on the CSS model. You can use general HTML names, classes and ids: $("h1") selects all h1s. $(".bigger") selects all HTML elements with class="bigger". $("#intro") selects the HTML element with id="intro".
8 The syntax for events is similar to actions: $(selector).click(); $('p').click(); Inside the round brackets after your event, you can write a function that will get executed as that event happens. $(".trigger").click( function () { $(".nav").slidetoggle(); });
9 hover() has one big difference to click, you should define 2 functions. One for hovering on, one for when the hover ends. $("p").hover( function () { alert("i hovered on a paragraph"); }, function () { alert("i hovered off a paragraph"); });
10 submit() is the same syntax as click(). You can declare one function to be called when a user submits a form. <form> <input type="text"> <input type="submit" value="order Now"> </form> $("form").submit( function () { confirm("do you definitely agree to the Terms and Conditions?"); });
11 blur() is the same syntax as click(). You declare a function for when a user moves focus away from a form field. <input type="password"> <p id="error"></p> $("input:password").blur( function () {//input:password is input with type="password" var password = $(this).val();//$(this).val() is the contents of the current item, the field. if(password.length < 8){//password.length is the number of characters in the string $("#error").html("you must use at least 8 characters"); } else { $("#error").html(""); } });
7.3 jquery Validation
13 A very useful plugin is for validating forms. It can be downloaded at http://jqueryvalidation.org Download and unzip the plugin folder. The only file required to use the plugin is dist/ jquery.validate.min.js, move this to your js/ folder. Include it in your HTML file using: <script src="js/jquery.validate.min.js"></script>
14 The validation plugin is setup and ready to be used. The validation plugin is built around HTML 5 form attributes and uses existing input types e.g. type="email". <form id="signup"> <p><label for="username">username</label> <input type="text" id="username" minlength="6" required></p> <p><label for="email">email Address</label> <input type="email" id="email" required></p> <p><label for="password">password</label> <input type="password" id="password" required minlength="8"></p> <input type="submit" value="signup" > </form> Then in your JS code: $(document).ready( function () { $("form").validate(); });
7.4 AngularJS
16 AngularJS is a JavaScript front-end framework. Many online applications like Netflix/GMail run on Javascript Frameworks. A framework is different to a library. Where a library has functions you can use how you like, a framework is setup to work a certain way. A framework like Angular can parse API endpoints and create HTML content.
17 Using AngularJS This is the quickest, simplest implementation of AngularJS. 1. Load their JS file in the <head> of your HTML page <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min. js"></script> 2. Add ng-app to your opening <html> tag <html ng-app>
18 2 way Data Binding AngularJS can track if values change and update accordingly. <input type="text" ng-model="firstname" placeholder="enter your first name"> <h1>hi there {{firstname}}!</h1> With the ng-model attribute, you are linking the value of the input field to a model/variable Curly brackets {{ }} are a templating feature. They allow you to output content.
19 if statements AngularJS can display content conditionally. <input type="text" ng-model="firstname" placeholder="enter your first name"> <h1 ng-if="firstname">hi there {{firstname}}!</h1> Here we are checking if firstname is true, if so the <h1> displays
20 MVC Angular is built on the Model View Controller principle. The Model represents your data. The Controller can manipulate the data had handle interactions from View to the Model. The View is where your data is displayed. Your model, controller and view should be distinct. In this way your code should be more reusable. As an AngularJS App gets more complicated we use Controllers.
21 Using a Controller To use a Controller we must give our app a name <html ng-app="todoapp"> We're going to create an external js file as well and link to our HTML <script src="todo.js"></script> And last we set an attribute ng-controller on a div where the controller will show data <div ng-controller="todolistcontroller as todolist"> </div>
22 todo.js In our JS file we define a controller and add it to our app. We assign the controller to a variable to make it easier to use again. Last we create an array of todo objects. angular.module('todoapp', []).controller('todolistcontroller', function() { var todolist = this; todolist.todos = [ {text:'html Assignment', complete:true}, {text:'css Assignment', complete:true}, {text:'js Assignment', complete:false}, {text:'end Assignment', complete:false}]; });
23 ng-repeat Back in our HTML file we can loop through our array of todos using the attribute ng-repeat <ul> <li ng-repeat="todo in todolist.todos"> {{todo.text}} </li> </ul> We can also display a count You have {{todolist.todos.length}} todos
24 ng-model We can use the todo.complete value to display if a todo is completed. <input type="checkbox" ng-model="todo.complete"> We can improve how the todo is displayed <span class="complete-{{todo.complete}}"> {{todo.text}} </span> <style>.complete-true{ text-decoration:line-through; } </style>
25 Angular function You can define a function inside your controller and call it in your view. todolist.remaining = function() { var count = 0; angular.foreach(todolist.todos, function(todo) { if(todo.complete) count +=1; }); return count; }; To call in your HTML we write the controller.function name with round brackets. You have {{todolist.remaining()}} of {{todolist.todos.length}} todos outstanding
26 Call a angular function with an event You can use ng-click to run code on a click event. <a href="#" ng-click="todolist.archive()">archive</a> We can write a function to loop through our todos and only keep ones outstanding. todolist.archive = function() { var oldtodos = todolist.todos; todolist.todos = []; angular.foreach(oldtodos, function(todo) { if (!todo.complete) todolist.todos.push(todo); }); };
27 Call a angular function with a submit event You can also use ng-submit to run code on a click event. <form ng-submit="todolist.addtodo()"> <input type="text" ng-model="todolist.todotext"> <input type="submit" value="add todo"> </form> Then in your controller we write a function that pushes(adds) a new object into the todolist array. todolist.addtodo = function() { todolist.todos.push({text:todolist.todotext,done:false}); todolist.todotext = ''; };