AngularJS Fundamentals In 60-ish Minutes

so you’ve heard about angularjs but you’re not exactly sure how to get started with it well this video is for you angularjs fundamentals in 60-ish minutes is going to go through all the key fundamentals you need to know about the angular j/s spa framework my name is Dan Walley and I’ll be walking you through some of the fundamentals some of the key things I really like and my blog can be found here at weblog /d hua lean and if you’re on twitter feel free to follow me at dan wall lean and keep in touch that way so to get started we’re going to be focusing 100% on angularjs and the demos i’m going to be showing throughout this can be found here slash angularjs demos now I have some real simple demos to start things out and then we’ll build up and then by the end we’ll kind of put all the main pieces together now I’m not going to have time in 60-ish minutes to go through an entire full-scale line of business type of app but you can absolutely build those types of apps with angularjs now if you’re new to angular and you haven’t really read much about it you can go to angularjs org to get all the details this includes documentation demonstrations tutorials all that fun stuff now the first time I went there I was really excited about I had heard about it from a friend and I haven’t really been on the spa single page application bandwagon because I just filled it was too much of a mess there’s too many scripts involved and you have all these different things you need to deal with so I was pretty excited about angular because it really is you’ll see kind of a spa framework and the first time I went and looked at the docs I’ll have to say not a lot of light bulbs went off and so it felt a little bit strange and the more I looked into it it got a little bit stranger in parts and I saw these different words like transclusion and scope and directive and I said what the heck is this in fact I wasn’t even sure transclusion was an actual word but turns out it is so I kind of felt like this guy I won’t say I shed a tear but I was a little frustrated because I’ve been doing JavaScript since the 90s and usually I pick up on stuff pretty quickly so I figured well maybe I’m stupid well it turns out I just wasn’t thinking about it the right way and how they approached it and once I took a step back kind of relaxed a little bit and said hey this can’t be as hard as I’m making it chilled out a little I realized wow this is awesome and angularjs truly in my opinion is an awesome framework and so a lot of light bulbs went off and once that started happening all the kind of pieces fit in and made total sense to me so I think it’s like anything with a new framework sometimes you catch it you know maybe instantly when you learn it and other times you don’t with this it was just more of a matter I hadn’t taken the time to be real honest to research the different pieces and I was kind of learning little tidbits here and there so what I’m going to do throughout this video is walk you through all the key things that I wish I would have understand more upfront and hopefully jumpstart your angularjs development process once you get done you’re going to have superpowers just like this kid here and maybe not force powers but super spa powers will say single page application powers now the agenda is we’re going to start off with some of the key features angularjs offers and I’ll kind of introduce the challenge with writing spas from scratch anyone that knows me knows I do not recommend writing that from scratch I just think it is in the long-term when it comes to maintenance a nightmare there’s too many scripts involved and I’m worried about version dependencies and scripts changing and things breaking so we’re going to talk about that and how angular addresses it from that we’re going to get started with some of the fundamental features that angular provides then I’ll go into some of those key features that you really got to start off with kind of the ABCs of angular if you will so directives filters and the two-way data-binding which is just awesome now I’m a big fan of some of the other scripts out there like knockout j/s as an example but you’re going to see that angular is a true framework it’s not just a library that does maybe one or two things it actually can do a lot of different things once we get through the directives filters and data binding we’re going to talk about views controllers and scope and then we’ll wrap up with modules and we’ll talk about how all this other stuff fits in the modules and then we’ll get into some spa concepts like routes and even factories for sharing data and reusing data so how do you get started with angularjs and why do you want to get started I mean what features does it offer that are that compelling we’re going to talk about that in this particular section so first off a single page application is one in which we have a shell page and we can load multiple views into that so a traditional app as you know you took the blink and well it loads everything again and so it’s not very efficient on the bandwidth especially in the mobile world and with a spa we can load the initial content upfront and then the different views or the little kind of mini web pages can then be loaded on the fly and embedded into the shell page now angularjs is you’re going to see a very good spot framework but it’s not just for that you don’t have to load these dynamic views with it in fact if you wanted you could just use it for some of the cool separation of code that I’ll show you and data binding but I will focus on spas here now the challenge with building spas from scratch is there’s a lot of different issues to deal with Dom manipulation in history and how do you dynamically load modules and deal with promises when you make async calls and things like that routing becomes a huge issue because you have to have some way to track where are we and where are we going well all of this type of stuff you’re going to see is built into angular now we could certainly do all this with different scripts out there we could use Sam ejs and jQuery and history j/s and requirejs and for ajax we could do q and a lot of different options but angular going to C provides a lot of cool features it’s one core library that I really like that concept because I don’t have to rely on a million other scripts and worrying about those different script versions playing nicely into the future if you work on a development team then maintenance should be some type of a goal for you especially if you do the maintenance angular I think gives a nice solid core that you can build on top of now what are some of the features well as mentioned it’s really a full-featured spot framework and it does all kinds of good stuff we have two-way data-binding we have the whole model view controller concept routing of the views I mentioned into the shell pages on through built in routing support and I’ll show how to do that in this video testing was designed right from the beginning so you can build some very robust tests if you’d like which is obviously recommended for Dom manipulation JQ light is built in which is kind of a mini-me of jQuery and if you want to use more advanced Dom stuff you can even use jQuery and they play really nice together angular and jQuery when it comes to data binding we have full support for templates histories built-in we can share code through factories and services and other things and then there’s even more we have the concept of data binding with view models directives I’m going to be talking about in the next section which is a way to teach HTML new tricks validation dynamically injecting different features at runtime through dependency injection and much much more so these are just some of the core features and these features will satisfy some of the others I mentioned when it comes to building a spa now building that from scratch of course could be a challenge not so hard here let’s go ahead and run off to the angular j/s page real fast and I’ll show you how we can get started with it and then in the next section we’ll jump into some of the key starting features so to get started with angularjs just head over to angularjs org and you can notice here I can go to github and I can actually get out to all the scripts there or I can just hit download which is very simple and then there’s two different options here I can go with the stable or the unstable if you want cutting-edge click on unstable I actually use it all the time and had really good luck with that but stable would be the official recommended release if you’re doing a production app and then we can go with the minified uncompressed or a zip version now you also have access to a CDN now the CDN will give you access around the world to kind of regional data centers that in this case Google hosts and then we’d also potentially get some caching benefits some parallelism benefits of browsers be able to load different scripts because they’re different domains and there’s actually some good benefits by going with the CDN if you wanted but for now I’m just going to go with stable and minified and download it and this is just going to give me this angular min j/s you’ll see and now what I’m going to do from here is just plop it into a web page and that’s all I have to do to get started so you’ll notice I’ve already added that in angularjs and we’re ready to go now it’s not going to do much right now but that’s going to lead us in nicely to the next section which will be directives data binding and filters once you added the angularjs script into a page now you’re ready to start using it and the first thing we’re going to talk about is something called directives I’m very very critical and kind of core concept in the angularjs framework from there we’re going to talk about filtering data and we’ll talk about data binding so a lot of cool stuff in this particular section so to start off what’s a directive well I mentioned this earlier a directive is really a way to teach HTML new tricks the web when it first came out was really just designed to display static pages and as we all know it’s become very very dynamic and we’ve dealt with that pretty well I mean jQuery came out many years ago and it provided a way to do it even before then we could do Rob vanilla JavaScript well angular takes it up a whole notch and it allows us to extend HTML very very easily by simply adding attributes elements or comments now here’s an example of using a very basic but very important angular directive notice up here we have ng app now anytime you see ng – that is an angular direct that’s a built-in directive now you can also write custom ones you can get third-party ones and things like that now this particular directive though is very important because the script that’s now loaded down here is going to kick off and this will initialize the angular app and right now we don’t have a particular module associated or any other code but we can still do stuff just by adding ng app so for example this is an example of another directive called ng model now what ng model does is behind the scenes this is going to add a property up in the memory called name into what’s called the scope now if you’ve ever dealt with the concept of a views model we call it a view model and knockout and some other data binding libraries have this concept then what this is really doing behind the scenes is making a empty view model but then filling it with a name property now if I want to write out that value then I can simply come over and add a data binding expression now expressions are really cool because if I wanted to put one plus one and have it write out the result I could do that now you can’t put conditional logic in here because you shouldn’t be putting contact type of conditional logic in your views but out of the box just by adding the ng-app ngmodel with the property as they type into this text box I can actually bind to that value and that provides a very cool little feature so let’s go ahead and look at a demonstration of that so I have a pretty simple webpage here you’ll see I already have angular included and let’s go ahead and start off by saying we’d allow you to type your name we’ll bump this down and we’re just going to do an input type equals text and we’ll leave it at that right now now obviously if I were to run this we’re not going to see much happen we’re just going to have a good old text box and as I type nothing’s going to happen but let’s say that as they type we want to actually write out the value live that they typed well the first thing I need to do is come in and add the ng-app directive so we’ll go ahead and do that we’ll say ng-app now if you feel more comfortable and I do to be real honest adding data – on these then you can do that in fact I could even do data – equals and this would still work and then it will validate against some of the different validators out there so I’ll leave that up to you but you don’t have to put data – if you don’t want now we can come down here I’m going to say ng-model equals name now this is the name of the property I could have said foo I could have said fo fum whatever I wanted but we’re going to do name here and again I’m going to add data – just because it makes me feel more warm and fuzzy and then what I want to do is as they type I would like to bind to the value they type and because we now made behind the scenes a property up in memory called name I can now bind that and we do that using the double brackets here so we’re using kind of the handlebars or mustache type style of data binding if you’ve used those script libraries before and that will simply write out name as we type it now let’s go ahead and run this and you’re going to see that although it won’t be super super impressive it should work for us and that’s all we have to do to get started with angular so we’ll go ahead and type the name and there we go you can see that as I type it automatically binds it and that’s pretty dang easy right so include the ng-app include our data ngmodel bind to that model and this is very primitive if we’re going to go much deeper here but that’s how we can get started now the next thing we can do is we can actually iterate through data so I have another directive here called ng and knit and this isn’t one that I use a lot in real life apps because we’re going to get into controllers and things like that later here in the video but this is going to give me some initialization data that I want to actually bind to and display so we can come in and use another directive in angular called ng repeat so we’re going to say ng repeat and I’m going to give a variable here for each name in the names variable up here write out that name now in this case name is not the same thing as I just demonstrated alright name is just a variable if I were to put food here then I would bind to foo here so this provides a very easy way to automatically duplicate Li so in this case we have what four names and so we would get four L eyes with the name written out automatically so again we have the ng app ng init these are two directives then the third is ng repeat which will simply loop through all the names and then data bind or apply that value into the Li so let’s look an example of adding that real quick so we can come back into our web page and I’m going to do the ng and knit so we’ll do data ng an it equals and we could say names equals and we’ll give it an array here so I’ll just do a couple names and – John Smith and of course John Doe and not to be excluded Jane Doe then we’ll end our simple array so this is something it’s kind of a primitive way to initialize some variables with data now if we come down here let’s add a br with a ul and now what I can do is add an Li and I can do ng repeat so yet another directive and I could say for each name and names and we already have name here so I’m going to call it something different just so it’s not confusing so let’s say for each person named in names then let’s go ahead and bind to person name very easy very simple so we’ve now initialized our data with the ng in it and now we’re going to iterate through the data with the ng repeat and then we simply give it the name it’s going to put each name into that variable and then we bind to it and so if we go ahead and run this you’ll see that we just get a nice little list written out nothing too fancy but it does work and you can see this still works up here as well now when you use directives one of the nice things you can do is go off to the documentation one of the best things you need to know about is go to develop and then go to API reference now in API reference you’re going to see that right at the top we have different directives now there’s a whole bunch of these I’m only showing a very small subset of what’s available but I’ll show some others as we move along here so for instance if we want to know more about ng-repeat we can click on that get to some info get to some different samples of it and look how it works there’s even some tests on how to actually test a repeater and do that type of thing if you’d like as well so there’s a lot of great stuff you can do with directives and we’ll start to see more of these as we move along now the next thing we can do with angular is apply filters so let’s say that as we bind to maybe a customer name and we do that process we want to uppercase it now I could uppercase it in my data model which we get to a little bit later but an easy way to do this type of thing is to apply an angularjs filter so all this will do is this pipe is the separator between the data binding statement and something called a filter now there’s a few filters built in we’ll look at that in the documentation once I get into the demo and run off to the webpage upper case does upper case there’s lower case you can restrict if you had an array and you want to write out that array you can restrict it limit it to say 3 out of maybe 5 whatever it may be and then when it comes to ng-repeat what’s something that or something that’s very cool is in this case we’re going to say for each cust in customers I want to filter by name text so up here we have this ng model which we already looked at as they type the value they type will automatically be applied to first filter down the customers based upon what was typed so if you type da and Dan was in there then it’ll automatically pick me or any other people that start with da or have da in the name then we’re going to take those results and filter again and we’re going to order those results by a name property and I’ll show this in the demonstration coming up now what that will ultimately do is if we had 50 customers and we filter for all those that have you know John in the name then all the John’s would be shown then we would order those by John Doe John Smith and that type of thing so what we’re going to do in this case is once that filtering goes through and we order those will then write out the customer name and the customer city so let’s go ahead and jump into a demonstration of doing it this way so back in our web page I’ve changed the ng in it a little bit instead of just having an array of strings I have an array of objects so you’ll notice that each object has a name and a city property and so I just have three of these in here we have John Doe John Smith and Jane Doe from San Francisco New York and Phoenix so I’m gonna have to change this now name still stays the same but I’m going to go ahead and change that too and let’s just say this was a list of customers so we’ll call it customers we’ll change this to customers then and we’ll change this to will say cust now what I’m going to have to do is write out the cust dot and now we can get into the properties and we can do name here then if I wanted I could come in and put a space and maybe a dash or something and we can do cuss City and now we’re going to data bind to both those properties now I could even come into here just to show you I could even do it this way if I wanted and that would work too but I’m going to go ahead and break these out into two separate data binding statements so now we say for each cust in customers let’s go ahead and write out cust name and cuss City now let me go ahead and let’s make sure this works first and then we’ll apply some filters and it looks like it does you can see the city is now being written out but notice as I type and nothing really happens that’s at least that’s useful or interesting so what I’m going to do is let’s come into here and let’s do a filter by and then whatever they type in the name instead of data binding to it I want to use it as a filter so we’re going to filter by the name property that’s in our model let’s go ahead and see if we can get that working and see what happens here first alright so let’s go ahead and I’ll do Smith here s/m you’ll notice when we did s the s from San Francisco also pulls up because I didn’t tell it anything specific just filter everything and so we have Smith we could do Doe we’ll get both of those we could do New York now with the space there we go and you can see all that works and it’s all alive and then we could even order by now let’s see if we have things in the right area yeah it looks like if I do John and we want to order by say city then obviously Phoenix is out of place with New York so we can come in and do another pipe border bye and now in quotes I give it the property so let’s order by the city then it will bind those remaining customers and order those by city so let’s go ahead and search for the John’s here and we’ll go ahead and do John and notice that New York now appears first and Phoenix follows which of course was not the case in the data so that’s an example of applying not only some data binding and some ng-repeat type of directives but also how we can apply filters and order bys and I could even do upper case if I wanted I could come in and let’s say we wanted this one to be upper case and we wanted the city maybe to be lower case then we could come in and say upper case and lower case filters run it and now what will happen is it’ll automatically do that for us as you can see here notice though as I type we’ll do John it still works still does the filter still filters out and sorts Jane still works and all that so these are some of the built in directives and filters you get out of the box now again if you go off to angularjs org go to API reference and then scroll on down just a little bit you’ll see a whole list of the filters so if I had a number that I want to convert it into a currency with a dollar sign for instance or a pound sign or whatever currency you’re in then I would just say pipe currency and it would automatically do that if I had a date and I want a formatter a certain way you can control that by the way you could do pipe date and there’s a lot of different things you can do here so what’s really nice about angular is not only can we write our own custom directives but I can even write my own custom filters if I want to get a little more advanced with this so a very powerful framework and we’ve only scratched the surface so far so we’re going to do next is start talking about the MVC part of angular the model the view and the controller and see how that all fits in in this section we’re going to talk about views controllers and a really integral part of angular called scope which really another term for that is view model if you’ve used that term before so the way it works in angular is you have a view and that’s what we’ve been doing in the previous section with our directives our filters and our data binding but we don’t want to put all their logic into the view because it’s not very maintainable or testable or all those types of things so instead we’re going to have a special little JavaScript object a container called a controller and the controller will drive things it’s going to control ultimately what data gets bound into the view if the view passes up data to the controller it’ll handle passing off maybe to a service which then updates a back-end data store so the glue between the view and the controller is something called the scope and in angular you’re going to see a lot of variables or objects that start with dollar and so dollar scope represents the scope object now when I say it’s the glue it literally is the thing that ties the controller to the view the view doesn’t have to know about the controller and the controller doesn’t want to know about the view now you’ll see that the view can know about the controller because there’s a directive for that if you’d like to use it but the controller itself to make it testable and keep things loosely coupled modular and all that good stuff shouldn’t know anything about the different view in fact you should be able to make a controller they combine two different views maybe you have a mobile view you have a desktop view or whatever it may be so the scope is this glue between them now for folks that have worked with say knockout or some of the different data binding frameworks out there not just in JavaScript but other desktop modes and things you might have heard the term view model and a view model literally is the model the data for the view well that’s really all the scope is the scope is our view model and it’s the glue between the view and the controller so here’s an example of a really simple controller called oddly enough simple controller now you’ll notice an interesting thing here in the parameter signature you’ll see that we’re passed dollar scope and this is dependency injection that’s built into angularjs now what this is going to do is angular when this controller gets used will automatically inject a scope object in now you’ll see that from there we’re going to take that object and add a property onto it called customers which is simply an array of object literals so we have our same scenario with name and city here now what this controller can do then is serve as the source of the data for the view but the controller again shouldn’t know anything about the view so how would we possibly communicate customers over well that’s why we’re injecting scope scope is going to be that glue between the controller and the view so if we come up to our view up here the scope gets injected and then that scope is going to automatically be bound into the view once the view knows about this controller so here’s what it looks like you’ll notice up here we have an NG controller simple controller well that’ll automatically tie into this when this gets initialized the scope gets passed in but it’s empty well we’re going to add a customers property what’s going to happen then is this controller will be used by the view the controller itself though is it going to be called it’s going to go through the scope now the scope implicitly is available in this case to this entire div from the start of the div to the end of the div now look at the ng-repeat here it’s the same thing I did earlier in the demos but in this case it’s binding to the scopes customers property and so what’s going to happen now is the view because it knows about the controller automatically gets passed the scope now angular does that kind of behind the scenes just happens automatically and we’re then going to control in our view what properties we want to bind to in this case we want to bind to the customers now from here it’s standard data binding like we’ve seen earlier we bind to the name we bind to the city and we’re kind of off and running so let’s take a look at an example of how we can create our custom controller here and tie it in to our view so we already have some data up here but I don’t want to use ng in it in this case it might have come maybe from a back-end database through an ajax call something along those lines so i’m going to get rid of this ng and nip and i’m going to come on down and make my own custom script now keep in mind i’m going to do this in line purely for demo purposes and i generally like to actually break this out into its own script and i’ll show you that a little bit later when we get into a little more real-life type of that but for now let’s make our same function like i showed earlier symbol controller now in the docs you’ll often see it abbreviated you know maybe a c ctrl or something I don’t like to do that in fact I recommend against it I think you should be pretty explicit with your names but you can certainly do it whatever way you’d like so I’m going to spell it out though and we need the scope because again that’s the glue between this particular object our function simple controller and our view that’s going to data bind to it now what I’m going to do is tack onto that scope which right now is just empty a little customers property so we’ll say customers equals and then I’ll just paste in our object literal here now this array of object literals is now going to be bound into the customers which then get filtered and we can do all that good stuff so let me just bump this down so we can see it a little bit better we’ve done now done the same thing but if we run this it’s not going to work because the view doesn’t know about simple controller so one way we can fix this is I could come up maybe to the body and we could say ng-controller equals and we can give it simple controller but you can also have different controllers for different parts of a given page it’s the scope would apply only to where you add that controller so for instance if I came in and only want the scope to apply here then anything in this start and end tag here for the div which would be all these guys is now in that so now we actually have two properties in the scope the ng model is going to add a property into the scope called name and can actually get to that now in the controller by saying scope name and then of course we have customers which will be retrieved through the scope as well so if we run this now that we’ve defined the controller we should see the same exact behavior here in fact it still works all my filter still work I can type the filter to New York look I can type it right and there we go so that’s an example of a simple controller now in a section that will be coming up in the video I’m going to show a different way and when I consider a better way to do it but again we’re trying to walk through the fundamentals step by step on how to use this let’s go back and take a look at some other things you can now do now that you’ve seen data-binding directives filters and controllers and you’ve seen how the scope actually can integrate between a view and a controller it’s now time to really move it up a notch and talk about modularity and some more spa oriented concepts like routes so in this section were going to talk about how to create modules and how modules can actually be used to create other things like controllers routes factories and services and how all this fits together one of the things I really struggled with when I very first started learning angularjs was I didn’t really see the big picture of how everything fit together so let me show you has a really simple diagram this is kind of an oversimplification but I think it breaks it down pretty easily so a module can have something off of it called a config function and it can be used to define different routes now routes again are really important in the spa world because if you have different views and those views need to be loaded into the shell page then we need a way to be able to track what route we’re on and what view that’s associated with and then what controller goes with that view and you know how do we do all that marrying together of these different pieces well when you define a route in angularjs you can define two things on that route two of the key things I should say one of those is the view so what view when that route such as if you did slash orders then maybe you go to orders partial dot HTML or orders fragment or whatever you want to call it and then that view needs a controller well instead of hard-coding the controller into the view which works and you can certainly do it I showed that in the previous section we can actually go in and do this on our own through the route and this is the way I would definitely recommend to do it now a given controller would then of course have access to the scope object which then the view will bind to we talked about that a little bit earlier and then controllers rather than having all the functionality to get the data and update data and perform crud operations and things like that in a more real life application they’ll call out two factories or I put a star there because you might have services providers or even values you want to get there’s a lot of different ways you can access data even resources now on the views we of course then have directives and filters and those types of things now there’s even more to the overall picture but this is one of those things I wish I would have seen this right up front because I would have kind of instantly had that light bulb moment where the light goes on and go okay so you define a route or route has a control or interview and then the controller can load data from factories and services and things so what we’re going to do is talk about each of these individual pieces and how in a single page application you could actually define routes and use those so the first thing to talk about is although I created the controller in some previous demos right in the view that’s not the recommended way to do it keep in mind you might actually have different views you might have mobile view maybe you have one specific to iPad or surface or something like that and then maybe you have one for desktops it’s very possible so what we need to do is when we define our ng app earlier we didn’t assign it to anything and so what that did is just implicitly created a scope behind the scenes and it still worked you saw with the data binding and the filters and all that good stuff but we now want to kind of graduate to a more modular application an angular is very very modular if you take advantage of it so there is a module object and I’ll show you how to create that you literally just say angular dot module and off of the module you can configure the routes create custom filters custom directives you can get data from different sources using factories services providers or values and then you can even create controllers using the module so you can think of a module is really just an object container and then in that container you can have all these different things that you see here now what’s important is once the module is given a name that’s when you’re going to go into ng app and whatever the module name is that’s what’s going to go here so they could have just as easily called it ng module but I actually like ng app makes sense I think and it really just means hey what’s the name of the module that you’ve defined in JavaScript now here’s what it looks like it’s really really simple to create a module so once you’ve referenced the angular script you’re going to have access to an angular object now off of this object can get to all kinds of good stuff you can get to the JQ Lite functionality for jquery dom type manipulation but you can also get as you see here to the module so in this example you can see i called my module demo app and then you might wonder what exactly is the empty array for and i know i did the first time i saw it and the answer is this is where dependency injection comes in because your module might actually rely on other modules to get data so here’s an example of that we have demo app again we say hey angular create me a module called demo app and then I need to rely on another module in this case I just called it helper module now this would be some other JavaScript file that you might reference then has another angular module in the quotes here you would see helper module and then it might have maybe just filters and directives in it and that’s all it has well what i’m doing is telling angular go find that module go look it up wherever it is and inject it in and make it available to my controllers and directives and filters and factories and all that stuff that this particular module might have so it’s a very powerful feature if you’ve ever used require j/s or something that’s more modular based then this will kind of ring home with you I think if you haven’t though it’s just a very flexible way to at runtime dynamically include other modules now here’s an example of how we can use that module to actually create a controller and this is the more I’d say official way to create a controller so you’ll notice up top we have our demo app and we just create that the same way in this case we’re saying it has no dependencies empty array now what we’re going to do with that module though is we’re going to use it to define a controller and we’re going to call this as it shows simple controller and notice that I just have an anonymous function here nested inside so the second parameter here is okay so what is the controller object well a function of course is an object in JavaScript so we’re going to inject in the scope and then from there I do the same exact thing we did before now the key is once I’ve defined this I then need to go in and make sure that my ng app points up to demo app in the strings and then I can even in the view do ng-controller like I did earlier is simple controller now once we get to routes here I’m going to show you how even that can change but let’s go ahead and take a look at a quick demonstration of fixing up our previous function and going with the more modular approach okay so we have our simple controller here but this isn’t really modular it’s just kind of a function out there and so what I’m going to do is come in here and let’s just call this demo app and we’ll say angular dot module and we’re going to go ahead and give it demo app now I can doesn’t have to be the same name as my variable but I’m going to go ahead and do that and again the empty brackets here for the array mean I have no dependencies that I need to worry about now I’m going to go ahead and leave this guy as is to show you how this works and then I’ll change it so I’m going to come down now and we can now take our module and say let’s add a and notice for the C’s we have config constructor controller so we’re going to do a controller and let’s name it simple controller now what I’m going to do is actually give it simple controller here because I could give an anonymous function or I could actually create the controller outside and then just assign it in and that would work absolutely fine now this already knows about simple controller but ng-app doesn’t know about demo app so let’s go ahead and fix that by saying demo app all right so now we’re ready to go now this is a little more module or modular I should say so first off let me make sure this runs and then I’ll show you the kind of anonymous way to do it and you see it still works so we can filter and do all that okay now the next piece of this is you may not even want to keep it outside now in some cases you may and I’ll show you one more trick to wrap up in a second here but I’m just going to do an anonymous function right in my simple controller because the ng app demo app here knows about this it then knows about the controller so simple control of the string is known here and now this should run exactly the same way really shouldn’t be any difference at all you can see that loads in great there all right so that’s an example of actually creating a module with a controller now another cool trick you can do and this can be useful in depends on how you like to write your javascript I think is I’m going to wipe out all of this and I’m going to come in and just create a variable called controllers and just give it a kind of empty object literal to start here then we’re going to say controllers dot simple controller give it the same name as what I have before equals and then I’m going to give it the function then we’ll kind of do a semicolon okay now I could do multiples of these if I had multiple controllers I could say controllers you know controller 2 equals a function now I’ll go ahead and leave it at 1 but now what I can do is I can come in and just pass controllers now because this is named simple controller it’s a property obviously off of the object this will still be able to find it and so by doing this technique some people like this better some people don’t we can come in and you see we get the same exact feature still works the same so there’s three ways you could do it so one way is you could create an external function and just pass the function in with the controller name the second way is you could actually pass a name as a string with an anonymous function and then the third way is we could come in and do this type of technique and some people like this because now I can it’s a little easier to prototype things if I needed to and that type of stuff so that’s an example of using a module with a controller now once you’ve defined a module and a controller at some point if you’re building a single-page application you’re going to need routes because we need to load different views into our shell page now this would be an example of four different routes so we have when view one is clicked maybe there’s a link and that’s the link to it is something like slash view one typically you’ll have a hash but you’ll see that coming up that will load that view and then when they click on a link that has view two in the path then that would load view two but it’s not going to reload the whole shell page angular will only load the piece that you want it so there’s two kind of ways you can load it first off the view could be embedded as a script template in the actual shell page and then we could just tell angular hey the template ID to load or the it’s kind of like saying the view ID is you know X the second way is back up on the server you might actually have all these views and I like to call them partials because they’re part of a page and you could tell angular the template URL for what I want to load and then you give it the URL to the server and I’m going to show that coming up here now this is a really important feature because we want to be able to go in and load different partials or fragments and then that will be kind of how our spa works so what we’re going to do is use that config that I showed earlier so we have angular module is demo app no dependencies and now what I’m going to do is configure the module with some routes now another object that’s available in angular is called the route provider as you see here and it’s kind of like the scope it’s injected in dynamically just by defining dollar route provider as your parameter so in this case we’re going to say hey the route provider when the route is just slash the route we want to use simple controller with view one HTML when the route is slash partial to we want to use same controller in this case but you could certainly do a different one with template URL of you two now the template URL you might you know give it a folder where these partials live and I actually like to call my folder partials but you don’t have to and then otherwise if it doesn’t meet any of those routes we’re going to redirect back to the route which ultimately goes back up to here and we would load view one so this is a really cool thing and once it kind of clicks and you have that light bulb moment this is really the magic to glue a view to a controller so that scope gets passed and we can do the data binding and the directive is appropriately so let’s go fix up what we have so far and let’s convert this into more of a spa type of application so far in our application we’ve created a module and we’ve assigned that to our ng app so it knows how to get to that and then that module has this simple controller and so now we have the view knowing about simple controller and that’s fine and it works but that can quickly get out of control and really have some code duplication here when you really don’t need it so let’s go ahead and on our module let’s add in our config so we can say demo app dot config and now in here we can give it a new route or multiple routes so I’m just going to paste in some code for this to save a little typing and so when we have demo app config we have our route provider and the route provider says hey when we’re just kind of at the route for our route then use simple controller and go to partials view one HTML now partials view on HTML is right here and you’ll see it’s very very simple we have view 1 we have our same filtering and our same looping that we did earlier so really nothing different there and then we also have view 2 it says view 2 and we’re just going to kind of pretend we filter by city instead so nothing real fancy there just enough to make it a little bit different now they’re both going to use the same controller in this case but in a real life app that may or may not be the case certainly I offer that most of the time I have kind of a one-to-one relationship between controllers but it depends on how much reuse you can get out of one but in this case we’re just going to use simple controller which has our customers now what I want to do though is let’s come into view one and let’s fix it up just a little bit and I want to make it so that under each customer hair let’s just add a br we can enter a customer name and then I’m just going to paste this into here and we’ll go ahead and let’s separate those and then I also want to come in and make it so you can enter a customer city and so we’ll say city right here and we’ll change these guys now we already have name that’s our filter now normally I like to do filter dot name and then change this to filter name and that keeps it really clear and then on here what I’m going to do is I’m going to call this customer dot name or just to make it really obvious let’s say new customer name and what that will do is it’s going to create a new property on the scope that then has a sub property called name so we’ll say new customer dot name and order actually city in this case and then the final thing we need is a button we haven’t seen how to interact with our controller yet so let’s go ahead and take a look so I’m going to add just a standard good old button and another directive we can use is called ng click now if you go to the documentation for angular there are several different options here ng click is just one of them and I’m going to call add customer and then we’ll call this add customer pretty obvious so once this view loads once we get that working we should be able to add a customer in now obviously in our controller we need to be able to handle that so let’s go back to our controller and because we call this add customer and because the view binds to the scope then we need to say scope dot add customer and assign that to a function now you’ll notice that I’m not having to pass in the data I don’t even have to look at the text boxes because the scope already has that ok we can get to everything through this and so what I’m going to do is we’re going to say scope customers dot push and let’s push in a new item into the array so we’ll say name is scope dot or new customer name so let me add the scope dot here and let’s go ahead and wrap this down so you can see it better and then a comma and we’ll do city is scope dot new customer dot city and then end our object literal there and we’re off and running that’s it that’s all we have to do to make this work and it makes it really easy to now interact back from the view into the controller but yet this doesn’t even know about the controller you’ll notice there’s no controller definition here that’s going to happen through the route that will then call our add customer and it’ll simply show up in our list our allies that we have okay so that’s kind of one thing I wanted to show and now that we have the routes we’re kind of ready to go but we have a little bit more work so what I’m going to do is this little using direct is with data binding page here I’m going to pretty much kill off most of this so we’re going to get rid of all that I don’t need the controller anymore because the views we’ll just use those and what I’m going to do is add a special directive called ng view now normally there’s a couple ways you can do this you might see it like this ng view as a tag you could do that but I kind of feel more comfortable doing div and then I can do my data – ng view and normally you just leave it like that but I’m going to go ahead and add it equals just because most people are used to that with a HTML 5 data – attributes now this represents the placeholder for the views okay so now when my routes kick in and we go to a default route what will happen is the partials view on HTML is going to be married to the controller that’s then going to be injected dynamically into this div and so I don’t have to write the Dom code to do that it’s just going to magically happen behind the scenes and now we’re starting to get into a spa type of concept here so if we go up just as a review our ng app has demo app we now have our ng view which represents our place holder we have our module with our config and our routes and assuming I named everything okay we should be all right here let’s say that this is a view – and we’re going to reference that in just a second and then we have our controller where we can bind customers then we provide a way to add to it so what I’m going to do real quick though is I realize I didn’t add a link here so let’s say at the bottom that we had a hyperlink and let’s say when this is clicked we want to go to that route and we’ll say view – on this so when you click it this will direct angular to actually kick in the router and then that router of course will take us over to view – so it’ll be pretty standard here okay so now we’ve really cleaned this guy up now the last thing I would do which I’ll show you in the more realistic app is I would take all this out and make separate scripts and load those but we’ll go ahead and leave or leave it here for demo sake alright so now that view one is here notice I don’t have to put ng controller because it’s going to map that up automatically for both views so let’s give it a shot and we’ll see if there’s any errors or typos here and you can see that view 1 has now loaded here now I actually tweak the route just a little bit just to show you I had a slash which I could do but I also wanted to show that instead of having just a slash therefore the route I’m going to redirect a view 1 or if you prefer you could just do this and that would be the default view so either way would work I’ll go ahead and we’ll put view 1 back in here now that automatically loads it now here’s what’s really cool not only does this manage our routing for us and as this load you’re going to see that it still works and you can see our context is bound we get our customers I can still filter and do all that I can come in and let’s go ahead and add a customer here so watch our list we’ll do add customer and there we go notice it’s sort of it and now when I click on view to watch the path up here what it’s going to do is automatically navigate to view 2 again I can still filter because these both have the same controller and therefore the same scope but when I hit back it’s actually going to go back to view 1 and I can go back and forward and angular is automatically managing that history for me which is a really really nice feature to have available so that’s an example of we can actually come in to find a module to find some routes and then go in and on those routes hook up a controller to view and now angular will automatically load those routes for us now that you’ve seen how to create modules and how modules can then be used to define routes and also to work with controllers we’re going to wrap up by talking about some reuse concepts so another feature of angularjs is the ability to encapsulate data functionality into factories services providers or little value providers now I’m going to focus on factories here but all three of the top ones shown here factory services and providers they allow us to encapsulate common functionality so for instance if I had to go get customers and I need those customers in multiple controllers well then I wouldn’t want to hard-code that data in each controller it just one makes sense and it’d be a lot of duplication there so instead what I’ll do is I’ll move that code out to a factory service or provider now the difference between the three is just the way in which they create the object that goes and gets the data and that’s really all there is to it with a factory you actually create an object inside of the factory and return it with the service you actually just have a standard function that uses the this keyword to define functions and with the provider there’s a dollar get function you define and it can be used to get the object that returns the data a value is just a way to get a simple for instance config value so a simple example you’ll see of this on the angular site is you might just want the version of a particular script and so you’d have a name value pair where the name of the value may be might be version and then the value would be say 1.4 so I’m not going to cover all those here but I am going to cover factories so let’s take a look at how we can use a module to define a factory so in this example you’ll see that down below I have the controller that we looked at earlier and notice that instead of hard-coding the customers in here or if it was an ajax call instead of hard-coding that call into the controller I’m going to use our module up here to define a factory now in this case you’ll see I’m actually using chaining so the module is defined and then instead of putting a semicolon we just chained factory then once that’s done we chain controller you don’t have to do that but that is certainly an option so in this Factory we’re going to give it a name and what the factory is going to do in this case is provide a way to get customers so let’s assume we have some customers variable up here and what we want to do is create a factory object define a method on it that returns this customer variable now in a real life app this get customers might actually go out and make an async call now that async called data returns and then returns it to the controller or controllers that needs it now what’s really cool about factory’s services and providers is that once you defined it you can then inject it very easily as a parameter into something like a controller or even another factor if you want it so a factory could rely on another factory so if we come down to our controller here you’ll see that simple controller does our standard scope but notice that the second parameter is simple factory well that little name matches up there on purpose what angularjs is going to do at runtime is dynamically inject this into the controller so now I’ll have access to this factory object that’s returned out of this function and now I can say factory dot get customers and so this provides the Pennsy injection and it provides a way that I now have a centralized place to get customer data order data or whatever maybe and in a real life app you certainly may have several different factories in the application itself so let’s jump into a demo and I’m going to convert the customers we had in our controller before and move those out into just a really simple factory to help get you started earlier I showed how we can create a module define our routes and then have a controller in that module called simple controller but you’ll notice that the customers are hard-coded now in a real life app you actually may have something hard-coded I suppose but in general we’re probably going to go off to a server or service to actually go and get the data via Ajax or some other type of technique maybe even WebSockets so what I’m going to do is move these customers out we don’t want to hard-code these obviously and we can kind of pretend that we’re going to go call a service so I’m just going to go ahead and say that customers is right now just an empty array now what I’m going to do is under the routes here I’m going to define a factory and you’ll notice as I type factory it shows up in the nice intellisense I could also do a service or a provider so there’s three different options for doing this and again they all differ just in how they create and return the object that serves up the data but a factory I think is really easy to understand and get started with we’re going to go ahead and I’m going to call this simple factory and we’re going to give it our function now I’m going to do an empty function here but keep in mind with angular as for instance scope is dynamically injected we can also inject other things if I wanted to make an AJAX call then I can tell angular inject in the angular HTTP object and then I could do HTTP get put post and delete type of calls to for instance restful api s now in this case i’m not going to do that we’re going to keep it really kind of fundamental and simple but i’m going to come in and define some customers and I’m just going to assign those customers we had earlier let’s make that customers now what I’m going to do is with a factory you create an object tack on some functions to it and then return that object out of the function with the service you don’t create an object the function is the object you just tack on using this keyword sum function so I’ll kind of show you the difference here so we’re going to come in and say factory equals and just create an empty object here now what I’m going to do is factory dot and let’s call it get customers and get customers is simply going to come in and do nothing more than and actually I didn’t want to do it that way I’m going to do a function here and I’m just going to return customers now had I passed in an HTTP object or if you’re using jQuery or whatever it may be I can make the Ajax call right here and then once it comes back we could return a promise and get into all that fun stuff with async calls but in this case where is going to return something really simple so now our Factory has a get customers we might also have factory dots you know maybe put customer if we wanted if we want to do updates or post customer whatever you want to call it and maybe this would take our actual customer object and then we would have code in here to actually do something with it all right in this case though we’ll just stick with the customers now regardless of whatever you put on with a factory once you create the factory object simply return it now if this were set a set service right here then instead of factory dot this becomes the factory all right this function here so I would just say this dot get customers and this dot and then that factory itself would be in the function but I kind of like factories because you actually control the object itself and you don’t really have to use the this keyword and things all right so we’re kind of ready to go here we now have a factory that returns some in this case hard-coded customers now we need to fill them so how do we do that well I need to first get a reference up here to the factory now all you do is you take the name so I put that my clipboard and I’ll just put comma and then you put that name it and what angular will do is go look up that factory automatically and inject it in for us that’s all you have to do is just put the name so it’s very modular now here I could say simple factory dot get customers but let’s say that we had kind of have a whole initialization routine we want to do so I usually will do something like this I’ll just make kind of a private function here we’ll call it a knit and I’ll say scope dot customers equals that and then all we have to do is call in it now you don’t have to do it that way at all I just prefer all my initialization for my data routines or factory calls to be in kind of one nice little place so I might have multiple lines in here they kind of kick off the process to get the initial maybe lookup data for instance for dropdowns that my controller passes down to my view so that’s kind of why I like to do it this way okay now other than this there’s really nothing in the view that’s going to change because the view doesn’t even know about any of this it just knows about ultimately the controller and the scope and the way we did our views it really doesn’t even know about the controller because it’s dynamically assigned so let’s go ahead and run this and we should see that our customers actually load up and there they are they’re now coming from the factory though we can go to view – these are also coming from the factory so now we’re not having to duplicate data assuming we did have two controllers here we have them all in one nice little reusable factory that is an example of getting started with factories in angularjs now that you’ve seen the core components involved with angularjs I’m going to wrap up with just a real quick demo that I put together and this was put together just over a few hours that demonstrates some of these features in action so let me first pull up the application and this is just a real little spa app single page application that shows some different customers so I can come in and add in customers if I’d like and we can go ahead and add that and you’ll see it alphabetizes them and all that so I go here I can remove it back out and I can then click on order so we’ll go to Lea Carol that’ll take me into a separate page a separate view actually but it didn’t reload the whole shell page go back to customers and go over to orders and see all the customer orders here and this is just using a couple things so first off we have angularjs of course and it’s also using a little bit jQuery because I’m doing bootstrap so we have bootstrap jQuery and angular now I’m not using jQuery for much of really anything just a few basic things so that we can work with some of the bootstrap stuff I’m doing all right so this particular app this is the shell page and you can see that we have some bootstrap up top as well as my Styles we have my navigation and here is the view now I did a little custom directive and this is an animated view that slides things in now starting with version and I put a comment here about it 1 1/4 of angular the ability to animate your views as they get put in will automatically come out of the box you just have to supply some CSS styles and that’ll kick in but this also shows how to do a directive so if you’re interested I show how to write a custom directive there and all I did was took what angularjs already had for the ng view and just tweaked it to use the jQuery animation features now from there moving on down you’ll notice that I just have some scripts so the only core what I’d call library scripts are angular and jQuery we then have a bootstrap for UI scripts and then here’s my custom now I put all the controllers just in one file to keep it real simple here but you could certainly break these out and you can see that everything is in an app folder so if we go up to you’ll see controllers directives partials services and then app J s you’re going to see is kind of what kicks everything off so let’s start there so app j s is where we come in and define our module so you can see I have customers app doesn’t have any dependencies and then I have my different routes for my customers my customer orders and my order screen you can even see I’m demonstrating how to pass parameters up here on the URL using a route parameter so that’s in here as well if you’re interested so that’s kind of the default configuration that you can see and then there’s a little bit of details here about how I kind of like to break things up in general now if we come over to the controllers this is where I have all my controllers here and so you can see I have customers controller we have customers orders controller or customer orders controller and we should have an orders controller down here and then I have just a really simple one for a nav controller now these are all built off of the modules so they’re part of it and they’re just they inject in a few things that the app needs here including a factory and so this is all pretty standard stuff that you’ve already seen the the factory or in this case the service I wanted to show both ways of doing it so in the demos I showed a factory here’s an example of a service really the same thing except for as I mentioned earlier you use the this keyword to define your different functions here you can see now in this case the data is hard-coded so it’s not making an HS call but this would give you the foundation for building a service or you could do a factory either one I actually tend to prefer factories for some reason myself but this one I decide to try services out my views are in a little partials folder and this is just going to be the little simple parts that get injected in to the animated view so these are my kind of spa sub pages if you will that get injected in and we bind to the scope you can see some data binding hair so there’s quite a bit more to that I could walk through here but this is something I wanted to show real quick just to show a simple example of getting started with angularjs and how you can use it to axe interact do data-binding do factories controllers and all that fun type of stuff well that is the end I hope that by watching this video you have a really good solid feel for the different pieces of angular and the power that really does offer I’m really excited about the framework we’re building some different apps using it and liking the overall process flow and modularity it provides that’s kind of a summary here it really is a spa framework but it depends on what you’re doing if you just want it for data binding with the injection you could do that if you want it as well some of the key features as a review we talked about directives and filters so directives enhancer HTML talked about things like ng repeat ng app ng-controller ng in it there’s many others and then we talked about how we can filter data and also how we can do to a data binding from there I showed you how we can hook up views of controllers and that the really the glue between those as far as the data binding goes is the scope and the scope is really another word for a view model that some of you might be familiar with and then finally we wrapped up with modules and routes and I also threw in factories at the end there to show how we can first off define a container that container can then have one or more routes in it one or more controllers different factories and then we can link that app or module into our main shell view using the ng app directive so that’s a wrap on the content that I had planned in the 60 minute since I know I’m over that now as far as other resources out there that I’d recommend yet you take a look at there are definitely a lot of cool things out there and one of those will be the sample code and this will just have some of the basic samples I ran through as well as the app I showed at the end and so you can go to slash angularjs demos now aside from that a lot of great stuff out there that I don’t have time to go into we we did visit angularjs but built with angularjs has a lot of samples of angular in action and then if you wanted to get some different plugins whether it’s bootstrap or jQuery there’s some sites out there with some directives that’ll make this really easy to integrate now as far as learning I do a lot of work with a site and company called Pluralsight awesome company very cool people run it and this is online video training now at the time I film this or else I would have listed them there’s not any angular courses but they are being worked on as we speak my good friends Jim Cooper and Joe Eames are working on a angularjs fundamentals course that will be up there shortly and then I’m currently working with scott allen developer extraordinary scott allen on an end-to-end angular course that’ll show you the whole process with a real app and how that all works so feel free to check that out if you’re interested in the meantime feel free to check out some of my posts at weblog ESPN SSD while lean or get in touch via Twitter I appreciate your time and watching the video