MEAN Stack Tutorials (MongoDB, Express, Angular, Node)

Sobre este curso

hey there we are going to be learning angularjs angular is basically an MV star whatever it's you know one of the ways of making a single page web app in

JavaScript so with no further ado let's just get into it I'm going to assume you know a decent bit about JavaScript already once I'm done with this I'll probably do a beginner level intro video

for people who are not familiar with JavaScript already so kind of the premise here is you already know what a single page app is kind of all the concepts behind it we're just going to

look into how to do a great one with angular and why it's awesome for very rapid development so kind of here's my index.html what we got here just kind of importing a basic stylesheet

nothing fancy I mean porting jQuery angular I'm going to be using angular UI router which is a kind of an add-on routing system which is definitely so far anyway the way to go with angular

and the only jsv I'm including is app j/s so far and then some bootstrap stuff so what we're going to do is we're going to say that this is what we want our app to be the first thing you do is you

define ng app equals and then the name of the module that you're going to be using for your angular app so we'll just call it app so as to make it simple ng app equals app so now angular is going

to instantiate on this element what we are going to do then is we need to define a view for the UI router so we will do a div and we will go UI view so that tells us pop what a review we're

loading right in there okay so basically when angular sees an app what it's going to do is it's going to evaluate everything inside of it and it uses that as your templating so basically you'll

see a lot of the angular way is your views happen in the HTML and then you have controllers and you have services all of that build on top of that so kind of an example would be lets say we want

a header let's go header and let's go ng-include this is going to include a HTML file for us so we're going to go templates now let me see what that is

templates now HTML and then so far we don't have an app module defined yet so let's go ahead and define our app module first I'm going to go over to app KS we're going to go angular well I got

some sort of you're going to go dot module call it app and then the next thing you're going to do is define any dependencies in an array when you're first defining a module you have to at

least include a blank array for dependencies otherwise it will break so I'm going to my only dependency is you i dot router make sure you I router has loaded before my app fires and now we've

got an app and you'll notice that it's instantiated and I'm loading in my navigation I'm going to go back to my index I'm also going to add in a footer ng and now I should have a footer I want

if there's anything in my footer my awesome tutorial so that should be showing up it's give me some sort of error unterminated quote yep there we go and you notice I'm putting single quotes

with inside of here because it's actually going to be evaluating this as a JavaScript string we can get into that a little more later so now we have a header a footer and absolutely nothing

coming in here so let's start defining some routes you'll notice angular starts off by giving us a hashtag navigation up here and so let's start adding some routes we're going to we have already

created the module now let's go config and we're going to do our dependencies one of the awesome things about angular is it does dependency injection if you have not

used dependency injection get ready to fall in love with it we're going to request two dependencies here and it will insert those two dependencies into my first actually real

it will insert those two dependencies into the first two arguments of my first two arguments my function here so okay so what we've done here is we've gone config require in these two dependencies

sorry I'm using half of a screen here so it's a little probably frustrating and then those dependencies automatically get passed in order into my function the reason we're kind of doing double

defining here is this is called annotating and the reason we're doing that is because if we didn't do that when you minify it these are going to get called like a and B and it's not

going to know what dependencies those are so we've kind of got to define what the modules are there and then you can call them whatever you want but is a good standard call them what they

actually are first move we're going to do is your router provider otherwise so when you type in anything else it'll go to slash so now I should be able to go to haha and it's just going to bounce me

back to slash test back to slash okay that's all we need to do with the URL router provider state provider is what is given to us by UI router state providers where we're going to be

defining all of our state's and ie our routing so state provider state home state and we're going to go URL that's this URL we're on now template let's just call it home and I should now see

home there we go I gave it a template of a string so I could go home and I could also go template URL and that should there's no home HTML which it's telling me that's not found

down here which is a good thing new file can't type today now you'll see home template has arrived there so that's kind of a basic start up let's go ahead and add another route

called what do we have we have about once again can't type tonight about we'll go slash abouts and it will look for about HTML there we go so now if we go to hashtag slash about we should get

about template and if we go hashtag slash home home template so as you can see we are very quickly creating a single page app that just works angular takes care of all the memory cleanup and

things that would normally be associated with that let's go and make these buttons now navigate us let me go to navigate tml this is going to go to about and this is just going to go to

slash and we'll make this go to contacts save so I should be able to go about change to about go back home and you notice that this did not change that's something we can address I'm going to go

another thing that you can do with ui-router is you can instead of doing href you can go UI – Esref for UI you'll notice everything ui-router related isn't ng it's UI state ref and we can

just call it about refer to it by name that also works they are interchangeable so about in home we're working great on both Oh might as well just go UIs ref okay and then another thing that we can

do is start building out these templates some more let's go ahead and define a controller on home so now home as a controller and let's in the controller use scope now so scope is the variables

and arguments that are accessible to the template is basically what we're providing so if I go scope dot title now I can in my home HTML only I can use angular's mustache like template and go

title so now it goes home or what would be better doing h1 there we go home and I can also go ul Li let me go back to this and add scope items equals an array scope items so now what I can do is I

can use ng – repeat equals item in items so now each Li gets item so it's going to loop through the items array and each item in that array gets passed here I can call this whatever I want I can call

this thing in items it's kind of basically doing in each and now I can reference it as thing so you notice now I have a list and I can change this and my list automatically changes angular is

really really fast with development so then let's go ahead and so now you can notice home and about we're getting some drastically different templating options it's lightning quick it just works

this controller obviously this pattern will not work one thing you'll notice that I forgot to do is I forgot to annotate it I just went controller function this will work totally fine

until you decide to minify your JavaScript at which point this will just be called once again a in which case it will not know what a is it's not going to magically know that that's scoped so

we're going to do is we're going to annotate that say scope if you ever use requirejs it's basically like using require jsut just use an array and the last argument of your array or the last

piece of your array is the function that's executing so scope their scope there and now that's going to work great when it minifides because this is going to be called a and these are both going

to be called a and it's still going to work just fine so what I'm going to do now is I'm going to break this controller out into home control and that's going to break my code because

there is no such thing as home control I'm going to make that file now angular module app this is going to be part of the st. I'm going to consider it a part of the same module I don't need

to put any dependencies in there because it's already been defined I'm going to go controller and kind of the naming convention that's standard for angular controllers just to end them

with ctrl and then let's just go function actually I'm going to annotate it same thing state function I'm sorry scope scope probably could have just copied and pasted that whole

thing there we go and now I just need to add home controller to my index which it will automatically get automatically get minified on deployment and now my app should be working yep beautiful my app

is working let me just copy and paste this and create an about controller about control I'm going to save you there we go and so now about is are going to have a controller of about

controller and now the about template just needs to be adjusted to do the same thing let's make the about template exactly the same as the home template and you see that now I have a different

title and a different list thing one thing two thing three when I'm on the about page let's work on getting this guy fixed right here what I'm going to do is I'm going to one thing you can do

oh yeah let's get into data binding before I mess with this let's get into some data binding this is one of the awesome awesome awesome things about angular is it's got two way data binding

just completely baked in so let's go to our home control let's say title is home ok great let's make an input and this ng model what that means is we're going to map it to an item in the scope and since

we already have something called home actually title then you're going to get yourself an input that is automatically called populated with home and now I can change it and you'll notice that scope

dot home is automatically updated you can even add this to models that are not defined in your controller ng model equals my value and I'm just going to print right here my value as if it was

already defined in the controller starts off with nothing there there you go if my controller is looking for scope dot my value it will automatically be populated it is

super awesome another thing you can do is you can create select inputs based off of information in an array so say we have an array there we have home about contact I can go here ngmodel equals

let's call it selected value which hasn't been typed in and for ng options it's going to be value for value in items so basically it's just going to be there you go you'll notice it starts off

empty because I have not defined a selected value yet and now I have my option of items I can go in home control and I could go scope dot and now it's going to automatically make sure home is

pre-selected I think it's called selected value there you go home is now pre-selected whenever I boot up my page so it's really really a cool thing let's talk about some services

let's wire in a web service now I'm going to go to my app one thing that's great let's say home has a dependency of it needs to hit a service and load up my friends list before it sends me to home

then we can do a resolve and pass in an array and we can have it each item in this resolved object is going to represent a service call or something that has to happen before it proceeds

and loads the controller in the template so we're going to resolve friends and then we're going to say that this has a dependency of HTTP which is a built in angular thing

and we're just going to return HTTP GET api friends I just have a JSON file but it would be no different it was an actual service that is going to return friends dot JSON and so one of the

things that it gives you is a response we're actually going to want to parse it down just a little bit so we're going to use a then then response return response data which is what the actual friends

JSON is you'll notice I just have a JSON array name will xxx name Laura age 26 and so basically now before it goes to the template and the controller it is going to hit the friends API it's going

to parse that here which there's no real parsing going except for giving me the data it's kind of the equivalent of a backbone parse is what we're doing for those guys familiar with backbone and

now it's going to make a friends provider available to this controller if I want it so how we use that then did I do that on home yeah at home so now I can make scope a dependency and I can go

friends make these second argument friends scope friends equals friends and now let's make this friend in friends there you go whoops let's print friend name :

friend age and let's actually use the right brackets there you go so now we have hit an API we've made that available what I can do this do now is how about for each

one of these instead of doing an Li or instead of doing that I do an input and you model equals friend name age let's say we want to change some stuff there we go and now that is real time changed

in the scope and so let's do another thing let's make a scope method let's make a Save button clean this up a little bit let's make this all nice and bootstrap looking

looks a little nicer and so we're just going to do is an ng-click which we can now give it a method save ng-click save and so if I go to this home control I can now go scope save equals a method

and we'll just make it alert so now when I hit save what did I miss no semicolon there you go my live reload is not working quite right today so there you go so now when I hit save it's going to

do that let's actually make it alert string if I scoped out friends there you go so that's what we're saving plus a little bit of random stuff that angular's decided to put in there Bob

John there you go so now Bob and John so I can also do a HTTP same thing post friends and I can just put in scoped up friends or actually I can just do friends there you go that's going to

post that data straight back up and now I have a real time editor for my friends list if I wanted to make a button on each one I deleted it it's pretty bad button I could use a

glyph for that but let's go ng click and you can actually put in an evaluation if you'd like so I can go Oh index is what my index is going to be I can go friends friends splice that let's see if that

works there you go so now on ng-click I'm going to splice out my index straight out of friends and now it's gone if I hit save I have nothing that I'm posting back posting back an empty

array so that's kind of a rapid-fire introduction to a lot of the angular things that you can do another thing that you can do like if we are approaching this up here you can do a

class issue we can make this one let me go to this friends JSON and we're going to say I'm special actually you know what since Laura's my wife and I'm will I'm going to say she's special and I am

NOT false so now what I can do here is we're doing this on home yes okay what I can do is if you're not special I can do ng class and now I can pass in an object of the different classes that I would

conditionally like to add so I'm going to go text muted which is a bootstraps way of dimming it out and that's going to go if not friend the friend is not special it's going to give

it a text muted class and you notice it's all didn't really do that big of a deal because you can't really tell but that's muted that's a lighter color I could go special if friend is special

that might make a better way add a CSS rule here let's go Styles splitter gets a background red I didn't test my I'm kind of on a test thing here so I don't know with a apparently I didn't check my

styles on live reload so not sure why that's not working but at any rate this should have now a special class to it yep so if you look in my second li it's got

a class of special so that should be background red not sure quite why it's not that would be how you adjust a class like if we were to just a class up there let's see what are some other great

things that you can do with angular you can provide services let's say that we wanted to make this API something that's reusable by a lot of different objects it's cacheable it does a lot of smarts

to it in that case we would actually move on to an angular service so what we would do is we would create a services file friends let's keep this all for for easiness I'm

going to keep it all registered to the app module and we're going to do factory as a normal naming convention if you're creating an angular service you're going to start by upper casing it there you go

friends and whatever we return is what our people are going to get when they get whenever they load this module so if we return this and it's just a list of friends let's just return get which just

returns this guy so I'm going to return an object which has a single method of get and that's what my friends factory is let me go ahead and add this to my page my friend's service is added and

now what I can do is friends can now not require HTTP can require friends and I can go return have the same effect yep there you go as you can see no difference whatsoever

I can also instead of doing in this in the resolve if for some reason I wanted to do this in the controller at some point I can add this as a dependency here friends now is a service not a

resolve provider so I can go friends get there you go so that's another way that you can do it and now multiple controllers can all share friends about can use friends as a dependency about

items can be friends Duquette and now I can mess with that service I can import HTTP into this so get could now return friends Jason then now that will work exactly the same or should not sure what

I messed up on that but that should basically do the exact same thing green friends it's my Allstate agent I'm not exactly sure what I messed up there I'm sure it's just some small little deal

that I messed up I wonder if this has to be now that's not it because that's just a normal method and I'm sure it's something simple but at any rate that's basically how you would wire that in to

then be a resource getter and setter so that's kind of your introduction to how to use angularjs if you check out ui-router you can also do nested views and sub views and a lot of great stuff

on here and that is what you need to do to get started so hope you enjoyed it have yourself a great day