March 10, 2014 at 09:09

Application Example - Phone Book on AngularJS + Bootstrap v3

  • Tutorial
The Angular community needs fresh tutorials and tutorials with simple examples on the latest library versions. The rules that worked in Angular v0.X aren’t all valid, which is easy to see, but I want to parse something more complicated than a filter from a tutorial on the site and a TODO list from implementation examples (such as found for v1 .0.3: jsfiddle.net/dakra/U3pVM ). When such examples seem too simple, I want to look at the development of the problem statement and an application that is closer to reality with some style design.

An example application is offered for attention - work with the phone book in 2 lists: main and spam. Each of the lists is subject to filtering (well, this is the simplest and most built-in framework), editing elements, adding new ones and deleting existing ones. With one click, elements are transferred from one list to another, and the highlighting of elements is made in the style of Bootstrap v.3.

An example is recommended for analysis, when you read the tutorial and looked at the work of one or two of the first Angular applications, and questions arose in which options (easier) can it still work. Usually they look on the Internet and look for examples of the implementation of simple pages, but there are a lot of outdated options that are very simple or that analyze particular types of animations.

The example went quite far from the Hello World and not very far from the TODO List. There are no aerobatic techniques such as directives (except for the ng-model attributes), there are no controllers working with services, although two controllers are present (ng-controller = "addressController", ng-controller = "addressEditController") and each has its own variable $ scope - the main root of the objects of each controller. There are no modules (there is a purely formal var ddd2 = angular.module ("ddd", []); which could be omitted). That is, this example illuminates some of the Angular techniques to separate them from other parts and show that many other parts are not required to work with view and controllers.

Main trends


Variables and methods are combined in each controller under the $ scope object (hash). The controller is based on the HTML element, which contains the name of the controller in the ng-controller attribute.

In the code, you can see the use of list templates, none of which require a separate description or loading from another file. Instead, such templates (directives) quite clearly describe the structure of future lists, as programs with loops would describe the logic of their work.

From the event subsystem in the example, only quite obvious clicks on buttons and in one place - on the block title (and the block itself is turned into a pop-up by styles) are involved.

In addition, there is a panel of unit tests without being tied to any framework - simply self-test, showing that even without Jasmine with Karma, you can manually test something and easily place it in the list of results. The debug panel shows a JSON representation of the list. Everything is interconnected, changes, as expected, drag dependent views: lists and JSON in the debug panel. For a change, the first list is filtered by a different method (via CSS) than the second, which shows the relative flexibility of design options.

As expected for a case study, the complexity of the solution is increased compared to the initial TODO list, but not to the end - not to the finished application. An example in Angular is not tied to the server, the changes live only in the browser, and the start data starts with a small list taken from the JS code (controller of the main data list). Even localStorage is not involved, although it would not be difficult, but it would not give anything for an additional understanding of Angular. The example runs without a web server and AJAX requests.

The code


It is better to watch it in action by links or on your computer, change it in jsfiddle or at home, add features using the API and watch what happens in the browser.

  • There is a demo option that does not require external libraries (both AngularJS v.1.2.10 and Bootstrap v3.1.1 are in uncompressed form with comments on the same domain).

  • There is - jsfiddle , which allows you to experiment, it loads compressed versions of libraries from CDN.

  • And there are 3 files on the github that will work without requiring a web server - right from the files on the computer.


How much code?


All codes are 300 lines of CSS (20%), HTML and JS (50%, 150 lines), the rest are libraries that are intentionally not compressed, and jQuery and jqLite from Angular are not used.

What do tests do?


3 tests check:
1. The presence of all non-empty names (fname) in each of the entries in the list array. Writing an empty name to the data is considered an error.
2. The process of recording a new list item (“contact”), then checks the correct location of the data and immediately removes the test record.
3. The presence of all non-empty phone numbers (though they are not validated for the correctness of dialing and generally for the presence of numbers). At first, several missing numbers were allowed in the “database”, so the “Inner phones validation” test falls ... Now you know what to do with the database so that, without touching the code, you can correct the test. (Yes, add phones or something to the “phone” fields or simply delete inappropriate entries.)

The volume of tests is 40 lines of JS.

What can be done next?


Enthusiasts of quality code can be motivated by the idea of ​​improving the methodological value of this enterprise. He has room to grow.
1) add multilingual support;
2) write testing in the style of Angular;
3) connect the server (but so that nothing breaks without it).

In any case, any improvement is preferably done in the form of a chain of complicated demos, as is done in the Angular tutorial. I would like to see on the neighboring pages of Github improved and gradually more complicated options for the development of this page, with the multiplication of good practices and maintaining the simplicity of the approach.

Hope this example helps with parsing the standard AngularJS 1.2.X standard tutorials and APIs.

Related Literature:


Advance:
Tags:

Also popular now: