ng-conf 2014

Creando directivas propias para AngularJS

Dave Smith  · 

Presentación

HTML (pincha para descargar)

Vídeo

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

I'm going to be digging a little bit deep into custom directives today we have 40 minutes I'd like to start by asking a couple of questions first of all can I get by a show of hands if you've written a custom directive would you raise your hand

Hey Wow the world's authority on directive authorship is in this room right now let's hope the big wasps head earthquake doesn't happen alright so my name is Dave I work for higher view I'm on the front end team there are five of us about we

started using angular in November of 2012 we had a unique opportunity to rewrite our pretty much our entire web-based UI which is a really it was a great opportunity we almost went with backbone but it was good oh oh oh um scandal when we first started I wanted

to use angular at arm's reach I wanted to make sure that we didn't get too married to it because you know this thing's kind of crazy and weird and I'm not sure my markup will valid anymore and so we didn't do things like write custom services

or directives at first but after a few weeks of using it one of my co-workers came to me and said check this out I can write this little directive thing here and plunk it into the app and all over the place and it'll look and behave the same and I was

like that's really cool since then we've written 146 directives which means we're just a little bit cooler than double-click right just just a little bit so got some links you can check out later first I'd like start with a really bad joke

this will be funny if you know something about directives well it might not be funny and it'll be hilarious at the end of the talk so just if it's not funny now don't worry so what did the directives say after getting cut out of its parents will

I'm isolated yet it doesn't inherit from the parents okay so yeah now we're foods coming right okay yeah took a little explaining it'll be even funnier later I I think so a couple of terms I hope you're comfortable with based on what we've

heard so far I think everyone should be so first of all angular has a lot of built-in directives here's just a list you'll see these all over the place I think a lot of times people use angular and don't realize when they write ng-repeat they're

actually invoking a directive whose code they could go read but I'd like to talk a little bit about naming so let's say you're going to write your own first of all I strongly I have some principles that my team has adopted that we found useful

the first one is to use a unique prefix for all your directives to not to avoid clashing with other people's I don't think non angular directives should use the ng prefix generally because to me that denotes that it's an internal prefix but it

can be confusing to read someone's directive that doesn't have a prefix at all and you find yourself wondering is this just HTML attribute that I don't know about yet or is it a directive and it's nice to know the difference two letters is

pretty common I've seen that the angular UI team uses UI at higher view we use HV for everything for this talk I'll use my dash for all the prefixes just so that'll be obvious so if you used a two letter prefix with letters and numbers that's

1296 prefixes which ought to be enough for anyone right 640k let's look at some code from angular this is a directive that I think everyone has used raise your hand if you've used this no raise native you haven't used mg show okay there's like

1 2 3 good right but by and large most people will use this when they start using angular here's what it looks like in the code it's a very simple directive it does use animation we we'll talk about that right now but all it does is return a function

that watches an attribute that you give it and anytime that apps Ruby becomes truthy it removes a class from the element called ng-hide and whenever it becomes faulty it adds an element called ng-hide and it's that simple and then there's a CSS rule

of course that will cause ng-hide did not display notice of the naming here when you name a directive in JavaScript you use camelcase ng capital S Show but in HTML you use it with a - so that's normalized names for directors in the JavaScript just keep

that in mind as you look at the code here here's a more complicated one directives can get pretty complicated though I recommend you know avoiding that but here's the ng class does anyone use ng class before this is a simple directive that you use

to specify class names that you would like at runtime to be added and removed to an element and the code here is I've actually stripped it down to be a little bit more readable but the idea here is you just watch an attribute observe the class value and

you fill in the classes whenever that attribute changes based on what it tells you to do the attribute that you give to ng class can return an array of classes that it should have or return an object that points to classes whatnot but anyway so just wanted

to point this out these are all available in the angular source code and they're pretty approachable so I recommend that when you want to see how directives work a great way to go is read the angular code so when do we use them there are two or three main

places where you want to use a directive the first one and my personal favorite is to create HTML components in the future this will be baked into browsers - you know in the form of web components but for now angular gives us this and you can make your own

custom tags an example would be my widget this is where you could plunk down on my widget tag wherever you want and it'll magically be filled in with other HTML another use the second one here is for HTML behavior these are typically attribute directive

like ng click this is when you want to specify in your HTML that on certain actions you want special code to take to execute so in the case of ng click you specify an angular expression that will be executed any time the user clicks on that element really

common use case is to wrap up jQuery plugins because you know you're maybe you're building an angular app and it's awesome but you are like how do I bring in my jQuery plugins the answer is always almost always to use an angular directive that

you write or that's available many many angular libraries exist out on the web that you can find UI date is an example of one from the angular UI team that I personally have used several times and the bottom line is anytime you want to interact with the

Dom from your JavaScript code that's when a directive is called for it's typically bad practice and angular to interact with the Dom anywhere else in a controller in a service it's bad and the reason it's bad is because it makes your code less

testable and more coupled to the Dom so let's write one first things first I recommend whenever you write a custom directive you put it inside of its own module don't just add it to your application module but create a new module which you can see

[ ... ]

Nota: se han omitido las otras 3.613 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.