In this article by Stephen Radford, author of the book Learning Web Development with Bootstrap and AngularJS, we're going to use Bootstrap and AngularJS. We'll look at building a maintainable code base as well as exploring the full potential of both frameworks.

(For more resources related to this topic, see here.)

Working with directives

Something we've been using already without knowing it is what Angular calls directives. These are essentially powerful functions that can be called from an attribute or even its own element, and Angular is full of them. Whether we want to loop data, handle clicks, or submit forms, Angular will speed everything up for us.

We first used a directive to initialize Angular on the page using ng-app, and all of the directives we're going to look at in this article are used in the same way—by adding an attribute to an element.

Before we take a look at some more of the built-in directives, we need to quickly make a controller. Create a new file and call it controller.js. Save this to your js directory within your project and open it up in your editor.

Controllers are just standard JS constructor functions that we can inject Angular's services such as $scope into. These functions are instantiated when Angular detects the ng-controller attribute. As such, we can have multiple instances of the same controller within our application, allowing us to reuse a lot of code. This familiar function declaration is all we need for our controller.

function AppCtrl(){
}

To let the framework know this is the controller we want to use, we need to include this on the page after Angular is loaded and also attach the ng-controller directive to our opening <html> tag:

<html ng-controller="AppCtl">
…
<script type="text/javascript"
src="assets/js/controller.js"></script>

ng-click and ng-mouseover

One of the most basic things you'll have ever done with JavaScript is listened for a click event. This could have been using the onclick attribute on an element, using jQuery, or even with an event listener. In Angular, we use a directive.

To demonstrate this, we'll create a button that will launch an alert box—simple stuff. First, let's add the button to our content area we created earlier:

<div class="col-sm-8">
<button>Click Me</button>
</div>

If you open this up in your browser, you'll see a standard HTML button created—no surprises there. Before we attach the directive to this element, we need to create a handler in our controller. This is just a function within our controller that is attached to the scope. It's very important we attach our function to the scope or we won't be able to access it from our view at all:

function AppCtl($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}

As we already know, we can have multiple scopes on a page and these are just objects that Angular allows the view and the controller to have access to. In order for the controller to have access, we've injected the $scope service into our controller. This service provides us with the scope Angular creates on the element we added the ng-controller attribute to.

Angular relies heavily on dependency injection, which you may or may not be familiar with. As we've seen, Angular is split into modules and services. Each of these modules and services depend upon one another and dependency injection provides referential transparency. When unit testing, we can also mock objects that will be injected to confirm our test results. DI allows us to tell Angular what services our controller depends upon, and the framework will resolve these for us.

An in-depth explanation of AngularJS' dependency injection can be found in the official documentation at https://docs.angularjs.org/guide/di.

Okay, so our handler is set up; now we just need to add our directive to the button. Just like before, we need to add it as an additional attribute. This time, we're going to pass through the name of the function we're looking to execute, which in this case is clickHandler. Angular will evaluate anything we put within our directive as an AngularJS expression, so we need to be sure to include two parentheses indicating that this is a function we're calling:

<button ng-click="clickHandler()">Click Me</button>

If you load this up in your browser, you'll be presented with an alert box when you click the button. You'll also notice that we don't need to include the $scope variable when calling the function in our view. Functions and variables that can be accessed from the view live within the current scope or any ancestor scope.

lets-build-angularjs-and-bootstrap-img-0

Should we wish to display our alert box on hover instead of click, it's just a case of changing the name of the directive to ng-mouseover, as they both function in the exact same way.

ng-init

The ng-init directive is designed to evaluate an expression on the current scope and can be used on its own or in conjunction with other directives. It's executed at a higher priority than other directives to ensure the expression is evaluated in time.

Here's a basic example of ng-init in action:

<div ng-init="test = 'Hello, World'"></div>
{{test}}

This will display Hello, World onscreen when the application is loaded in your browser. Above, we've set the value of the test model and then used the double curly-brace syntax to display it.

ng-show and ng-hide

There will be times when you'll need to control whether an element is displayed programmatically. Both ng-show and ng-hide can be controlled by the value returned from a function or a model.

We can extend upon our clickHandler function we created to demonstrate the ng-click directive to toggle the visibility of our element. We'll do this by creating a new model and toggling the value between true or false.

First of all, let's create the element we're going to be showing or hiding. Pop this below your button:

<div ng-hide="isHidden">
Click the button above to toggle.
</div>

The value within the ng-hide attribute is our model. Because this is within our scope, we can easily modify it within our controller:

$scope.clickHandler = function(){
$scope.isHidden = !$scope.isHidden;
};

Here we're just reversing the value of our model, which in turn toggles the visibility of our <div>.

If you open up your browser, you'll notice that the element isn't hidden by default. There are a few ways we could tackle this. Firstly, we could set the value of $scope.hidden to true within our controller. We could also set the value of hidden to true using the ng-init directive. Alternatively, we could switch to the ng-show directive, which functions in reverse to ng-hide and will only make an element visible if a model's value is set to true.

Ensure Angular is loaded within your header or ng-hide and ng-show won't function correctly. This is because Angular uses its own classes to hide elements and these need to be loaded on page render.

ng-if

Angular also includes an ng-if directive that works in a similar fashion to ng-show and ng-hide. However, ng-if actually removes the element from the DOM whereas ng-show and ng-hide just toggles the elements' visibility.

Let's take a quick look at how we'd use ng-if with the preceding code:

<div ng-if="isHidden">
Click the button above to toggle.
</div>

If we wanted to reverse the statement's meaning, we'd simply just need to add an exclamation point before our expression:

<div ng-if="!isHidden">
Click the button above to toggle.
</div>

ng-repeat

Something you'll come across very quickly when building a web app is the need to render an array of items. For example, in our contacts manager, this would be a list of contacts, but it could be anything. Angular allows us to do this with the ng-repeat directive.

Here's an example of some data we may come across. It's array of objects with multiple properties within it. To display the data, we're going to need to be able to access each of the properties. Thankfully, ng-repeat allows us to do just that.

Here's our controller with an array of contact objects assigned to the contacts model:

function AppCtrl($scope){
$scope.contacts = [
{
name: 'John Doe',
phone: '01234567890',
email: 'john@example.com'
},
{
name: 'Karan Bromwich',
phone: '09876543210',
email: 'karan@email.com'
}
];
}

We have just a couple of contacts here, but as you can imagine, this could be hundreds of contacts served from an API that just wouldn't be feasible to work with without ng-repeat.

First, add an array of contacts to your controller and assign it to $scope.contacts. Next, open up your index.html file and create a <ul> tag. We're going to be repeating a list item within this unordered list so this is the element we need to add our directive to:

<ul>
<li ng-repeat="contact in contacts"></li>
</ul>

If you're familiar with how loops work in PHP or Ruby, then you'll feel right at home here. We create a variable that we can access within the current element being looped. The variable after the in keyword references the model we created on $scope within our controller. This now gives us the ability to access any of the properties set on that object with each iteration or item repeated gaining a new scope. We can display these on the page using Angular's double curly-brace syntax.

<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}
</li>
</ul>

You'll notice that this outputs the name within our list item as expected, and we can easily access any property on our contact object by referencing it using the standard dot syntax.

ng-class

Often there are times where you'll want to change or add a class to an element programmatically. We can use the ng-class directive to achieve this. It will let us define a class to add or remove based on the value of a model.

There are a couple of ways we can utilize ng-class. In its most simple form, Angular will apply the value of the model as a CSS class to the element:

<div ng-class="exampleClass"></div>

Should the model referenced be undefined or false, Angular won't apply a class. This is great for single classes, but what if you want a little more control or want to apply multiple classes to a single element? Try this:

<div ng-class="{className: model, class2: model2}"></div>

Here, the expression is a little different. We've got a map of class names with the model we wish to check against. If the model returns true, then the class will be added to the element.

Let's take a look at this in action. We'll use checkboxes with the ng-model attribute, to apply some classes to a paragraph:

<p ng-class="{'text-center': center, 'text-danger': error}">
Lorem ipsum dolor sit amet
</p>

I've added two Bootstrap classes: text-center and text-danger. These observe a couple of models, which we can quickly change with some checkboxes:

The single quotations around the class names within the expression are only required when using hyphens, or an error will be thrown by Angular.

<label><input type="checkbox" ng-model="center"> textcenter</
label>
<label><input type="checkbox" ng-model="error"> textdanger</
label>

When these checkboxes are checked, the relevant classes will be applied to our element.

ng-style

In a similar way to ng-class, this directive is designed to allow us to dynamically style an element with Angular. To demonstrate this, we'll create a third checkbox that will apply some additional styles to our paragraph element.

The ng-style directive uses a standard JavaScript object, with the keys being the property we wish to change (for example, color and background). This can be applied from a model or a value returned from a function.

Let's take a look at hooking it up to a function that will check a model. We can then add this to our checkbox to turn the styles off and on.

First, open up your controller.js file and create a new function attached to the scope. I'm calling mine styleDemo:

$scope.styleDemo = function(){
if(!$scope.styler){
return;
}
return {
background: 'red',
fontWeight: 'bold'
};
};

Inside the function, we need to check the value of a model; in this example, it's called styler. If it's false, we don't need to return anything, otherwise we're returning an object with our CSS properties. You'll notice that we used fontWeight rather than font-weight in our returned object. Either is fine, and Angular will automatically switch the CamelCase over to the correct CSS property. Just remember than when using hyphens in JavaScript object keys, you'll need to wrap them in quotation marks.

This model is going to be attached to a checkbox, just like we did with ng-class:

<label><input type="checkbox" ng-model="styler"> ng-style</label>

The last thing we need to do is add the ng-style directive to our paragraph element:

<p .. ng-style="styleDemo()">
Lorem ipsum dolor sit amet
</p>

Angular is clever enough to recall this function every time the scope changes. This means that as soon as our model's value changes from false to true, our styles will be applied and vice versa.

ng-cloak

The final directive we're going to look at is ng-cloak. When using Angular's templates within our HTML page, the double curly braces are temporarily displayed before AngularJS has finished loading and compiling everything on our page. To get around this, we need to temporarily hide our template before it's finished rendering.

Angular allows us to do this with the ng-cloak directive. This sets an additional style on our element whilst it's being loaded: display: none !important;.

To ensure there's no flashing while content is being loaded, it's important that Angular is loaded in the head section of our HTML page.

Summary

We've covered a lot in this article, let's recap it all.

Bootstrap allowed us to quickly create a responsive navigation. We needed to include the JavaScript file included with our Bootstrap download to enable the toggle on the mobile navigation.

We also looked at the powerful responsive grid system included with Bootstrap and created a simple two-column layout. While we were doing this, we learnt about the four different column class prefixes as well as nesting our grid. To adapt our layout, we discovered some of the helper classes included with the framework to allow us to float, center, and hide elements.

In this article, we saw in detail Angular's built-in directives: functions Angular allows us to use from within our view. Before we could look at them, we needed to create a controller, which is just a function that we can pass Angular's services into using dependency injection.

Directives such as ng-click and ng-mouseover are essentially just new ways of handling events that you will have no doubt done using either jQuery or vanilla JavaScript. However, directives such as ng-repeat will probably be a completely new way of working. It brings some logic directly within our view to loop through data and display it on the page.

We also looked at directives that observe models on our scope and perform different actions based on their values. Directives like ng-show and ng-hide will show or hide an element based on a model's value. We also saw this in action in ng-class, which allowed us to add some classes to our elements based on our models' values.