Web Dev.

 Level-Up Session

https://slides.com/mackw/deck/

Housekeeping/ Prepping Your First Angular Project

  • Install Node.JS
  • Open up Node Command Line
  • Go to preferred folder
  • Install Angular:
    ​       npm install -g @angular/cli
  • Create a new project:
           ng new appname
  • Install express.js for easy backend
           npm install express --save
  • (Optional) Install Angular Materials
    ng add @angular/material

What is Web Dev

What is Web Dev? (Cont.)

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.

So Why Angular?

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)

So What Do I Need to Know to Use Angular?

Angular requires a knowledge of:

Well That's a Lot

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

So What are the Essentials?

  • Basic Understanding of HTML Tags
  • A Willingness to Fiddle with CSS 
  • A Complete Understanding of JSON Objects
  • A Relative Understanding of how Callback Functions Work 

JSON Object

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

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). 

Callbacks Example

Good Tutorial on Promises

//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();
    }

}

So Angular?

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

Architecture Image

So Where Do I Go From Here?

No...Like Actually Though?

Wasn't this supposed to be an Angular Level-Up Session?

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.

But I don't even know how to make modules, components, or services

Oh that's easy

  • ng generate module <name>
  • ng generate component <name>
  • ng generate service <name>

More info at this link

But you didn't teach me how to bind data inside of my html file

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>

Are you just gonna keep linking me to tutorials rather than live coding?

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

Ok, Well Do You Have Anything Else?

Cool, Thanks!

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

Web Dev Level-Up

By Mack W.

Made with Slides.com

Web Dev Level-Up

A short intro to web development using Angular. These serve more as lecture slides than as a tutorial of full stack development. There are a lot of helpful links to tutorials and guides inside though and plenty of helpful info for anyone doing web development for the first time in a hackathon

  • 1,240

More from Mack W.