Geekly Articles each Day
📜 ⬆️ ⬇️

Sample Application - Phonebook on AngularJS + Bootstrap v3

The Angular community needs fresh tutorials and tutorials with simple examples on the latest library versions. The rules that worked in Angular v0.X no longer all work, which is easy to see, but I want to analyze something more complicated than the filter from the tutorial on the website and the TODO list from the examples of implementation (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 close to reality with some styling.

The example of the application is offered to attention - works with the phone book in 2 lists: the main and “spam”. Each of the lists is subject to filtering (well, this is the simplest and built-in framework), editing elements, adding new ones and deleting existing ones. Elements are transferred from one list to another with one click, and elements are highlighted in the style of Bootstrap v.3.

The example is recommended for parsing, when you read the tutorial and looked at the work of one or two first Angular applications, and there were questions in which options (simpler) it might still work. Usually they look on the Internet and look for examples of the implementation of simple pages, but there are a lot of obsolete options that are very simple or dismantle particular types of animations.

The example went quite far from “Hello World” and not very far from “TODO List”. There are no high-level directive techniques (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 not be written). That is, this example covers part of the Angular techniques to separate them from other parts and to show that many other parts are not necessary in order to work with view and controllers.
')

Main trends


Variables and methods are combined in each controller under the object (hash) $ scope. The controller is based on the HTML element, in which the controller name is written 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 cycles would describe the logic of their work.

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

Additionally, there is a panel of unit tests without reference to any framework - just self-written checks showing that even without Jasmine with Karma, something can be manually tested and easily arranged in the list of results. The debug panel shows the JSON list view. Everything is interconnected, the changes, as it should be, are pulling after them 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 the design options.

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

Code


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



How much code?


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

What do the 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 verifies the correctness of the location of the data and immediately removes the test record.
3. The presence of all non-empty phone numbers (although they are not validated for correct dialing and in general for the presence of numbers). At first, there are several missing numbers in the “database”, so the “Inner phones validation” test drops ... Now you know what to do with the database so that, without touching the code, you can correct the test readings. (Yes, add phones or something in 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 encourage the idea to improve 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 done in the Angular textbook. I would like to see on the neighboring pages of Gitkhab improved and gradually complicating options for the development of this page, with the multiplication of good practices and preserving the simplicity of the approach.

I hope that this example will help in the analysis of standard tutorials and API AngularJS 1.2.X.

Related literature:


Advanced:

Source: https://habr.com/ru/post/215185/

More articles:


All Articles