AngularJS Basics: Services and Directives
Hi everyone. I am back with day 2 of my 100 days of code challenge. Today we are going to learn about services and directives!
What are services?
Services are JavaScript functions that help us complete a task. For example, if you have an app that needs to send the client notifications, you would have a NotificationService. Services are reusable and part of why Angular is so great. We can just keep on reusing our services so we don't have to keep repeating ourselves.
How do we use services?
BY using Dependency Injection. Dependency injections allow us to tell angular what we want our controllers to have access to.
Let's say we have 500 different services in our Angular app, but we only want our controller to be able to access three of them. We would pass the services that we want as parameters for our controller like so:
And our service would look something like this:
A note about dependency injection and minification.
If you wanted to use minification while using dependency injection, you would have to do something a little different. If you wanted to make a smaller function you would have to inject your services into the controller. If you do this, you can name the parameters anything you’d like. See code below:
Let’s talk about directives.
What is a directive?
A directive is a “marker” on HTML that attaches an action to the HTML. There are two types of directives- event and behavioral. Event directives handle all the events the HTML might use. Behavioral Directives manipulate the DOM. Angular also comes with a ton of built-in directives!
Event based directives
If you have experience in JavaScript, I am sure you have seen the code below when creating event listeners.
Angular uses the built-in ng-click and sets it equal to “vm.myFunction()”. The vm before we call the function doesn’t have to be vm, that’s just what I named mine. It is whatever you named your controller in your ControllerAs. Your function should exist inside of your controller.
Behavioral directives
In short, behavioral directives allow us to manipulate the DOM. Angular comes with a ton of preloading behavior directives which makes it super easy.
In JavaScript, if I wanted to iterate over an array of object and display them, you would do something like this:
This would work fine until our cats array starts getting new objects or we start removing objects. That could really mess with our data. Luckily, Angular has got you covered! We can use ng-repeat and use the following code in your HTML file:
and this code in your controller:
ng-model
This is another common directive that sets the value of the input to a value in the controller.
This will populate our input with whatever the value of username is in our controller then the value of the input would be used to reassign the value of username.
ng-class
If you need to dynamically remove or add classes, ng-class is the directive for you! ng-class takes in an object, with the keys being the class you want to dynamically add and the value being an expression. If the expression evaluates to true, the class will be added. If it evaluates to false, the class will be removed. We are going to add an ng-class to our ng-repeat example.
ng-repeat=” cat in vm.cats” is telling Angular that we want to iterate over the cats array and to put the value of each object into the variable, cat. Line 5 looks complicated but it's actually really similar to how we write an expression in vanilla JavaScript. This just checks the truthy value of cat.adopted. If the expression returns true, it will print “Found a family” but if it is false, it will return “looking for a family :(“.
The ng-class=”{‘adopted’: cat.adopted}” checks our cat.adopted value and if it returns true, it adds that cat to the adopted class.
Thank you for taking the time to read my blog post! Follow me for ore technical blog posts!
