Web development is the system of front-end web pages created with HTML, CSS, and JS connected with a series of back-end processes that store, manage, and manipulate data on a remote server.
Angular is a framework that uses HTML, CSS, & TypeScript (a variation of javascript) to create dynamic web applications using object-oriented design principles. This means removes a lot of the hassle that comes with designing for web (tons of callbacks, dozens of lines just to change UI elements, having to hard code every form and button, etc)
Angular requires a knowledge of:
It may seem like a lot at first, but a lot of it is just fluff added on top of the essentials. Angular objects are just fancy HTML elements. Node and TypeScript are just specific builds of Javascript so as long as you have the essentials you'll be golden
JSON Objects are a set of attribute: value pairs contained within a data structure that can be passed between Javascript methods.
//Example in TypeScript
class teacher {
private name: string;
private subject: string;
private age: number;
private students: string[];
...
//Constructor and getter and setter methods go below the declarations
}
//Same example in Node & Javascript
var teacher = { teacher:
{
"name": "",
"subject": "",
"age": 0,
"students": [],
},
}
//Example of accessing a JSON object
console.log("Teacher's name " + teacher.name)
console.log("Teacher's age " + teacher["age"])
console.log("First student in the class: " + teacher.students[0])
Callback functions are functions which take in another function as an argument and calls that function from within itself.
As a way to work around callbacks and avoid callback hell you can create promises. Promises are a return type that tells JS that this method will eventually return a certain object (example on next page).
//Example of callback in Typescript
function singBadly():void {
console.log("I wanna take my horse on the old town roaaaaaaad!")
}
function procrastinate(): void {
//This function executes call back after an hour
let second = 1000;
let hour = 1000 * 60 * 60;
console.log("Playing vidya games");
setTimeOut(() => {
console.log("Dang I died");
}, hour)
}
function doHomework(work:function):void {
this.procrastinate()
work()
this.singBadly()
}
//This is all cool but having the whole process jam for an hour kinda sucks no?
//I want to be able to sing badly while I procrastinate
function betterProcrastinate(work:function): Promise<void> {
//First create a promise that'll handle all of our data
//Gotta define the return type in the <>
let promise = new Promise<void> ((resolve, reject) => {
let second = 1000;
let hour = 1000 * 60 * 60;
console.log("Playing vidya games")
setTimeOut(() => {
console.log("Yay I won")
}, hour)
//Resolve and reject are functions intrinsic to promises
//Resolve ends the promise and works as it's return
//Reject happens when there's an error
resolve()
}
return promise;
}
function doHomeworkWhileSinging(work:function) : Boolean {
this.betterProcrastinate()
.then(() => {
work();
return true;
});
while true {
this.singBadly();
}
}
Well now that we've finally gotten all of the required coding concepts out of the way. We can move into the way Angular structures itself.
Angular is built out of modules which are relatively large blocks of code consisting of a components and services.
Components are self-contained blocks of HTML and CSS that correlate to a specific view on a webpage.
Services are logic blocks that serve different functions throughout the module. Things like component-to-component data transfer and http-request are done by services
Well yes and no. This is a level up session that teaches web dev fundamentals with the intention of leading you to Angular at the end. As long as you have the basics we previously discussed you can basically tackle any problem Angular can throw your way.
Oh that's easy
More info at this link
Here's a code bar that does just that. Also you can find a super cool tutorial on that here.
<h1>{{teacher.name}}'s Special Class on {{teacher.subject}} </h1>
<h2>Students Attending: </h2>
<div *ngFor="let students of teacher.students">
<p>{{student}}</p>
</div>
Well I'm not gonna live code. I find that it takes forever and doesn't much for anyone except kept people hurrying to keep up with the slides. I'd much rather have everyone follow this no-install tutorial at their own pace and ask questions as needed
No thank you for coming and please fill out this feedback form before you leave.
https://tinyurl.com/WebDevLevelUp for people who don't have the slides up