Tutorial AngularJS: A Comprehensive Guide, Part 1

Content

1 Introduction to AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $ scope
5 controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic routing with $ routeProvider
13 Form Validation
14 Server communication with $ http and $ resource

1 Introduction to AngularJS

Angular is a MVW framework for developing high-quality client-side web applications in JavaScript. It is created and maintained at Google and offers a look at the future of the web, at what new features and standards it is preparing for us.

MVW stands for Model-View-Whatever (model-view-whatever), that is, flexibility in choosing design patterns when developing applications. We can choose MVC (Model-View-Controller) or MVVM (Model-View-ViewModel) models.
')
This tutorial was conceived as a starting point for exploring AngularJS, its concepts and APIs to help you create great web applications in a modern way.

AngularJS positions itself as an HTML enhancement framework. He collected concepts from different programming languages, both JavaScript and server-based, and also makes HTML dynamic. We get a data-driven approach to application development. There is no need to update the Model, DOM or do some other time-consuming operations, for example, to correct browser errors. We focus on the data, the data takes care of the HTML, and we are just programming the application.

Engineering concepts in JavaScript frameworks

AngularJS’s position on working with data and other engineering concepts is different from frameworks such as Backbone.js and Ember.js. We are content with the HTML we already know, and Angular improves it on its own. Angular updates the DOM for any changes to the Model that lives itself in pure JavaScript Objects in order to communicate with the data. When a Model is updated, Angular updates Objects that contain up-to-date information about the state of the application.

2.1 MVC and MVVM

If you are used to making static sites, you are familiar with the process of creating HTML manually, piece by piece, when you enter the necessary data into the page and repeat similar parts of HTML again and again. These can be grid bars, structure for navigation, a list of links or pictures, etc. When one small detail changes, you have to update the entire template, and all subsequent uses. You also have to copy the same pieces of code for each navigation item.

Hold on to the chair - Angular has a separation of duties and dynamic HTML. And this means that our data lives in the Model, our HTML lives in the form of a small template that will be transformed into a View, and we use the Controller to connect these two concepts, providing support for changes to the Model and the View. That is, navigation can be displayed dynamically, created from one element of the list, and automatically repeated for each item from the Model. This is a simplified concept, later we'll talk more about templates.

The difference between MVC and MVVM is that MVVM is specifically designed for developing interfaces. The view consists of the presentation layer, the View Model contains the presentation logic, and the Model contains the business logic and data. MVVM was designed to facilitate two-way data communication, on which AngularJS frameworks thrive. We will focus on the way of MVVM, since in recent years Angular has been leaning there.

2.2 Two-way data communication

Two-way data communication is a very simple concept, providing synchronization between the Model and View layers. Changes to the Model are transferred to the View, and changes to the View are automatically reflected in the Model. Thus, the Model becomes an up-to-date source of application state data.

Angular uses simple JavaScript Objects to synchronize the Model and the View, making it easy and pleasant to update any of them. Angular converts data to JSON and best communicates using the REST method. Using this approach, it is easier to build front-end applications, because the entire state of the application is stored in the browser, and not transferred from the server in pieces, and there is no fear that the state will be damaged or lost.

We bind these values ​​through Angular expressions, which are available as control patterns. We can also link Models through an attribute called ng-model. Angular uses its attributes for different APIs that access the Angular core.

2.3 Dependency Injection (DI)

DI is a software design pattern that defines how components are associated with their dependencies. Injection is the transfer of dependencies to a dependent Object, and these dependencies are often called Services.

In AngularJS, we slyly use function arguments to declare the dependencies we need, and Angular passes them to us. If we forget to pass the dependency, but we refer to it where we need it, the Service will not be defined and as a result there will be a compilation error inside Angular. But do not worry, angular throws out its errors and they are very easy to debug.

2.4 Single page application (SPA) applications, state management and Ajax (HTTP)

In the application for one page (SPA) or all the necessary code (HTML, CSS and JavaScript) is called for one page load, or the necessary resources are connected dynamically and added to the page as needed, usually in response to user actions. The page does not reload during operation, does not transfer control to another page, although modern technologies from HTML5 allow one application to work on several logical pages. Interaction with the SPA often occurs through background communication with the server.

In older applications, when the program state was stored on the server, there were differences between what the user sees and what was stored on the server. There was also a lack of application state in the model, since all data was stored in HTML templates and was not dynamic. The server prepared a static template, the user entered the information there and the browser sent it back, after which the page was reloaded and the backend updated the state. Any unsaved state was lost, and the browser had to download all the data after updating the pages again.

Times have changed, the browser stores the state of the application, complex logic and frameworks have become popular. AngularJS stores the state in the browser and sends changes, if necessary, via Ajax (HTTP) using the GET, POST, PUT and DELETE methods. The beauty is that the server can be independent of the frotend, and the frontend can be independent of the server. The same servers can work with mobile applications with a completely different frontend. This gives us flexibility, since on the backend we work with JSON data in any way convenient to us on any server programmatic component.

2.5 Application structure

Angular has different APIs, but the structure of the application is usually the same, so almost all applications are built in a similar way and developers can be included in the project without effort. It also provides predictable APIs and debugging processes, which reduces development time and rapid prototyping. Angular is built around testability to be the easiest to develop and test.

Let's study.

3 Modules

All applications are created through modules. The module may depend on others, or be single. Modules serve as containers for different sections of an application, thus making code reusable. To create a module, use the global Object, the framework namespace, and the module method.

3.1 setters

The application has one app module.

angular.module('app', []); 

The second argument is [] - usually this array contains the dependencies of the module that we need to connect. Modules may depend on other modules, which in turn may also have dependencies. In our case, the array is empty.

3.2 Getters

To create Controllers, Directives, Services, and other features, we need to refer to an existing module. There is an inconspicuous difference in the syntax - we do not use the second argument.

 angular.module('app'); 

3.3 Module operation

Modules can be stored and called via a variable. Here is an example of storing a module in a variable.

 var app = angular.module('app', []); 

Now we can use the app variable to build the application.

3.4 HTML bootstrap

To describe where the application is in the DOM, and usually this is the <html> element, we need to associate the ng-app attribute with the module. So we tell Angular where to load our application.

 <html ng-app="app"> <head></head> <body></body> </html> 

If we load files with JavaScript asynchronously, we need to load the application manually via angular.bootstrap (document.documentElement, ['app']) ;.

4 Understanding $ scope

One of the basic concepts in programming is scope. In Angular, the scope is one of the main objects that makes it possible to have two-way data communication cycles and save the state of the application. $ scope is a pretty tricky object that not only has access to data and values, but also provides this data to the DOM when Angular renders our application.

Imagine that $ scope is an automatic bridge between JavaScript and DOM that stores synchronized data. This makes it easier to work with templates when we use HTML syntax while Angular renders the corresponding $ scope values. This creates a link between javascript and dom. In general, $ scope plays the role of a ViewModel.

$ scope is used only within Controllers. There we bind the Controller data to the View. Here is an example of how we declare data in the Controller:

 $scope.someValue = 'Hello'; 

In order for this to appear in the DOM, we must attach the Controller to the HTML and tell Angular where to insert the value.

 <div ng-controller="AppCtrl"> {{ someValue }} </div> 

This is an Angular scope concept that obeys some JavaScript rules in terms of lexical scope. Outside the element to which the controller is attached, the data is out of scope — just as a variable would go out of scope if we referenced it outside its scope.

We can bind any type of JavaScript $ scope. Thus, we take data from the service communicating with the server and transfer it to the View, the presentation layer.

The more we create Controllers and data links, the more scopes appear. Understanding their hierarchy costs nothing - here the $ rootScope variable will help us.

Part 2