Introduction to Angular 2.0

About this course

all right well welcome to Microsoft Virtual Academy this is introduction to angular 2 and a little bit of typescript I'm Christopher Harrison and today I'm

happy to be joined by Spiros misra lacus got it excellent so why don't you go ahead and introduce yourself yeah yeah thank you very much I'm very excited to be here I get my name is Spiros mr.

Lucky's the director for anti programs for coding dojo also my MBA from ranking University and love computers I've been working reviews for a long time now programming I do a lot of continue

education with MIT I love the programs in the classes they have there and then really big with cybersecurity I really like that is kind of like my hobby okay work and of course new technology in the

matrix I like it I like it I dig it as for me I'm a Christopher Harrison I'm a developer evangelist with with Microsoft I do an awful lot of web stuff I certainly love OSS love Visual Studio

code and in my spare time I'm a marathoner I'm a husband and I'm a father of one four legged child so what are we going to be talking about today as far as angular go absolutely so quite

a few things here we have the angular overview we're going to talk about why angular what angular is we'll go into that typescript the big picture of angular building blocks of angular just

kind of the pieces on their own we just wanted to identify them separately and then how they connect together I didn't like to just do a kind of to-do list right there's something you can relate

to other things you probably have seen other other websites and other things just kind of bring it all together at the end with a little review and then other resources you can use later on

excellent alright so what is what is that Euler what is SP a letter single page apps to talk to me about all of this yeah absolutely so some of the questions again what is angular it's

easy for me to tell you guys that angular is a NBC structured framework that has a single page application and is a client-side templating with testing okay all right so uh how do you mean

client-side templating something a little bit about that yeah yeah absolutely so I think the best way to kind of explain all this is kind of giving you kind of a story behind it

right and kind of identify the roadblocks developers get into how can I go through and then why these kind of things came up yeah so you know just let's assume that you're building a

website yourself right and let's say it's like github gives a good example or website you building and you're on your own and you realize you know github it's a very large website I can't do it on my

own so you signed up myself and Christopher and we're like hey let's all three of us build this website together so we realize now three of us will build a

website but we can't all work on the same file right and be a mess to try to update everything right right so we decide well let's separate out our website of github let's say in parts

I'll be building some features you'll be building some features Christopher we're building some features and we'll separate these out in different folders so essentially what we're doing there is

we're kind of creating a framework right kind of like a file and structure a folder structure and organization where we can put these files so that's part of it is kind of the framework and that's

kind of where it derives from right it's kind of the organization piece but then as we code we realized that let's say you're using jQuery I'm using underscore using another library and then we

realize that's very inconsistent from each other right you want to be a little consistent and we also notice that the coding styles that we use they're very different from each other so we say you

know what let's kind of work together and identify the the libraries we want to use together and perhaps even the file structure we want to use maybe we'll decide some folders will hold

files for the logic some hold files for our view pages some of hold files for like the database so kind of creating the structure and giving each folder a purpose more so beyond just what feature

it is it's kind of creating what we call like an MVC fractured structured framework right so that's another reason why that has come up right so that's one of the solutions there for that issue

but then again we just continue to code and we realize we're building this website out looking great but we realize it we want to change pages right but we want a lot of the stuff on the page to

stay there we only want parts of the page to change but we end up seeing is we keep giving the users a new page which might not seem like a big deal but you think about it if I have a bunch of

images on a page and then I just want a small part of my page to change and I give them another set of those images we have to wait for everything to download again and it takes a long a while right

so we say you know what let's make it so that every time somebody clicks on a different menu we only update a different part of a certain part of the page which is awesome because then they

don't have to reload the entire page it's a lot faster and great better user experience and that idea of just updating part of the page is what we call a single page application so you're

going closer to that concept right and single page applications can be kind of a range it's not like everything has to be either single page application or not at all

right it could be a mixture right it can be kind of like some a single page some is not so it just kind of depends on them so we could take it to code and we realized as the

project gets pretty big we are having issues with scaling perhaps we have a lot of people requesting pages and perhaps let's make something up and say we're getting about 60 requests per

minute right so one per second now we realize that every time we give a page to a user we have HTML page with all the written data and we have JavaScript data that we want to put into the HTML page

right and so to do that the server has to take the data take the page put it together modify the the page and then give it that up the client right and perhaps that part of putting the data

together takes longer then they'll use the server just spitting out a bunch of pages right so we realized that you know what let's speed this up and let's have your browser or each person's browser

take care of that job let's have the browser get the page from the server just the HTML page of link get the JavaScript data from the server just all the variables and data and have my

individual browser when I go to the website put that stuff together now the nice thing about that is the server may take now less than one second to put it all together and give me that page and

it's it's going to be a lot faster for spawn on my browser because my browser still has to do one thing soon as the piece comes in does one job have a second it's done

but at least the server can send out maybe to 300 let's see of those requests per per minute so that's the idea of what this would call a client-side templating where I can give all the

in all the pages to the client your browser and have him do essentially all the work right there you go and lastly we realize that this is a big project you know you build log in and then I go

in and I try to add encryption and I screw something up right so we look at it and we say that's that's a problem because if I didn't know that I messed something up on login how do we find

that out right we have to wait for the user or the the customer to see it and then give us like a comment so this idea of testing is really helps us make sure that the features that work stay working

so as we build things we can make sure that when we add other features we don't break previous features and also testing the features themselves right so that's also another thing that angular does and

kind of like a very nice seamless way is give us ability to test so all the four that I just said the embassy for structured framework the single page application state and the client-side

templating as well as the testing is all features that angular gives us now I know that there's actually a handful of frameworks that are out there things like ember and backbone and knockout and

so forth where does angular fit into the grand scheme of things and well why should I learn angular yeah that's a really great question so I want to break this down to about you know just three

ways of looking at it as a new developer you may want to look at this and understand that angular is definitely a very popular framework and I have a slide there this kind of shows the how

popular angular is as far as like the searches but very popular it has a high amount of demand is quite actually a lot of jobs out there so if you're looking for kind of that framework that will

land your job in the future that's definitely something to keep in mind of also there's a lot of support which is great that just gives us a lot of support for you to search for answers

and a lot of resources the angular team I believe is the size of third developers or more in the community self is massive so trying to find to fix errors would be really a no problem at

all and also it's nice to know that it's a front-end framework and as a new developer you're most likely going to join in teams that you enjoy in the

front-end right not likely to just jump into the back and is likely also for seasoned developers you should know that it is definitely a structured framework very opinionated also this very

productive the way that it's kind of a modular design and there's consistency because of that right because everything kinda has to follow an angular way and then

for the team leaders why would you even choose angular as a framework for your team it would be most likely because it's very efficient it'll make your team stay efficient and kind of the code

quality will stay kind of the same all the way through and then the longevity right with this much backing this much support it's likely to be a framework that lasts a very long time

excellent all right well then I guess the last little thing and we can do this in the next video is to take a look at an example of what a single page app is all about them all right so let's close

this off and we'll come back and we'll take a look at what a single page app is all about