Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.2 Advanced Angular Directives

In this lesson, I'll show you how to build an Angular directive with a dynamic template. The display template will be chosen based on the type of content passed to the directive.

Code Snippet

Here's an example of a directive that switches templates dynamically.

1.Advanced Angular Directives
2 lessons, 13:00

Free Lesson

Advanced Angular Directives

1.2 Advanced Angular Directives

[SOUND] Hello everyone. This is Reggie Dawson. Welcome to the Advanced Angular Directives Coffee Break course with TouchPlus. One of the key components of Angular are directives. Directives allow us to create HTML elements and insert them into our apps. These directives allow us to extend Angular and create reusable components that we can use in our project. In keeping with that, directives are understandably the area where most users of Angular get confused. Along with their confusion many people never learn all of the cool things that we can accomplish with directives. In this course, we will learn a technique to make our directives dynamic. In this example, we are going to be setting up a sample site that has a couple different post types. Depending on the post type, we want to deliver the correct template to display the correct post. We also want this to be modular so we can change post types later if we like. Let's get started setting up our project. Make sure you have no JS installed. Once we have node, then we can install bower. Then, once we have bower, we can run bower and it inside of our project folder. This will create a bower .json file that will track all of our dependencies in our project. When we run this command it will ask us some connections to build our bower.jason file. Just press enter to use the default responses. Then once we have our bower.jason file we can install angular Bower install save Angular will install Angular and add the dependency to bower.jsan file. Then after that, we install Angular UI router and add it too our dependencies as well. Now we don't necessarily need to use angular-ui-router, but I prefer this routing system and know it so well that I always add it to my Angular projects. After that, we're going to create our index.html file. Now this is a basic HTML file with the ng-app of directives attached to it. Directives is going to be the name of our angular app. Then we have our style sheet reference to our CSS file that we're going to use to style our app. After that we have our script reference for angular, angular u i router, and ap.js. As you can see, angular and angular u i router are available through the Bower components folder. Map.js is a custom java script file that we'll create to hold our application lodging. This will be stored in the JS folder. FInally in the body all we have is a UI viewer which is where UI router will load our templates. After that we can create our home.html file Home.html is the base that will load when our app is started. We can also create our CSS folder. Inside of your CSS folder create a file called app.css. Then after that create a GS folder Inside of the JS folder add the app.js file. After you add the app.js file, open it up. Now under normal circumstances I would separate all of the individual angular components into their own files. But for this course I will put all of the application logic into the app.js file first we will add our angular module. Here we have our at name of directives, which we specified in the HTML file. Our app also has UI Router as a dependency. Next we will configure our routing. Now this is not very complicated, as all we are doing in our routing is displaying one state. States basically correspond to a page in our app. In this case our config block has the state provider and the URL router provider injected. These services are offered as part of UI router. Then we have a state provider block for our home state, and this is the page that will be loaded when we navigate to the home state. The home state is also attached to the home controller, and as a result, we will not need to reference our controller in our home.html page. Finally, we have urlRouterProviderOtherwise, which will set our state when there is no state selected, such as when our app is first starting. In this case, this will set our start to the forward slash, which corresponds to the home state URL. As a result, the home state will be displayed. The next thing we need to do is configure a mock service. Typically, when we build angular apps, we will be using a remote service that we will access through HTTP request. Instead of using a remote service for our example, we will build a service that return some sample data. This sample data will be in the JSON format. Now here we have created an angular service named, App Data Service. As you may have noticed, we have two different post types we are returning. The image post type has an image attached that represents a sample image gallery. The text post type is just for a text article, and will displayed differently from the image post type. Also at the end of our service, we have the get media method also. This method is actually how we're going to return the data from our service. Now I'm going to fold our existing code so that we can see better like I did with the config module. Now after our service is done we will create our home controller. Here we are creating a controller named home controller which corresponds to the name we set up in our routing. Our controller has dependencies of scope and app data service. Inside this controller we attach our data from our service to our scope through scope article data. All of our poles will be stored in this variable. Once we are finished with our controller, we can actually get started on our directive. Now, this directive will involve a few tricks, as it's not easy to dynamically choose a template with a directive. First, we will create our directive. Here, we are using the same standard angular pattern to create our directive then we will return everything inside of this directive. First we will specify our template. Now, if you know anything about angular directives, you may be asking what this is all about. Normally we use template for in line HTML templates. If you want to use external files, we need to use template URL The problem is that template URL is called before our scope variables are available, and we are using these variables to specify what template to serve. To get around this, we are using the ng-include act to make this work. Technically we are still using the inline template, but now we are specifying it ng-include. We take it even further by attaching a function to the ng include instead of a url. I will explain more of what's happening here in a moment. Then we add our scope. Scope is one of the most important things you need to understand when using Angular. Now normally the default setting is to share the parent scope of the element that contains the directive but here we are creating a two binding for this particular property. In this case we are mapping the media property to the same property on the element that is hosting our directive. You will understand this more when we actually set it up in a moment. Next we will restrict our directive to just an element. This is optional and specifies that the only way we can use our directive is as an element. And finally we will set up a controller in our directive. Now directives don't typically need a controller but we can set them up if necessary. Here we are going to use this controller to determine what template to display. Here we are setting up a function called grabTemplate that will deliver the correct template depending on what kind of data we get back. First we are checking for the text type and delivering that text template. Then we're checking for the image type and delivering the correct template for the image type as well. You may notice that we are using the media variable to access these templates, the same variable we made available when we set up the scope. The Java script portion of our app is now done. All we have left to do is configure our templates and style sheet. First let's go to home.html. Home.html is the page that we set up in our routing and it is the only page that will display in our ad. As we know, this page will be loaded in the UI view on the index.html page. First we have a dig with NG repeat attached. NG repeat is a built in directive of angular that lets us loop over an array. Here we are using it to access the article data array we set up in our controller. On each loop, the data will be available on the article object. Now take note that our directive is created with camel case, but we use snake case to add our directive to our HTML page. That is because angular will normalize the directive name if we did not add the snake case our directive would not work. Since we restricted it to an element we can only use the directive in this way as a custom html element. Then we have the media tribute that is pointing at article. Here is the trickery that makes all this work. If we would have tried to access the value directly through the template tags, it would not work, as the attribute would not be available to the template. Here, we are using the entire article object and adding it to our scope. Our directive is going to use this object to determine what template to display. Remember, when we were checking in the grab template function, this is the data we are checking. This is all we need to set up in this file. Now let's create a template's folder, and inside this template folder let's add article-text.html and article-image.html. After we add the files we open up article-text.html. Again this is a straight forward file first we wrap the whole thing in a div then inside of this div we have a title div with the title and the author. Notice we are grabbing these values through the media variable. Remember this is the scope that we set up in our directive, then we grab the text of the post after that we can go overt to article-image.html this file is similar to the article-text.html file. We are wrapping it in a div and then inside we have our title. Again we are accessing everything through the media variable. Then we have our image which is going to display the image we have for this post. And finally we have the text of the post. After that our App is pretty much finished. Before we preview it let's add some styling to make our page look better. Open up app.css. First we will add our rules for the text post type. First we have our text class that wraps the text post. We are setting the width here and adding padding to the bottom. Then in the text title we set the width as well as the background and text color. And finally we set the text content with. Next we are going to add the styling for our image post. First we set the same styles as the div wrapping the text post. Then we set our image type to 200 pixels and our styles for our title text. The last thing you will need to do is get the images. I have included them in the source files or you can obtain your own. You can either rename your images to match what's returned from our servers or just change what's specified inside of the servers. It's up to you. Once you have the images, create a photo name IMG and save them there. After that the add is finished. Let's save everything in preview. Since I am using Cloud 9, I can open the index dotHTML file and click one after that I can preview. We should see our page with the proper template displaying, depending on what type of post it is. That's all you need to set up a custom directive that uses dynamic templates. The modular nature of the code allows us to add new post types as time passes very easily, all we have to do is add the new post type to our data and add the template. Once we have that we just need two lines of code in our directive. You should now understand directives a little better and have some ideas about how you can use dynamic templates in your projects.

Back to the top