March 7, 2016 8:46 pm

Creating the HTML view of a simple CRUD to do list with Angular.js Part 1

Angular.js is a popular open-source web application framework maintained primarily by Google. It enhances the time that is required to complete an application tremendously by allowing you to insert different JavaScript logic directly into the HTML through services, directives and the alike. Using it, you can prototype faster MVC and MVVM applications.

Creating the HTML view of a simple CRUD to do list with Angular.js

The to do list

Let us start by creating the page which users will receive upon entering the to do list app. In its head tag, we first load the Angular.js script from a CDN along with Twitter Bootstrap for faster prototyping. We also load a Bootswatch theme so that the prototyping involves a non-standard dark theme.

Part 2: Creating the HTML view of a simple CRUD to do list with Angular.js Part 2

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/darkly/bootstrap.min.css">

Then, we load the JavaScript files that our application would need. In our case, we would only need one file which would contain the module itself and a single controller. Controllers in Angular.js are JavaScript functions which would hold different methods and properties. In our HTML view, we will define the controller an element uses and all of its child elements would also be able to use the properties and methods of that controller. You can use those properties and methods in the HTML view through Angular’s data binding or through various built-in directives.

Angular.js provides a two-way data binding through the usage of the {{ expression }} syntax in your HTML view (this also escapes any HTML before displaying it) and through the ng-model directive. This essentially means that you only have to change its value in one place and all places where you display it to the user will be refreshed to show its new value.

To enable Angular.js in your app, besides loading its JavaScript file you would have to define a ng-app directive to one of your elements. In the to do list, we have attached the controller and the app to the body element.

<body ng-controller="todoController" ng-init="loadTodo();" ng-app="ultimateTodo">

The ng-init directive allows us to execute arbitrary JavaScript in the scope of the element where it is placed. In our case, we call the loadToDo() function located inside our todoController. The elements to which a controller is applied can just use its properties and methods like if you are using local/global variables.

<input type="text" ng-model="todoItem" class="form-control">

Afterwards, we set up an input and attach the directive ng-model to it. This would enable us to get the up-to-date value of the input (as typed by the user) in our controller.

<input class="btn btn-lg btn-default" type="button" ng-click="saveTodoItem();" value="Add Item">

Thereafter, we create a button which when clicked would call saveTodoItem() in our controller (todoController). We achieve this through the ng-click directive.

<div class="container-fluid">
<ul class="list-group">
<li ng-repeat="item in todo" class="list-group-item"> <span class="theItem" style="text-decoration:underline;" contenteditable>{{ item }} </span>
<span ng-click="editTodoItem($index)" style="cursor: pointer; color:darkgreen;" class="glyphicon glyphicon-save"></span> <span ng-click="removeTodoItem($index)" style="color: crimson;cursor: pointer;" class="glyphicon glyphicon-remove"></span></li>
</ul>

In the end of our HTML view, we display all saved to do items with the help of the ng-repeat directive and add two more click listeners. One used when the user wants remove an item and another used when the user wants to edit an item.

Conclusion

We have seen the basics of using Angular.js in HTML views. The next article would deal with coding the actual controller that would perform the CRUD logic behind this HTML view.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

One response to “Creating the HTML view of a simple CRUD to do list with Angular.js Part 1”

  1. Antonio says:

    Hello, if you add two times the same item the application crashes because duplicates in a repeater are not allowed.
    I suggest you to edit ‘ng-repeat=”item in todo”‘ in ‘ng-repeat=”item in todo track by $index”‘ in index.html

Leave a Reply

Your email address will not be published. Required fields are marked *