Youtube Transcript.
0:01so you’ve heard about anger JS but you’re not exactly sure how to get
0:05started with it
0:06all this videos for you anger GS fundamentals and sixty
0:10ish minutes is gonna go through all the key fundamentals you need to know
0:13about the angular JS pa framework mines de Wallen
0:17and I’ll be watching you through some the fundamental some the key things I
0:21really like
0:22and my blog can be found here at weblog studies Peter nestlé’s Diwali
0:26and if you’re on Twitter feel free to follow me at Dan law lean keep in touch
0:30that way
0:30so you get started we’re gonna be folksy not 100 percent on anger JS
0:35and the Devils I’m gonna be shown throughout this can be found here
0:39tiny URL dot com slash angler JS demos
0:42now have some real simple da mostest are things out and then we’ll build up
0:46and then by the end what kinda put all the main pieces together
0:50I’m not going to have time in 60 ish minutes to go through an entire
0:53full-scale Lana business typeof ap
0:57but you can absolutely build those types aP’s
1:00with anger JS
1:04now here new Cingular and you have a really read much about it
1:07you can go to angler JS tot org to get all the details this includes
1:11documentation
1:12demonstrations tutorials all that fun stuff
1:16now the first time I went I was really excited about I’d heard about it from a
1:20friend
1:20and I have a really been on the spot single-page application bandwagon
1:25because I just filled it was too much of a mass
1:27there’s too many scripts involved and you have all these different things need
1:31to deal with so
1:32as pretty sad but angler because it really is you’ll see kinda spa framework
1:37and the first time I went looked at the docs I have to say
1:40non love light bulbs when of and so it felt a little bit strange
1:45in the more I looked into it got little bit stranger in parts
1:48and I saw these different words like trance clusion in scope and directive
1:53and I said what the heck is this
1:55but I was immature trans clusion was an actual word but
1:59turns out it is so I kinda felt like this guy
2:02if I will say shed a tear but
2:05I was a little frustrated because Avenue in javascript since the 90’s
2:09and use a pick up on stuff pretty quickly so I figured well
2:12maybe I’m stupid well it turns out I just wasn’t thinking about it the right
2:17way
2:18and how they approach did and once I took a step back
2:22can relax a little bit and say hey this campy Azhar’s I’m making it
2:27chilled out a little I realize while this is
2:31awesome in anger JS truly in my opinion
2:34isn’t awesome framework and so a lot libels one of the ones that start
2:38happening
2:39although kinda pieces fit in and made total sense to me
2:42so I think it’s like anything with a new framework sometimes you catch it
2:46you know maybe instantly when you’re learning and other times you don’t with
2:49this it was just more over matter
2:51I hadn’t taken the time to be real honest to research the different pieces
2:55and I was kinda learning little tidbits here and there
2:59so wanna do throughout this video is walk you through all the key things that
3:03I wish
3:04I would’ve understand more up front and hopefully
3:08jumpstart your anger JS development process
3:11once you get done you can have super powers just like this kid here
3:15and maybe enough force powers but super spa powers will say single-page
3:19application powers
3:22now the agenda is we’re gonna start off with some the key features anger JS
3:26offers and I’ll
3:27can introduce the challenge with right inspires from scratch
3:31anyone that knows me knows I do not recommend right in there from scratch
3:35I just think it is in the long term when it comes to maintenance
3:38a nightmare there’s too many scripts involved in I’m worried about version
3:42dependencies in scripts changing and things breaking
3:46sorry to talk about that and how angular addresses a from never gonna get started
3:50with some the fundamental features the angler provides
3:53there are going to some others key features that you really gotta start off
3:57with Canada ABC’s of angular if you will so directors filters
4:00and to a data binding which is just awesome
4:03now I’m a big fan some the other scripts out there like knockout JS as an example
4:08but you’re gonna see that angular is a true framework it’s not just a library
4:12that does
4:13maybe one or two things it actually into a lot of different things
4:17once we get through the directors filters and databinding we’re gonna talk
4:20about
4:20views controllers and scope and then we’ll wrap up with
4:24modules and we’ll talk about how all this other stuff it’s in the modules
4:28and then we’ll get into some spark concepts like routes and even factories
4:33for
4:33sharing data and reusing data
4:38so how do you get started
4:39Miller JS in what you want to get started I mean what features does it
4:43offer their that compelling
4:45or going to talk about that in this particular section so first off a single
4:49page application is one in which we have a shell page
4:52and we can load multiple views into that so
4:55a traditional app as you know you took the blinken well it loads everything
5:00again
5:00and so is not very efficient the band with especially in the mobile world
5:04and with the spa we can load the initial content
5:08up from and then the different views or the
5:11little kinda many webpages can be loaded on the fly
5:14an embedded into the shell page now angler JS
5:18is you’re gonna see a very good spa framework but it’s not just for that you
5:22don’t have to load these dynamic views with it
5:24in fact if you wanted you could just use it for some other cool separation of
5:29code that I’ll show ya and databinding
5:31but I will focus on sparse here now the children billion spas from scratches
5:36there’s a lot of different issues to deal with da manipulation in history and
5:40had a year dynamically load modules in
5:42deal with promises when you make a sink calls and things like that
5:46routing becomes a huge issue because you have to have some way to track
5:50where are we and where we going well
5:53all this type of stuff you’re gonna see is built in the angular now we could
5:56certainly do all this for different scripts: out there we could you Sammy JS
5:59and jQuery in history JS and require JS in
6:03for a Jess we could do to you and so a lot of different options
6:06but angular gonna see provides a lot of cool features
6:10it’s one core library that
6:14I really like that concert because I don’t have to rely on
6:18a million other scripts and worried about those different script versions
6:22play nicely
6:23into the future if you work on a development team then mean it should be
6:27some type of a goal for your special if you do the maintenance
6:31I’ll angular i think is a nice solid core that you can bill
6:34on top of now what are some other features well as mention it’s really a
6:39full-featured spa framework and it does all kinds a good stuff we have to weigh
6:43databinding
6:44we have the whole model view controller concept
6:47rowdy Nov the views I mention into the shell pages is done through
6:52built in routing support not sure how to do that in this video
6:55testing was designed right from the beginning so you can build some very
6:59robust tests if you’d like
7:01obviously recommended for Dominic relation
7:04JQ light is built in which can have a mini me if jQuery
7:08and if you want to use more advanced Dom stuff you can even use jQuery and they
7:12play
7:13really nice together angular and jQuery when it comes to data binding we have
7:18full support for templates
7:19histories built-in we can share code through factories and services and other
7:24things
7:24and then there’s even more we have the concept love databinding with view
7:28models
7:29directives I’m gonna be talking about in the next section which is a way to teach
7:32a steel mill new tricks
7:34validation dynamically injecting different features
7:38at runtime through the Pens injection and much much more so these are just
7:42some other core features
7:44and these features will satisfy some of the others I mentioned
7:48when it comes to go in the spa now billion up from scratch a course to be a
7:52challenge
7:53not so hard here let’s go ahead run off to the angler
7:57JS page real fast and I’ll show you how we get started with it
8:00and then in the next section will jump in the summit he starting features
8:06so to guest star with anger JS just head over to
8:09angler JS .org and you can notice here I can go to get have
8:13and I can actually get out to all the scripts there mortgages hit download
8:16which is very simple
8:17menace two different options here I can go with the stable or the unstable if
8:21you want cutting-edge
8:22quite an unstable I actually use it all the time in
8:25had really good luck with that but stable would be the official
8:29recommended release if we do our production am and then we can go with a
8:33min if I’d on compressed or zipped version A also have access to a CDN
8:37at a CDN will give you access around the world to
8:41kinda regional data centers that in this case Google hoss and we’d also
8:44potentially get some cash in benefits
8:46awesome parallelism benefits above browsers be on the low different scripts
8:51because they’re different domains in
8:52sexy some good benefits by going with the CDN if you wanted but for now
8:56I’m just gonna go stable and me to find and download it
8:59and this is just gonna give me this angular man
9:03JS you’ll see and now I’m gonna do from here
9:07is just plop into a web page and that’s all I have to get started so
9:10you’ll notice I’ve already added that in angler that mean that JS
9:14and you’re ready to go up now sniper do much right now
9:18but that’s going to lead us in nicely to the next section which would be
9:21directives
9:22databinding and filters
9:27want to be added the angler JS script into a page now you’re ready to start
9:30using it
9:31and the first thing we talk about is something called directive some very
9:35very critical and panic or
9:37concept in the angler JS framework from ever gonna talk about filtering data
9:42and we’ll talk about the turbine so a lot of cool stuff in this particular
9:46section to start off with a directive
9:49well I mention this earlier a directive is really
9:52a way to teach a steam on new tricks the web when it first came out was really
9:56just designed a
9:57display static pages and as we all know it’s become very very dynamic in
10:02we’ve dealt with that pretty well mean jQuery came out many years ago on
10:05it provided a way to do it even before then we could do robin or JavaScript
10:09well
10:10angular takes it up a whole not and allows us to extend HTML
10:14very very easily by simply adding attributes elements or comments
10:18now here’s an example have you seen a very basic but very important
10:23angular directive notice up here we have NG
10:27ap now in Tennessee NG dash that is an angular
10:31director that’s a build interactive now you can also write custom ones you get
10:34third party ones and things like that
10:36now this particular directive those very important because
10:40the script it’s now loaded down here is gonna kick off
10:43and this will and this lies the angular ap and right now we don’t have
10:47a particular module associated or any other code
10:51but we can still do stuff just by adding a gf so for example
10:57is an example for another directive called energy model
11:01LNG model does is behind the scenes this again at a property
11:05up in the memory called name into what’s called
11:08the scope now if you’ve ever dealt with the concept Aviv use
11:12model called a view model and knock out some other data binding libraries have
11:16this concept then what this is really doing behind the scenes is
11:20Makeen a Mt view model but then fill in a
11:24with the name property now if I wanna ride out that value
11:28then I can simply come over and added a bind expression
11:31now expressions are really cool because I wanted to put one plus one
11:35and have it right out the result I could do that they can’t put conditional logic
11:39in here because
11:40you should be putting conduct type a conditional logic in your views
11:43but out the box just by adding the NG ap
11:47Angie model with the property as the typing this text box
11:52I can actually bind to that value and that provides a very cool little
11:56features so let’s go ahead and look at a demonstration of that
12:01so I have a pretty simple web page here you’ll see I already have a Mueller
12:04included
12:05and let’s go ahead and start off by saying we’d allow you to type your name
12:08more pompous down and we’re just gonna do it input
12:13tie people’s texts and we’ll leave it at that right now
12:17now obviously if I were to run this we’re not gonna see much happen we’re
12:21just gonna have a
12:22Google text box and as I type nothing’s gonna happen blessed as they type
12:26we were actually write out the value live that they typed
12:29the first and need to do is come in and add the NG ap corrective
12:33so go ahead and do that will say NG ap
12:37now if you feel more comfortable and I
12:40do to be real honest adding data dash on these then you can do that in fact I
12:44could even do
12:45did ash equals and this would still work and then it will validate again some
12:49other different validators out there
12:51so leave that up to you but you don’t have to put the dash if you don’t wanna
12:54now we can come down here I’m gonna say in GE
12:58model equals name now this is the name of the property I coulda said flu I
13:03coulda said fo fum whatever I wanted but
13:06for a new name here and again I’m gonna add a dash
13:09because it makes me feel more warm and fuzzy and then what I wanna do is as the
13:14type
13:14I would like to buy into the value they type and because we now made behind the
13:19scenes a property up in memory card name
13:21I can now buy into that and we do that using the
13:24double brackets here so were using kind of the handlebars or mustache type style
13:29love databinding views those
13:31script liar as before and I’ll simply write out name
13:35as we type now let’s go ahead and run this
13:39and you’re gonna see that although won’t be super super impressive
13:43it should work force and thats all we have to do to get started with angular
13:47so go ahead and type the name and there we go
13:52you can see that as I type it automatically finds it and that’s pretty
13:56dang easy
13:56right so include the NGF include our data in G model
14:00buy into that model and this is a very primitive for gonna go much deeper here
14:04but that’s how we can get started
14:08now the next thing we can do is we can actually iterate through data so I have
14:12another directive here
14:13called in GA minutes and this is the one that I use a lot in real life aP’s
14:18because we’re gonna get in the controllers and things like that later
14:21here in the video but
14:22is gonna give me some initialization data that I want to actually buy into
14:26and display so we can come in
14:28and use another directive in angular called NG
14:32repeats so we’re gonna say NG repeat
14:35and I’m gonna give a variable here for each name
14:39in the names variable appear right out that name now in this case name is not
14:45the same thing as I just demonstrated right name is just a very well if I want
14:48to put food here
14:49then I would bind the food here so this provides a very easy way to
14:54automatically duplicate li’s so in this case we have
14:57what for names and so we would give for Li’s
15:01with the name right now automatically so again we have the NG ap
15:06engineer these are two directives than the third is and you were P
15:10which will simply loop for all the names and then data minder apply that value
15:15into the li-
15:16so slick an example that in that real quick
15:19so we can come back in our webpage wanna do the
15:22NGN Nets will do data in GE net equals
15:25and we could say names equals in will give it an array here so
15:30others do a couple names and Stu John
15:33Smith and course John
15:37though and not to be excluded
15:40Jane Doe animal and are simple array so
15:44is some its kinda primitive way to initialize some variables with data
15:48now if we come down here whatsoever BR with the you l
15:52and now I can do is add an L I and I can do
15:55in GE repeat so yet another directive I can say for each in a min names and we
16:00already have name here some may call something different too so it’s not
16:03confusing
16:04so let’s say for each person name
16:08in the names the let’s go ahead
16:11and bind to person name
16:15very easy very simple so
16:18we’ve now initialized our data with the NG in net and now we’re gonna iterate
16:22through the data
16:23with the end he repeats and then we simply give it the name
16:27its gonna put each name into that very well then we buy into it
16:30and so for go-ahead run this you see that we just get a nice little list
16:34written out nothing too fancy
16:36but it does work and you can see the still works up here as well
16:40now when you use directives what a nice things you can do
16:44is go of the documentation one of the best things you need to know about
16:48is go to develop and then go to API reference
16:52now an API reference you’re gonna see that right at the top we have different
16:56directives
16:56now there’s a whole bunch of these family show on a very small subset of
17:00what’s available
17:01but also some others as we move along here so for instance if we
17:05wanna know more about Angie repeats we can click on now
17:08get to some info get to some different samples ovett and
17:13lookout works there’s even some tests and had actually test
17:17a repeater and do that type of thing if you’d like as well
17:21so is a lot a great stuff you can do with directives and we’ll start to see
17:24more these as we move along
17:27now the next thing we can do with anglers apply filters so let’s say that
17:31as we bind to maybe a customer name
17:33and we do that process wanna uppercase
17:37now I could upper case in my data model which we get to a little bit later but
17:40and easy way to do this type of thing is to apply an angler JS filter
17:45so all this will do is this pipe is the separator between the data mine
17:49statement
17:50and something called a filter now there’s a few filters built-in
17:54will look at that in the documentation want to get in the demo in
17:57run off to the web page upper case does upper case there’s lower case you can
18:01restrict to be had an array
18:03anyone right now to raise the restricted limit to save three
18:07out of maybe five whatever may be and then when it comes to NG repeat was
18:12something that
18:13a or something that’s very cool is in this case gonna say for each
18:16cussed in customers I wanna filter
18:20by name text so up here we have this Angie
18:24model which already looked at as they type
18:28the value they type automatically be applied to first
18:32filter down the customers based upon what was types if you type DA and Dan
18:36was in there
18:37then a lot math the pic mere any other people start with the air have
18:41DA in the name then we’re gonna take those results
18:45and filter again you’re gonna order those results by
18:49a name property and also this in the demonstration coming up
18:52now with that ultimately do is if we had 50 customers
18:55and we filter for all those that have you know John in the name
18:59then all the Johns would be shown then we would or those by
19:03john doe John Smithson that type of thing so what we’re gonna do in this
19:07case is once that filtering goes through and we order those
19:10will then write out the customer name and the customer cities
19:14let’s go ahead and jump into a demonstration of doing it this way
19:18so back in our webpage I’ve change the engineer little bit incentives have an
19:22array of strings
19:24have an array of objects you’ll notice that each object has a name
19:27and a city property and so is have three these in here we have
19:31a john doe John Smith and Jane Doe from San Francisco New York
19:35and Phoenix so I may have to change this now
19:39name still stays the same but on the go ahead and change that to let’s just say
19:43this was a list of customers
19:45so call it customers will change this to customers then
19:48it will change this to will say cussed now I’m gonna have to do
19:52is right out the cussed dot and now we can get into the properties we can do
19:58name pair then if I wanted I could come in and put a space and maybe a Taser
20:03something
20:03we could do cuss dot City never going to date a bind to both those properties not
20:09I could even come into here just to show your I could even do it this way if I
20:13wanted
20:14and that would work to do but
20:17I go ahead and break these out into two separate data binding statements and now
20:21we say for each cussed in customers
20:23let’s go ahead right out cuz name aka city now let me go ahead in
20:26let’s make sure this works first them apply some filters
20:30and it looks like it does you can see the city is now been written out but
20:33notice as I type
20:34and nothing really happens that’s at least that’s useful or
20:38interesting
20:39so what i’mma do is let’s come into here and let’s do a
20:44filter by and then whatever the type in the name
20:48instead a data binding to it I want to use it as a filter
20:51Sorgen a filter by the name property that’s in our model
20:55let’s go and see if we can get that working and see what happens here first
20:59are eyesores go ahead I’ll do Smith here
21:02s am in this when we did ass the ass from San Francisco also pulls up because
21:08it I didn’t tell
21:09anything specific just filter everything and so we have Smith
21:13we could do dole get both of those we could do New York
21:17out with the space there we go
21:20and you can see all that works and it’s all live in and we could even order by
21:24now see if we have things in the right area yet looks like
21:28if I do john and 10 or by say city then
21:31obviously Phoenix’s at a place with New York so we can come in and do another
21:34pipe
21:35order by and now in quote I give it the property salutes order by
21:41the City then it will bind those remaining customers and orders by say so
21:46let’s go ahead and search for the Johns here
21:48and go ahead and do john
21:51and notice that New York now appears first and Phoenix follows which of
21:56course was not the case in the data
21:57so that’s an example applying not only some
22:01databinding handsome and you repeat typeof directives
22:04but also how we can apply filters an
22:07order bison I could even do upper case if I wanted to come in
22:11let’s say we want this one to be uppercase
22:14and we wanted the city maybe lower case that we can come in and say
22:19uppercase and lowercase filters run its and now what’ll happen is it’ll
22:24automatically do that for us as you can see here this though as I type will do
22:28john is still works
22:30on still does the filter still filters out
22:33and sorts gene still works in all there
22:36so these are some other built-in directives and filters you get how the
22:40box now again if you go off to
22:42enlarge a estar dork go to
22:45API reference and then scroll on down just a little bit
22:49you’ll see a whole this to the filter so if I had a number that I want to convert
22:53into a currency
22:54with a dollar sign for instance or a pound sign whatever currency you’re an
22:58then I would use a pipe currency and what I’m actually do that for had a date
23:03now on a formatter
23:04certain way you can control that by the way he could do pipe
23:08date has a lot of different things you can do here so
23:11was really nice about anglers not only can we write our own custom directives
23:16but I can even write
23:17my own custom filters if I wanna get a little more advance with this
23:21so a very powerful framework for we’ve only scratched the surface so far
23:26so we’re gonna do next you start talking about
23:29the MVC par I love
23:32angular the model the view in the controller and see how that all fits in
23:38in this section we gonna talk about views controllers and really in a real
23:41part of annular called scope
23:43which really another term for that is view model if you use that term before
23:48so the way it works in anglers you have a view and that’s what we’ve been doing
23:51in the previous section
23:53with our directors are filters enter data binding but
23:56we don’t follow your logic into the view because
23:59it’s not very maintain a more testable or all those types of things
24:03so it’s never gonna have a special little JavaScript
24:06object to container call the controller and the controller will drive thinks
24:11it’s gonna control
24:12ultimately what data gets bound into the view
24:15if the view passes updated to the controller it’ll handle
24:19passing of maybe to a service which then updates a back-end data store
24:23so the glue between the view in the controller
24:26is something called the scope in in angular you gonna see a lot of variables
24:31or objects the start with dollar and so dollar scope
24:35represents the scope object now when I say it’s the glue
24:39it literally is the thing that ties the controller to the view
24:43the view doesn’t have to know about the controller
24:47and the controller definitely doesn’t want to know about the view
24:50now you’ll see that the view can know about the controller because there’s a
24:53directive for that if you’d like to use it
24:55but the control urself to make a testable and keep things
24:59loosely coupled modular and all that good stuff
25:03should know anything about the different view in fact you should be able to make
25:06a controller the combined to
25:08different views maybe have a mobile view give a desktop view or whatever may be
25:12so the scope is this glue between them now for folks that have worked with
25:17say knockout or some other different data binding frameworks out there
25:22not just in javascript but other dust-up modes and things
25:25you might have heard the term view model
25:28interview model literally is the model the data
25:31for the view well that’s really all the scope is
25:34the scope is our view model and it’s the glue between
25:38the view on the controller so here’s an example a really simple controller
25:42called
25:43are they enough simple controller here knows an interesting thing here
25:48in the pram under center you’ll see that would pass
25:51dollar scope and this is dependency injection
25:55that’s built in the angular JS
25:57now with this gonna do is angular when this controller gets useful
26:01automatically inject a scope object in
26:04now you’ll see that from there were gonna take that object and had a
26:08property on to it call Customer switch is simply an array
26:12above object literals so we have our same scenario with name and city here
26:17now with this controller can do than to serve as the source
26:21love the data for the view but the controller again
26:25shouldn’t know anything about the view so how would we possibly communicate
26:29customers over
26:30well that’s why were injecting scope
26:33scope is gonna be that glue between the controller in the view so if we come up
26:37to
26:38are view up here the scope gets injected in the NASCAR hope
26:42is gonna automatically be bound into the view
26:46once the view knows about this controller so here’s what it looks like
26:49you notice appear we have an NG controller
26:53simple controller well that alarm athlete I
26:56in this when this gets initialized the scope gets passed him but it’s empty
27:01well we’re gonna have a customer’s property what’s gonna happen then
27:05is this controller will be used by the view the
27:08controller itself though is it gonna be called
27:12its gonna go through the scope now the scope implicitly is available
27:17in this case to this entire did from the star the div
27:20to the end to the death now look at the NZ repeat here
27:24the same thing I did earlier in the demos but
27:27in this case its binding to the scopes customer’s property
27:31and so what’s gonna happen now is the view
27:35because it knows about the controller automatically gets past the scope
27:39now angler does that kinda behind the scenes this happens automatically
27:42and were then gonna control in our view what properties we want to buy into in
27:47this case we want to bind
27:48to the customers now from here it’s
27:51standard eight a body like we’ve seen earlier we bind to the name
27:54we bind to the city and we’re kinda off and running let’s take a look
27:59an example housing create our custom controller here
28:02and tired into our view
28:05so we already have some data up here but I don’t use engineer in this case it
28:10might have come
28:11maybe from a backend database through an ajax call something along those lines on
28:16the get rid of this Angie in net
28:17and I’m a come on down to make my own custom script now keep in mind I’m a do
28:22this in line purely for demo purposes
28:24and I a generally like to actually break this
28:28out into its own script in Austria that a little bit later when we get into a
28:32little more real-life typeof that but for now let’s make our same function
28:35like a
28:36showed earlier simple controller now on the dock so often see it abbreviated
28:41you may be a C Ctrl or something I don’t like to do that in fact
28:45I recommend against it I think you should be pretty explicit with your
28:49names
28:49but you can certainly doing whatever we like so I’m a spell it out though
28:54and we need the scope because again that’s the glue between
28:58this particular object are functions simple controller
29:01and our viewers get a day to buy into it
29:04now what I wanna do is stack on the scope it right now is just empty
29:08I a little customer’s property
29:11will say customers equals and then all the space 10
29:14are object literal here
29:16now there’s a rave object literals is now going to be bound into the customers
29:20which then give filtered and we can do all that good stuff so let me just
29:23bought this down so we can see it
29:25a little bit better we’ve done
29:29now done the same thing but if we run this is not gonna work because
29:33the view doesn’t know about simple controller
29:36so one way we can fix this is likely come up maybe to the body
29:41and with its ANZ controller equals
29:46and we can give it simple controller
29:49but you can also have different controls for different parts
29:53over given page it’s a the scope would apply only to where you at that
29:57controller
29:58so frances if I came in and only want the scope to apply here
30:02then anything in this start
30:06an intact here for the div we should be all these guys
30:10is now in that so now we have two properties in the scope the NG model
30:14is gonna had a property in a disco called name and we can actually get to
30:18that now
30:18in the controller by say in scope .name
30:21and then of course we have customers which will be
30:25retrieved through the scope as well so free run this
30:28now we’ve defined controller we should see the same exact behavior here
30:33fed to still works on my filter still work I can type to filter
30:37in New York to I can type the right
30:40and there we go so
30:43that’s an example love a simple controller now any
30:47section they’re becoming up in the video on a show a different way and when I
30:50consider a better way to do it
30:52but again we’re tryin to walk through the fundamental step by step on how to
30:56use this
30:57let’s go back and take a look at some other things you can now do
31:02now you’ve seen databinding directives filters and controllers and you’ve seen
31:06how the scope
31:07actually ken integrate between a view and controller
31:10it’s now time to really move it up a notch and talk about
31:14modularity and some more spot Korean concepts like
31:18routes so this century to talk about how to create modules
31:22and how modules can actually be used to create other things like controllers
31:27routes factories and services and how this fits together
31:31what are the things I really struggled with my very first are learning a large
31:36as: was I didn’t really see the big picture
31:39love how everything fit together so machine is a really simple diagram this
31:44is kind of an
31:44oversimplification but I think it breaks it down pretty easily so
31:48a module can have something of a bit called a config
31:52function and he could be used to define different routes
31:56now routes again a really important in the spy world because if you have
32:00different views
32:01and those views need to be loaded into the show page
32:04then we need a way to build a track what’re hour on a world view that’s
32:08associated with a man what controller goes with that view and
32:12you know how we do all that Marion together all these different pieces
32:16well when you define a row in English JS
32:19you can define two things on that route to have the key things I should say
32:23one of those is the view so what view
32:26when that row such as he did slash orders then maybe go to orders partial
32:31dot HTML or orders fragment or whatever you want to call
32:35and then that view needs a controller well
32:38instead of hard coding the controller into the view which
32:41works and you can certainly do it a show that in the previous section
32:44we can actually go in in do this on our own through the route
32:48and this is the way I would definitely recommend to do it now
32:53a given controller with them of course have access to the scope object which
32:57then
32:58the view will bind to you we talked about that a little bit earlier and the
33:01controllers rather than
33:03having all the functionality to get the data and update data and perform credit
33:06operations and things like that
33:08in a more real-life application they’ll call out to factories
33:13or put a star there because you might have services
33:16providers or even values you want to get theirs
33:19a lot of different ways you can access data even resources
33:23now on the views we have course then have directives
33:27and filters and those have to fax now there’s even more to the overall picture
33:32but
33:33this is one of those things I wish I woulda seen this right up front because
33:36work on Nov instantly had that label moment
33:40where light goes on ego OKC to find a row to row has a controller interview
33:44and then
33:45the controller can loaded from factories and services and things
33:48so what we’re gonna do is talk about you to these individual pieces and how
33:52in a single page application you can’t actually define routes and use those
33:58so the first thing to talk about is although I created the controller
34:02in some previous demos right in the view that’s not the recommended way to do it
34:07keep in mind you might actually have different views you might have a
34:11mobile view maybe I want specific to iPad or surface or something like that
34:16and maybe I one for desktops it’s very possible
34:19so what we need to do is when we define our
34:23NGF earlier we didn’t assign it to anything
34:26and so what that is just implicitly crazy disco
34:29behind the scenes in a still work to solve with the data binding in the
34:32filters and all that good stuff
34:34but we now want it kinda graduate to a more modular
34:39application and anglers very very modular if you take advantage of it
34:43so there is a model object and I’ll show you how to create that you literally
34:47just say angular da
34:49module an of love the module you can
34:52configure the routes create custom filters
34:55custom directives you can’t get data from different sources using factory
35:00services providers are values and they can even create controllers
35:04using the module so you can think of a module is really just an
35:08object container and then in that container you can have all these
35:12different things that you see here
35:13now what’s important is once the module is given a name
35:18that’s when you’re gonna go into energy ap
35:21and whatever the module name is that’s what’s gonna go here so
35:25they could have just as easily call it NG module
35:28but I actually like Angie at make sense I think anti-religious means hey whats
35:32the name
35:33of the module that you’ve defined in javascript
35:38here’s what it looks like it’s really really simple to create a module so
35:41once you reference the angler script you can have access to an angular object
35:45now of this object can get all kinds a good stuffing get to the GQ light
35:49functionality for jQuery Dom type manipulation
35:52but you can also get as you see here to the module
35:55so this example you can see I called my module
35:58demo app and then you might wonder what exactly is the empty array for
36:04I know I did the first time I saw and the answer is this is where dependency
36:09injection comes and because
36:10your module mind actually rely on
36:14other modules to get data so here’s an example that we have demo app again
36:19we say hey angular create me a module called em laugh
36:23and then I need to rely on another module in this case I just called it
36:27helper module now this would be some other JavaScript file that
36:32you might reference dan has another angler module and in the quotes here
36:36you would see helper model name I have maybe just filters and directives and
36:41that’s all house
36:42what I’m doing is telling angler go find that module go look it up
36:46where it is and injected in and make it available
36:50to my controllers and directives and filters and factories and all that stuff
36:55that this particular model might have so it’s a very powerful feature
37:00if you’ve ever used a require Jasser
37:03something that’s more modular based in this will cannery
37:07home with you i think if you haven’t though it’s just a very flexible way
37:11to at runtime dynamically include other models
37:16now here’s an example of how we can use that module
37:19to actually create a controller this is the more I’d say official way
37:23to create a controller to know sup top we have our demo app
37:27and we just great that the same way in this case were saying it has no
37:30dependencies
37:31and direct
37:33now we’re going to do with that model though his we’re going to use it to
37:36define a controller and we’re gonna call this as a
37:40show simple control and notice that I just have an anonymous function here
37:44nested inside so the second parameter here is OK
37:48so what is the controller object well function course is an object in
37:51javascript
37:52we’re gonna injected and the scope and then from there
37:56I do the same exact thing we did before now the key is
38:00once I’ve define this I then need to go in and make sure that my NGF
38:05points up to demo app in the strings
38:08and then I can even in the Vue du Angie controller like it did earlier
38:13is simple control now once we get two routes here I’m a Sharia
38:17how even act and change let’s go ahead and take a look at a quick demonstration
38:20Nov
38:21fixing up our previous function in going with the more modular approach
38:27okay so we have our simple controller here but this isn’t really modelers just
38:31come a function out there and so what I’m gonna do is come in here
38:35and missus call this demo out and will say
38:38angular dot module
38:42and we’re gonna go ahead and give it delaware
38:45now I can doesn’t have to be the same name has my variable but
38:48amigo en do that and again the EMT
38:51brackets here for the array mean I have no dependencies that I need to worry
38:55about
38:56now I go ahead and leave this guy as is to see how this works and then I’ll
39:00changer some come down now and we can now take our module
39:05and say let’s add a and notice further
39:08sees we have configured constructor controller thread to a controller
39:13and let’s name it’s simple controller now what I’m gonna do
39:18is actually give it simple controller here
39:21because I could give an anonymous function or I can actually create the
39:26controller
39:26outside and then just a sign in and that would work absolutely fine
39:30now this already knows about simple controller
39:34but in GA ap doesn’t know about demo absolutes go and fix that by saying
39:40demo app alright so now ready to go now this a little more module
39:45her much or I should say so first also make sure this runs
39:49and then Australia kind of anonymous way to do it and see it
39:53still work so we can filter and do all that
39:57okay now the next piece %uh this is you may not even want to keep it outside now
40:01in some cases you may in Austria one more trick to wrap up in a second here
40:04but
40:05I was gonna do an anonymous function right in my simple controller
40:10because BNG air
40:12demo at fear knows about this it then knows about the controller so simple
40:18control the strain
40:19is known here and now this is running exactly the same way
40:23really shouldn’t be any difference at all you can see that loads in great
40:27there
40:29I so that’s an example have actually creating a module with a controller now
40:33another call tricky can do
40:35and this can be useful in depends on how late you’re a javascript i think is on a
40:40wipeout
40:41all this and only come in just create a variable called
40:45controllers and just give it a kinda empty object literal the star here
40:49they’re gonna say controllers da simple controller
40:53give it the same name is what I have a4 equals
40:57and then I’m gonna give it the a function the more conducive Michael
41:01K now I could do multiples of these if I had more for controllers I could say
41:06controllers you know controller to equals
41:10a function now go ahead and leave it at one but now I can do as I can come in
41:15and just pass
41:16controllers now because this is name simple controller to property
41:21obvious he of the object this will still be able to find it
41:25and so by doing this technique some people like this better
41:28some people don’t on we can come and
41:31you see we get the same exact feature still works the same
41:35so there’s three ways you could do it so one way as you can create an external
41:39function and just past the function in
41:41with the controller name the second ways you could actually pass a name as a
41:46string
41:47with an anonymous function and in the third way
41:50is we come in and do this type a technique and some people like this
41:53because now I can
41:54its little easier prototype things if I need to when
41:58that type stuff so that’s an example using a module
42:01with a controller
42:04now wants you to find a module and a controller at some point if your bill in
42:07a single page application you’re gonna need
42:09routes because we need to load different views
42:13into are shell page now this would be an example
42:17love for different routes so we have win view one is clicked
42:21are made as a LinkedIn that’s the link to it is something like slash few one
42:2623 of hash but you’ll see that coming up I
42:29that will low that view and then when they click on a link to have you too
42:33in the past then that would love you to but it’s not going to reload the whole
42:36shell page
42:37angular will only load the piece that you want so
42:41there’s two can always you can load it first of the view could be in bed
42:46as a script template in the actual shell pitch
42:49and then we could just telling you we’re hey the template ID to load or those
42:54calyx and the view ID
42:55is you know X the second way is back up on the server
43:00you might actually have all these views and I like to call on parcels
43:04because they’re part of a page and you telling you where the template URL
43:09for what I wanna load and then you give it the URL to the server and I’m gonna
43:13show that coming up here now this is a really important feature because we want
43:18to build a goal in
43:19and load different parcels or fragments
43:22and then that will be kinda power spot works so we’re gonna do is use that
43:27configuration
43:28earlier so we have angular module is demo app
43:31no dependencies and now wanna do is configure the module
43:36with some routes now another object that’s available in anglers call
43:40the route providers you see here in sky like the scope is injected in
43:44dynamically
43:45just by defining dollar rout provider as a parameter
43:48so in this case were gonna say hey the route provider win the route is just %uh
43:53slash the route
43:54we want to use simple controller with
43:57view 1.8 stima win the route is slash partial to
44:03we only use same controller in this case P could certainly do a different one
44:07with template URL love you to know the temple URL you might
44:12you know give a folder where these partials livan
44:15I actually like to call my folder partials but
44:18you don’t have to and then otherwise if it doesn’t meet
44:21any of those routes we’re gonna redirect back to you the
44:25route which ultimately goes back up to here and we would load view 1
44:29so this is a really cool thing in want to come back lyrics and you have that
44:33label mama
44:34this is really the magic to glue
44:38a view to a controller so their scope gets past we can do the data by name
44:43and the directives appropriately so let’s go fix up
44:46what we have so far less convert this into more of a spot typeof application
44:52so far no application we’ve created a module
44:55and we’ve assignment or Angie apso knows how to get to that and then that module
44:59has this simple controller
45:01and so now we have the view knowing about some controller
45:04and that’s fine and it works but that can quickly get outta control in
45:09really have some code duplication here when you really don’t need
45:12so let’s go ahead and on our module let’s add in our configs we can say demo
45:18app
45:18dot config and now in here
45:21we can give it a new route or most for out so I was gonna paste in some code
45:26for this to save a little type in
45:28and so we have done well to configure we have our route provider
45:32and the rough provider says he win we’re just kind about the root for our row
45:37then you simple controller and go to partials
45:40view 1 HTML now partials view one East emails right here
45:45and you’ll see it’s very very simple we have you won
45:48we have our same filtering and our same loop in that we did earlier so
45:53really nothing different there and then we also have
45:56view to says view too and we’re just gonna kinda pretend we filter by city
46:01instead saw nothing wrong fancy they’re just a enough to make a little bit
46:04different
46:05now they’re both going to use the same control in this case but in a real life
46:09at that may or may not be the case
46:11certainly I’d offer that most the time I have kind of a one to one relationship
46:14between controllers but it depends on how much we use you can get out of one
46:19but in this case for it is going to use simple controller which has
46:22our customers now what I wanna do though is
46:26let’s come into view on it let’s fix it up just a little bit
46:29and I wanna make it so that under each
46:33customer here let’s just data a BR week in inner
46:38customer name and then I was gonna
46:42paste this into here and we’ll go ahead in
46:47a separate those and then I also want to come in and
46:51make a seek an inner customer City insoles say city right here
46:57and will change these guys now we already have name that’s our filter
47:02now normally I like to do you filter .name and then change this to you
47:06filter got naman eh keeps a really clear and then on here what i’mma do
47:11somebody call this customer .name
47:15or just to make a really obvious lissy new customer
47:18.name and what that’ll do is going to create a new property on the scope
47:22the den has a sub property called name source a new customer dot
47:26name and/or actually City in this case
47:30and then the final thing we need is about we haven’t seen how to interact
47:34with our controller yet so let’s go ahead take a look
47:37so I’m as just a standard cattle button
47:40and another directed we can use is called Angie click
47:44if you go to the documentation for angular there are several different
47:47options here
47:48and you click is just wonderful and I’m gonna call add
47:52customer and then we’ll call this
47:56at customer pretty obvious so once this few loads once we get that working
48:00we should build at a customer in now obvious E&R controller
48:05we need to build a handle that so let’s go back to our controller
48:09and because we called this had customer
48:12and because the view binds to the scope that we need to say scope
48:17dot at customer and a sign at a function now you’ll notice that I’m not having to
48:22pass an
48:22the data I don’t even have to look at the text boxes
48:26because the scope Rd has that k we get everything through this
48:32and so what I’m gonna do is we’re gonna say scope
48:36dot customers dot push and let’s push into new item in the erasable same name
48:42is scope got are not new customer name
48:45salami and the scope got here and let’s go ahead and
48:51wrap this dancing see a better and then a comma
48:55in will def city is scope
48:58got new customer dot city
49:02and then and are object literal there
49:05and were often run that set that’s all we have to do to make this work
49:09and it makes it really easy to now
49:13in iraq back from the view in see the controller but yet
49:17this doesn’t even know about the controller fifth you’ll notice there’s
49:19no controller definition here
49:21that’s gonna happen through the route that will then caller at customer and
49:25it’ll simply show up in our
49:27list our allies that we have okay so that’s gonna
49:30one thing I want to show and now we have the routes were kinda ready to go
49:34but we have a little bit more work so what I wanna do is this
49:37little using directors with data mining page here
49:40I’m a nerd pretty much kill of most of this
49:44so we’re gonna get rid of all that I don’t need the controller anymore cuz
49:48the views will just use those
49:50and what I’m gonna do is add a special directive called
49:55in GE view
49:58now normally discover ways you can do this you might see it like this
50:02Angie view as a tack you could do that but I ate
50:06kinda feel more comfortable doing dishes and then I can do my dear dash
50:10Angie view and normally just leave it like that but I go ahead and added he
50:14calls just
50:15because most people are used to that with a he’s in a five-day to dash
50:19attributes
50:20now this represents the placeholder
50:24for the views
50:29k so now when my routes kickin
50:32and we go to a default route what will happen is the partials view on HTML
50:38is going to be married to the controller thats then going to be injected
50:41dynamically
50:43in that is def and so I don’t have to write the DOM code to do that is just
50:47going to magically happen behind the scenes and now we’re starting to get
50:51into a spot type a concept here
50:54so if we go up just as a review or Angie app has demo app
50:58we now have RNG view was represents our place holder
51:01we have our model with our configure our routes and assuming I name everything
51:05okay
51:06should be all right here let’s say that this is a
51:10view to and we’re gonna reference that just a second
51:16and then we have our controller where we combine customers then we provide a way
51:19to add to it so
51:21what I’m a deer a quick those are real hazard in at a link here
51:24let’s say at the bottom that we had a a hyperlink
51:28assay when this is clicked we want to go to
51:32that route game will say view to on this only click it this’ll direct
51:37angular to actually kick in the router and then that router course I’ll take it
51:41over to view to serve be pretty
51:43standard here okay so now we really clean this guy
51:47up now the last thing I would do which are surely in the more realistic app is
51:51I would take all this out and makes effort scripts in
51:55loaders but well go ahead lever leave here for
51:58demo sick alright so
52:01now the view 1 is here notice I don’t have to put in G controller
52:06because it’s gonna map that up automatically for both these
52:10so let’s give it a shot and we’ll see if there’s any here’s our type was here
52:16and you could see their view one has now loaded here
52:20now actually tweak the route just a little bit just to show your
52:23I had a slash which I could do but I also wanna show that instead of having
52:28just a slash their for the route under redirect to view 1
52:32or if you prefer you could just do this and that would be the default view
52:35so either way would work but I’ll go ahead and will for give you one back in
52:39here
52:40now that automatically loads it now here’s what’s really cool
52:44not only does this man’s are rowdy in for us
52:47and as this load you’re gonna see that it still works and you can see our
52:51context is ban we get our customers I can still filter into all that
52:55i think %uh man and let’s go ahead and Nana
53:00at a customer here so watch our list will do at customer in their ego notices
53:04or is it
53:06and now when I click on View to watch the path appear
53:10what it’s gonna do is automatically navigate to view to
53:13again I can still filter because these both have the same controller and
53:16therefore the same scope
53:18but when I hit back it’s actually going to go back to view 1
53:22I can go back and forward and anglers on a Mac team and unite history for me
53:26which
53:27is a really really nice feature to have available
53:30so that’s an example love we can actually come in the final module
53:35to find some routes and then go in and on those routes hook up a controller
53:40to a view and now annular will automatically load those routes
53:43for us
53:46now that you’ve seen how to create models and how models can then be used
53:49to define routes
53:51and also to work with controllers we’re gonna wrap up by talking about some
53:55reviews concepts
53:56so another feature a Bhangra JS is the ability
54:00to encapsulated data functionality into
54:03factories services providers or little value providers
54:07now I’m gonna focus on factories here but
54:11all three of the top one shown here factory services and providers
54:14they allow us to encapsulated common functionality so for instance if I had
54:19to go get customers
54:20and I need those customers in multiple controllers
54:23well that 11 a hard code that D-day in each controller just
54:27one makes sense in to be a lot of duplication there so instead what all do
54:32is a move that code out to a factory service provider
54:35now the difference between the three is just the way in which they create the
54:39object that goes and gets the data
54:41and that’s really all there is to it with the factory actually create
54:45an object inside the factory in return with the service he actually just have a
54:49standard function that uses the this keyword to define functions
54:53it with provider there’s a dollar get function you define
54:56any can be used to get the object that returns the data
55:00a value is just a way to get a simple for instance configs I so a simple
55:04example you’ll see if this
55:06on the angler side is you might just want the version
55:09a particular script and so you have a name value pair where
55:13the name of the value maybe might be version and in the value would be say
55:18a 1.4
55:20so I’m not gonna cover all those here but I am gonna cover factory so let’s
55:23take a look at how we can use a module to define a factory
55:26so this example you’ll see that down below I have a controller that we looked
55:31at earlier
55:31and notice that instead of hard coding the customers in here or for was an ajax
55:36call
55:36is set apart clean that call in 2d controller
55:40I’m going to use our module up here to define
55:43a factory now on this case you’ll see I’m actually using cheney
55:46so the modules to find and instead put in a semi-colon
55:50we just chain factory man once that’s done we change controller
55:53you don’t have to do that but that is certainly an option so in this factory
55:57were gonna give it a name
55:58in with the factories gonna do in this case is provide a way to get customer so
56:03let’s assume we have some customers variable up here
56:05and what we want to do is create a factory object
56:09to find a method on it there returns this
56:12customer variable now in real life app this get customers mine
56:16actually go out and make in a sink call now that a sink all data returns
56:20and then returns it to the controller or controllers that needs it
56:25now what’s really cool about factory services and providers
56:29is that once you define did you can then injected very easily as a parameter
56:34into something like a controller or even another factor if you want
56:38so a factory could rely another factory Sophie come down or controller here
56:43you’ll see that simple controller does our standards Co
56:47but notice that the second parameter is simple factory
56:51well that little name matches up there on purpose what angularjs is gonna do a
56:56run time he is dynamically injected this
56:59into the controller so now all have access to this
57:04factory object is returned out of this function and now i can say a factory dot
57:09get customers and so this provides dependency injection
57:12and provides a way that I now have a centralized place
57:15to get customer data order date or whatever may be
57:19and in real life app you certainly may have several different factors
57:23in the application itself just jump into a demo and I’m a convert
57:27the customers we had in our controller before and move those out into just a
57:32really simple factory to help get to start
57:36earlier I showed how to create a module define our routes and then have a
57:40controller in that model called simple controller
57:43but you’ll notice that the customers are hard-coded now in real life at you
57:47actually may have something hard code I suppose but
57:49in general we’re probably gonna go off to a server or service
57:53to actually go and get the data the Ajax or some other type of
57:56technique maybe even WebSockets what I wanna do is move these customers
58:01out we don’t want to hard code these obviously
58:04and we can kinda pretend that we’re gonna go call service so I’m just gonna
58:07go ahead say that
58:08customers is right now just an empty array
58:12now what I wanna do is another routes here
58:15on a defined a factory you notice as I type factory shows up in the nice and
58:20tall sense
58:21I can also do a service or a
58:24provider so those three different options for doing this and
58:28again they all differ Justin how the create in return the object
58:32that serves up the data but a factor i think is really easy to understand get
58:36started with
58:37free go ahead and make all this simple
58:40factory and we’re gonna give it our function now I’m gonna do an empty
58:46function here
58:47but keep in mind with angular as
58:50France and scope is dynamically injected we can also inject other things if I
58:54wanted to make an ajax call
58:56that I can tell angular inject in the angular
58:59HTTP object and then I could do a CTP get put post and delete typeof calls to
59:05Francis RESTful APIs on this case I’m not going to do that can keep it really
59:09kinda fundamental and simple
59:10but I’m coming to find some customers and I’m just gonna sign those customers
59:15we had earlier
59:16make that customers now I’m gonna do
59:20is with a factory you create an object tack on some functions to it
59:25and then return an object out at a function with the service you don’t
59:29create an object the function is the object he just tack on using the this
59:33keyword
59:34some a function Sol Country the difference here so we’re gonna come and
59:38say
59:39factory equals and just create an empty object here
59:43now wanna do is factory Dartmouth College get customers
59:47and get customers a simple gonna come in
59:51and do nothing more than an ashy I didn’t want to do it that way
59:55gonna do a function here and I’m just gonna return
60:00customers now had a past an HTTP object or if you’re using jQuery or whatever
60:06may be
60:07I can make the HS call right here and once he comes back
60:10we could die return a promise in getting all that fun stuff for the same calls
60:15but in this case was gonna return something really simple so now our
60:19factory has a get customers
60:20we might also have factory dots
60:24you know maybe put customer we wanted 12 updates or
60:28post customer whatever you want to call it and maybe this would take our actual
60:33customer object
60:34and then we would have code in here to actually do something with it
60:38right in this case the will to stick with the customers now regardless of
60:42whatever you put on with the factory
60:44one secret the factory object simply return now
60:49if this were say said service right here then set a factory dot
60:53this becomes the factory I this function here so I would to save this dot
60:59get customers and this dot and then
61:03on that factory itself would be in the function but
61:06I can like factories because you actually control the object itself in
61:10you don’t really have to use the this keyword things right so we’re kinda
61:13ready to go here we now have a factory that returned some
61:16in this case hardcore customers now we need to film so
61:20how we do that well I need to first get a reference up here to the factory
61:25now all you do is you take the name so put that my clipboard
61:29and has put a comma and then you put that name it and what angler will do is
61:34go look up that factory automatically and injected in for us
61:37that’s all you have to do is just put the name so it’s very modular
61:41now here I could say simple factory dot
61:44get customers but let’s say that we had kinda have a whole initialization
61:48routine we want to do
61:50so I E Z will do something like this
61:53others make kinda private function here to call in net
61:56and I’ll say a scope that customers
62:01equals that and then
62:05all we have to do is call in it payoff have to do it that way at all
62:10I just prefer all men the socialization for my daily routines are factory calls
62:14to be in kinda one nice little place so I might have multiple lines in here
62:18the kinda kick off the process to get the
62:22initial maybe look up data for instance for dropdowns that my controller passes
62:26down to my view
62:27so that’s kinda why like to do it this way okay now
62:31other mess there’s really nothing in the view that’s going to change because the
62:35view doesn’t even know about any of this it just knows about
62:37ultimately the controller and the scope and the way we did our views it
62:42really doesn’t even know about the controller because its dynamically
62:45assign
62:45so let’s go ahead run this and we should see that our customers actually
62:50load up and there they are there now coming from the factory though
62:54interview to these are also coming from the factory so
62:58now we’re not having to duplicate data
63:01assuming we did have two controllers here we have them all
63:05in one nice little reusable factory that as an example
63:09love getting started with factories in angular JS
63:15now that you’ve seen the core components involved with anger JS
63:18my wrap up with just a real quick demo there put together
63:21and this is put together just over a few hours that demonstrate some these
63:25features in action
63:27so let me for sport the application and this is just a real little
63:30spot ap single-page application that
63:33show some different customer so I can come in and adding customers if I’d like
63:38and we can go ahead and add that you’ll see it
63:41alphabetize is a man all that’s why go here I can remove a back out
63:45and I can then click on Order sold Italy Carol
63:49that’ll take me into a separate page us ever view actually
63:53burden reload the whole shell pitch go back to customers
63:57and/or orders and see all the customer orders here and this is just use enough
64:02couple think so first off we have energy yes of course and also you seen
64:06a little bit jQuery because I’m doing bootstrap so we have bootstrap jQuery
64:10and angular now I’m not using jQuery for much I love
64:14really anything just a few basic things so that we can work with some the
64:18bootstrap stuff under
64:19alright so this particular route this is the shell page
64:23and you can see that we have some bootstrap up top as well as my styles
64:27we have my navigation and here
64:31is the view now I did a little custom directive
64:34and this is an animated view the slides things in
64:38now starting with version and I put a comma hear about it 114
64:42love angular the ability enemy your views as they get put in
64:46will automatically come outta the box he does have to supply some CSS styles and
64:51that a kick in
64:52but this also shows have to do a directive so if you’re interested
64:55a show how to write a custom directive there and all I did was took what
64:59angler JS already had for the NG view and just tweaked it to use
65:04are the jQuery animation features now from there moving on down
65:09you’ll notice that I just have some scripts so the only quarrel what I’d
65:11call library scripts or angular and jQuery
65:14we then have a bootstrap for you I scripts
65:18and then here’s my custom
65:20now I put all the controllers just in one file to keep it real simple here but
65:23you could certainly break these out
65:25and you can see that everything is an app folder so for doctor app you’ll see
65:29controllers directives partials
65:31services and then ap JS you’re gonna see
65:34is kinda what takes everything off let’s start there so at JS
65:38is where we come in and a fine our module so you can see I have customers
65:43ap
65:43doesn’t have a dependencies and then I have my different routes for my
65:47customers
65:48my customer orders and my order screen you can even see em demonstrating how to
65:52pass parameters
65:53up here on the URL he’s a route parameter
65:57so that’s in here as well if you’re interested so that’s kinda the default
66:01configuration agency
66:02and then there’s a little bit details here about how I kind of like to
66:06break things up in general
66:09now for come over to the controllers this is where I have all my controllers
66:13here
66:14and she can see I have customers controller
66:17we have customers orders controller her customer orders controller
66:21and we should have in orders controller down here and then I have just a really
66:25simple one for a
66:26now controller now these are all built offer the module so they’re part of it
66:30knows they inject in a few things that the app needs here
66:33including a factory and so this is all pretty standard stuff that you’ve
66:37already seen
66:38the the factory or in this case
66:41the service I want to show both ways are doing it so in the Devils are sugar
66:46factory here’s an example uva
66:48a service really the same thing suffer as I mentioned earlier
66:52he is the this keyword to define you’re different functions here
66:56you can see on this case the date is hard coded so it’s not make an NHS call
67:00but this would give you the foundation
67:02for billion a service or you could do a factor either one
67:05actually tend to prefer factories for some reason myself but this one I
67:09decided try services out
67:10my views are in a little personal folder
67:14and this is going to be the little simple parts they get injected
67:18in to the animated view so these are my kinda spa
67:22subpages if you will they get injected in hand we bind to the scope
67:26you can see some data binding hair so there’s quite a bit more to that I could
67:31walk through here but this is something I wanted to show
67:34real quick just to show a simple example getting started with angular JS
67:39and how you can use it to you actually interact
67:42do databinding do factories controllers and
67:46all that fun type stuff
67:51well that is the end I hope that by watching this video you have
67:55a really good solid fill for the different pieces are being a ler
67:59and the power they’re really does offer I’m really excited about the framework
68:03for bill it’s a different app season it and
68:05like in the overall process flow an
68:08model area provides as kind of a summary here
68:12it really is a spa framework but it depends on what you don’t
68:16if you just wanna for data by name with the injection you could do that if you
68:19wanted as well
68:20some key features as a review we talked about directives and filter so
68:24directives
68:25enhancer HTML talked about things like NG repeat
68:29NG Apogee controller engineer there’s many others
68:32and we talked about how we can filter data and also how we can do to a data
68:36binding
68:37from there showed you how we can hook up views and controllers
68:41and that the really the glue between those as far as the databinding goes
68:44is the scope and the scope is really another word for a view model that
68:48somebody might be familiar with
68:50and then finally we wrapped up with modules and routes I also threw in
68:54factories at the end there
68:55to show how we can first of two fine a container
68:58that contain it and then have one or more routes in it
69:02one more controllers different factories and then we can link that
69:06ap or module into our main shell view
69:10using the NG ap directive
69:13so that’s a wrap on the content that I had planned in the 60
69:17ish minutes and I’m over that now as far as other resources out there that i’d
69:22recommend year you take a look at there are definitely a lot of cool things out
69:27there
69:27and one of those will be the sample code
69:31and is it does have some the basic samples I ran through as well as the app
69:35I showed at the end
69:36and seeing a tiny URL dot com slash angler JS demos
69:40now sigh from that a lot of great stuff out there they don’t have time to go
69:44into we’ve
69:44we did visiting their JS but built with anger JS has a lot of samples are being
69:49learn action
69:50and then if you wanted to get some different plugins whether it’s
69:53bootstrapper jQuery
69:55there some sites out there was some directives that’ll make this really easy
69:58to integrate
69:59as far as learning I do a lot to work with the site and company call
70:03Pluralsight awesome company
70:05very cool people run it and this is online video training now
70:09at the time I film this or else I will list them there’s not any angular
70:13courses but they are being worked on as we speak
70:16I my good friends Jim Cooper and Joe
70:19eames are working on a angularjs Fundamentals course that’ll be up there
70:23shortly
70:24and then I’m currently working with Scott Alan developer extraordinaire
70:28Scott Alan on an and in annular course they’ll show you the whole process with
70:33a relapse and how that all works
70:35so for free to check that out if you’re interested in the meantime feel free to
70:39check out some my posts
70:40at whether I study has peed on SSD Wallin or
70:43get in touch via Twitter I appreciate your time and watching the video