AngularJS Tutorial: A Comprehensive Guide, Part 1

Original author: Todd Motto
  • Transfer
  • Tutorial


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 an MVW framework for developing quality JavaScript web client applications. It was created and maintained by 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 between MVC (Model-View-Controller) or MVVM (Model-View-ViewModel) models.

This tutorial was intended as a starting point for learning AngularJS, its concepts and APIs, to help you create great web applications in a modern way.

AngularJS is positioning itself as a framework for improving HTML. He has compiled concepts from various programming languages, both JavaScript and server-side, and is also making something dynamic out of HTML. We get a data-based approach to application development. There is no need to update the Model, DOM or do any other time-consuming operations, for example, to fix browser errors. We focus on the data, the data takes care of the HTML, and we just do the programming of the application.

Engineering concepts in JavaScript frameworks

AngularJS's position on working with data and other engineering concepts differs from frameworks such as Backbone.js and Ember.js. We are content with the HTML we already know, and Angular improves it ourselves. Angular updates the DOM with any changes to the Model that lives in pure JavaScript Objects in order to communicate with the data. When the Model is updated, Angular updates the Objects that contain the current state of the application.

2.1 MVC and MVVM

If you are used to creating static sites, you are familiar with the process of creating HTML manually, piece by piece, when you enter the data you need into the page and repeat the similar parts of HTML again and again. These can be lattice columns, a 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 use. 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. This means that our data lives in the Model, our HTML lives in the form of a small template that will be converted to a View, and we use the Controller to connect these two concepts, providing support for changes to the Model and View. That is, navigation can be displayed dynamically, created from one list item, and automatically repeated for each item from the Model. This is a simplified concept, later we will talk more about templates.

The difference between MVC and MVVM is that MVVM is specifically designed for interface development. A view consists of a presentation layer, a ViewModel contains presentation logic, and a Model contains business logic and data. MVVM was designed to facilitate two-way data communications, on which frameworks such as AngularJS thrive. We will focus on the MVVM path, as in recent years, Angular is leaning there.

2.2 Two-way data communication

Two-way data communication is a very simple concept that provides 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 actual source of data on the state of the application.

Angular uses simple JavaScript Objects to synchronize the Model and View, making it easy and fun to update any of them. Angular converts data to JSON and communicates best with 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 is not transmitted from the server in pieces, and there is no fear that the state will be corrupted or lost.

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

2.3 Dependency Injection (DI)

DI is a program development template that defines how components communicate with their dependencies. Injection is the transfer of a dependency to a dependent Object, and these dependencies are often called Services.

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

2.4 Single Page Application (SPA), State Management, and Ajax (HTTP)

In a single page application (SPA), either all the necessary code (HTML, CSS and JavaScript) is called up in one page load, or the necessary resources are connected dynamically and added to the page as necessary, 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 SPA often occurs through background communication with the server.

In older applications, when the state of the program 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 were not dynamic. The server prepared a static template, the user entered information there and the browser sent it back, after which the page reloaded and the backend updated the state. Any unsaved state was lost, and the browser needed 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 gained popularity. AngularJS stores state in the browser and passes the changes if necessary through Ajax (HTTP) using the GET, POST, PUT and DELETE methods. The beauty is that the server can be independent of the frontend, and the front end 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 for us on any server-side language.

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 join the project effortlessly. 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 design and to test.

Let's study.

3 Modules

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

3.1 Setters

An application has one app module.

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

The second argument is [] - usually this array contains the module dependencies 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 reference an existing module. There is an imperceptible difference in the syntax - we do not use the second argument.


3.3 Operation of modules

Modules can be stored and called through 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 located in the DOM, and usually it is an element , we need to associate the ng-app attribute with the module. So we tell Angular where to load our application.

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

4 Understanding $ scope

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

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

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

$scope.someValue = 'Hello';

For this to appear in the DOM, we need to attach the Controller to the HTML and tell Angular where to insert the value.

{{ someValue }}

Here is the concept of the Angular scope, obeying some JavaScript rules in terms of lexical scopes. 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 referred to it outside of its scope.

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

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

Part 2

Also popular now: