Aug 13, 2013

Angular.js – create reusable HTML widgets with directives

What is a directive?

Angular directives are a very powerful component of the Angular framework. They can control how the page is rendered in many different ways. Many of the attributes and tags built in to Angular are directives, such as ‘ng-show’, ‘ng-hide’, ‘ng-repeat’, etc. One way they can be used is to create HTML an widget that you can re-use across different partials.

How to create a simple directive

The Angular.js directive documentation goes into deep technical detail on how directives are implemented. This deep dive could be useful for complex directives, but it can obscure how easy it is to create simple directives. For example, suppose we want a re-usable HTML widget that messages displays to the user. The first thing we’ll do is create the directive:

As you can see, the code to define the directive is pretty minimal. The ‘scope: false’ tells Angular to not create a separate scope for the directive and just pass through the scope from the parent controller. And the ‘restrict: E’ says to only allow this directive to be used in an HTML element.

Next, let’s create the template body:

partials/widgets/messages.html:

Since we set ‘scope: false’ in the directive definition, errorMessage and successMessage are coming from the parent controller’s $scope. The controller code may contain something along these lines:

Finally, to use the new widget we just include this snippet in one of our partials:

And that’s a quick way to create a re-usable HTML widget with Angular.js.

About the Author

Object Partners profile.

One thought on “Angular.js – create reusable HTML widgets with directives

Comments are closed.

Related Blog Posts
Snowflake CI/CD using Jenkins and Schemachange
CI/CD and Management of Data Warehouses can be a serious challenge. In this blog you will learn how to setup CI/CD for Snowflake using Schemachange, Github, and Jenkins. For access to the code check out […]
How to get your pull requests approved more quickly
TL;DR The fewer reviews necessary, the quicker your PR gets approved. Code reviews serve an essential function on any software codebase. Done right, they help ensure correctness, reliability, and maintainability of code. On many teams, […]
Kafka & Kubernetes: Scaling Consumers
Kafka and Kubernetes (K8s) are a great match. Kafka has knobs to optimize throughput and Kubernetes scales to multiply that throughput. On the consumer side, there are a few ways to improve scalability. Resource & […]
AWS RDS MYSQL Playground
Do you need a reliable database platform to hammer out some new application ideas? Or, maybe you’d like to learn MYSQL in a disposable environment? This Hashicorp Terraform MYSQL RDS Module will build all the […]