1. Web technologies
Tehnologii web

2. Course 12 Angular lect. eng. Rajmond JÁNÓ, PhD
fb.com/janorajmond
Room E05

3. Final Exam Answers
Explain what the defer attribute is used for when importing an external JavaScript file into an HTML document.
It is used for executing the code in the JavaScript file only after the whole HTML document has been loaded and the DOM is available.

4. Final Exam Answers
Explain the difference between the == and === comparison operators.
The == operator only compares values while the === operator compares both values and data type.

5. Final Exam Answers
Explain the difference between declaring variables using the var versus the let keywords.
The let keyword defines a variable with block scope, while the var keyword defines a function scope variable.

6. Final Exam Answers
Explain what “strict” mode is and how and why it is used in JavaScript.
“strict” mode is used to write more secure JavaScript code, because it changes previously accepted “bad syntax” into real errors.

7. Final Exam Answers
What is the HTML Document Object Model (DOM), by definition?
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

8. Final Exam Answers
Enumerate at least 3 methods of finding elements in the HTML DOM.
By ID
By tag name
By class name
By CSS selector
By HTML object collection

9. Final Exam Answers
Specify what are the .classList.add(), .classList.remove() and .classList.toggle() methods used for in JavaScript.
The methods are used for manipulating (i.e.: adding, removing or toggling) CSS classes for HTML elements via JavaScript.

10. Final Exam Answers Specify 3 ways of adding events to HTML elements.
Using the HTML event attribute
Assigning events using the DOM
Using the AddEventListener() method

11. Final Exam Answers
Explain the difference between event bubbling and event capturing in JavaScript.
These refer to the order in which events are executed for embedded elements. In case of event bubbling the inner most element’s event is handled first, then the outer one’s. While in case of event capturing, the outermost element’s event is handled first and then the inner one’s.

12. Final Exam Answers
Explain the difference between the setTimeout(function, time) and setInterval(function, time) methods.
The setTimeout() method will wait “time” milliseconds and then call the “function” once. The setInterval() method will call the “function” every “time” milliseconds, until it is stopped.

13. Final Exam Answers Explain what the JSON.parse() method is used for.
It is used for converting JSON data, which is always a string response from a server, to valid JavaScript object.

14. Final Exam Answers
Explain what an AJAX call is used for in JavaScript.
An AJAX call is used to either read data from a web server or to send data to a web server and then dynamically update the page without reloading it.

15. Final Exam Answers
Given the following code, find and specify at least 3 coding style guidelines which are violated:
var myH1=document.getElementById("myH1");
var myCar={
make:"Ford",
model:"Focus",
year:"2006" }
if (myCar.make<2010) {
var myoutput="Dude, get a new car!"
myH1.innerHTML=myoutput; };

16. Final Exam Answers
Specify what will the below script output to the console and why.
"use strict";
my12 = 12;
my34 = 34;
my56 = "56";
console.log(my12 + my34);
console.log(my34 + my56);
console.log(my56 + my12 + my34);
Error: use of undeclared identifier “my12”

17. Final Exam Answers
Given the code below, explain what the mysteryFunction does.
function mysteryFunction(inArray) {
let arrayLength = inArray.length;
for (let i = 0; i < (arrayLength / 2); i++) {
var tempElem = inArray[i];
inArray[i] = inArray[arrayLength - i - 1];
inArray[arrayLength - i - 1] = tempElem; }
return inArray;
console.log(mysteryFunction([1, 2, 3, 4, 5, 6]));
console.log(mysteryFunction(["a", "b", "c", "d", "e"]));
What will the console log after the two function calls?
6, 5, 4, 3, 2, 1 and e, d, c, b, a
The function reverses the array passed as an argument.

18. C12 – Angular What is Angular? Prerequisites
Creating an Angular project
Angular project structure
Building an Angular application – example
Deploying an Angular application

19. What is Angular?
Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open- source web application framework led by the Angular Team at Google and by a community of individuals and corporations
Angular is a complete rewrite from the same team that built AngularJS

20. Prerequisites
In order to create, run and deploy Angular applications you will need to install
Node.js
Angular CLI (Command Line Interface)

21. Prerequisites
Node.js can be downloaded and installed from

22. Prerequisites
You can check if you have Node.js installed by typing “node –v” into a Command Prompt window

23. Prerequisites
Node.js (installed with the default options) will also install NPM (Node Package Manager)

24. Prerequisites
To install Angular CLI run the following command npm install

25. Creating an Angular Project
In order to create an Angular project, navigate to the folder you want to save your project in and run: ng new ProjectName
Then Select “Y” to Add Routing
And SCSS for your stylesheet format

26. Creating an Angular Project
Now, to open the created project in Visual Studio Code just type code .
Then change the directory to your app and to run the project in the server, run the serve command ng serve –o

27. Creating an Angular Project

28. Angular Project Structure
End-to-end testing
Node.js module
Actual source code

29. Angular Project Structure
Angular apps consist of components
Main component template
Main component stylesheet
Main component of the app

30. Structure of a Component
Imports
Component properties
Component logic

31. Building an Angular APP

32. Building an Angular APP
When creating a new Angular app, we are provided with a “Demo app”
This can be deleted, in order to build our own app
Delete the contents of the app template: app.component.html
Leave the <router-outlet> tags

33. Building an Angular APP
Let’s just test that our HTML template file is working

34. Building an Angular APP
Let’s start by building a navigation bar

35. Building an Angular APP
Let’s start by building a navigation bar

36. Building an Angular APP

37. Building an Angular APP

38. Building an Angular APP

39. Building an Angular APP
Now, we shall use the Angular CLI to generate our components ng generate component ComponentName ng g c ComponentName

40. Building an Angular APP

41. Building an Angular APP
Now, we need to route our components

42. Building an Angular APP

43. Building an Angular APP
Now, let’s start building our application

44. Building an Angular APP
Data binding
Click event
Click event handler function

45. Building an Angular APP

46. Building an Angular APP
Data we bound before
Click event handler functions

47. Building an Angular APP

48. Building an Angular APP
Now, let’s try two-way data binding

49. Building an Angular APP
Data set
Data read

50. Building an Angular APP

51. Building an Angular APP

52. Building an Angular APP

53. Building an Angular APP
Let’s do something interactive
Display in a container “Go ahead, click the button!” on startup
But then, when the user clicked the button 5 or more times, display “Stop clicking the damn button!” in the same container

54. Building an Angular APP

55. Building an Angular APP

56. Building an Angular APP

57. Building an Angular APP

58. Building an Angular APP
With Angular we can also do style binding and class binding

59. Building an Angular APP

60. Building an Angular APP
However, if we want to change more than one CSS property, it’s not the most efficient or the prettiest of ways

61. Building an Angular APP

62. Building an Angular APP
Still not pretty enough: can’t we just somehow change the CSS class?

63. Building an Angular APP
Pretty enough for you, Mr. “Let’s change the code 1435 times just to make it look nice without adding and functionality whatsoever?”

64. Building an Angular APP

65. Building an Angular APP

66. Building an Angular APP
Now, let’s fetch some data
For that, we need to generate a service ng generate service ServiceName ng g s ServiceName

67. Building an Angular APP

68. Building an Angular APP
Let’s just test our HTTP service

69. Building an Angular APP

70. Building an Angular APP

71. Building an Angular APP

72. Building an Angular APP

73. Building an Angular APP

74. Building an Angular APP

75. Building an Angular APP

76. Building an Angular APP

77. Building an Angular APP

78. Building an Angular APP

79. Deploying an Angular APP
When you are finished, you will need to deploy your application into production ng build --prod

80. Bibliography https://angular.io/
Tutorial-&-Crash-Course

81. Feedback

82. IF you’d like to meet again…
4th year, 2nd semester – choose Elements of Automated Testing (Elemente de Testare Automata – ETA)

83. Courses
Available online at: Information for Students -> Courses -> Web Technologies