Making the AngularJS front-end look pretty
In the previous post, we set up our AngularJS project. In this post, we’ll make it look a little bit nicer before adding the functionality to call to the back-end service. The framework we’ll use is AngularJS Material which is an implementation of Material Design for the AngularJS framework. Material Design is a specification put together by Google that provides guidelines for not only how things should look, but also for how certain actions should behave.
Adding Material to our project
We’ll have to add a few npm modules to our project in order to use AngularJS Material. Go ahead and invoke:
npm install -S angular-animate angular-aria angular-material angular-messages
Now, we have to import them into our AngularJS module. Open up src/index.js and change it to the following:
import angular from 'angular';
import 'angular-route';
import 'angular-messages';
import 'angular-aria';
import 'angular-animate';
import 'angular-material';
import routes from './routes';
import home from './home.component';
var app = angular.module('todo', ['ngRoute', 'ngMaterial']);
app.config(routes);
app.component('home', home);
Next, we have to add the stylesheets and Roboto font. We’ll also add a toolbar to the top of the screen. Open index.html at the root of the project and change it to:
<html ng-app="todo"> <head> <script type="text/javascript" src="bundle.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.css"/> </head> <body> <md-toolbar class="md-whiteframe-4dp"> <div class="md-toolbar-tools">To do</div> </md-toolbar> <div ng-view class="md-padding"></div> </body> </html>
The first “link” tag will pull the Roboto font into our application. The second link will pull in the stylesheet from a CDN, or Content Delivery Network. We do have access to the stylesheet in our node_modules/angular-material folder, but we’ll get around to using that instead in another post.
The body has now been replaced with more mark up. “md-toolbar” is a component provided by the AngularJS Material framework and will render a toolbar at the top of the screen. Adding the “md-whiteframe-4dp” class is what gives it the nice drop shadow. You can adjust the size of the drop shadow by changing the “4dp” to something else. For instance, you could use “2dp” for a shallower shadow. The inner div and class is what gives us the layout for the nicer looking heading.
The div with our “ng-view” now has an “md-padding” class. This class will add inner padding to the div and make things look a little nicer. At this point you can go ahead and fire up your webpack-dev-server and open the application in your browser. You should see something like this:
Not too bad.
Let’s add our input field that we’ll use to add new to-dos.
Open up home.html and change it to:
<span> <md-input-container> <label>Description</label> <input ng-model="newDescription" ng-keypress="onKeyPress($event)"> </md-input-container> <md-button class="md-raised md-primary" ng-click="onClickAdd()">Add</md-button> <md-divider></md-divider> <!-- INSERT LIST HERE --> </span>
Here, we’re adding a stylized input field and binding it to the “newDescription” variable within our scope. We’re also binding the “keypress” event to a function in our controller and adding a blue button with the “Add” label and binding its click event to another function on the controller.
Finally, we add a divider to split our input and output sections of the screen. This may not be in accordance with Material Design, but it’s fine for our purposes.
Next, go to src/home.component.js and change the controller function to:
$scope.newDescription = "";
this.$onInit = function() {
console.log("Hello");
}
$scope.onClickAdd = function() {
$scope.newDescription = '';
}
$scope.onKeyPress = function($event) {
if ($event.keyCode === 13) {
$scope.onClickAdd();
}
}
We’ve defined our “newDescription” variable on the scope so that we can access it in our template file and we’ve defined two methods on the scope for the same reason.
Every time a key is pressed within our text field, the “onKeyPress” method will fire. It won’t do anything unless a specific key was pressed. In this case, 13, represents the enter key. If enter was pressed it will call the “onClickAdd” function. For now, all it will do is clear out our input field.
If you refresh the UI you should now see something like this:
That’s it for this post. In the next we’ll add code to talk to our back-end server.
Source code to the entire series is available here:
