How do I learn AngularJS with Java

Part 5: Get started - an app with the JavaScript framework Angular

We have made good progress on the way to learning new technologies and concepts for modern client-side web applications. A look at our agenda shows what is on the agenda today.

Let's briefly summarize what has happened so far for our readers who are only now joining our course. First, we looked at the technological basis for modern web applications. The architecture is based on a client-side design of the architecture. The technological basis is HTML5 for the design of the page structure (part 1); with that, the task of HTML5 is already done. To create expressive pages, HTML5 offers a number of new, specific tags. The design, d. H. the layout and design of a page, on the other hand, are done in CSS3 (part 2). Usually, HTML5 and CSS3 are not mixed in one file, but rather separated from one another. The CSS3 file to be used is referenced in the relevant HTML5 document and thus made known. With HTML5 and CSS3, the absolute basic technologies for the web, you can create, structure and design web applications according to your ideas. Even if you build server-side applications, for example based on PHP, you need both technologies. To add dynamism on the client side, i. H. in the browser, you have to use JavaScript (part 3). JavaScript is theScripting language that can now be processed by all modern web browsers. It is platform and device independent, i. H. Almost all browsers (Firefox, Safari, Edge ...) on all current operating systems (Windows, Linux, macOS, Android, iOS ...) and all device classes (desktop, mobile, tablet ...) can process JavaScript directly without any further additions. With the help of JavaScript one can provide for action and reaction, for example for the processing of user actions - data can be evaluated dynamically, graphics can be displayed on a drawing area in the browser. With the help of special APIs you can, for example, use the location services, query the battery status of mobile devices and much more. m.

JavaScript itself is supported by the browsers in different language standards. New features are not yet offered by all browsers, so that one should choose a more defensive approach when programming in order to achieve the broadest possible compatibility. You can also clearly see JavaScript's original character as a scripting language to this day. Modern and frequently used language features such as object orientation are not always easy to implement. These "discomforts", mostly in combination with a missing typing of the language, often have changers from another modern high-level language such as Java or C #. The solution for this can be the use of TypeScript (Part 4), a superset of JavaScript. TypeScript offers a reasonable syntax for object-oriented programming, the use of data types and other language features of modern programming languages. TypeScript is translated into JavaScript during the development process with the help of a transpiler (a special type of compiler). The JavaScript standard can be specified, which ensures maximum compatibility with all browsers used. In the end, the browser is only offered JavaScript for execution, so that no plug-ins or extensions are necessary. The triple of HTML5, CSS3 and JavaScript remains on the client (browser) side. From the developer's point of view, there is another positive aspect that every valid JavaScript code is also processed within TypeScript, i. That is, third-party JavaScript libraries and APIs can always be used without restrictions.

Basically, you now have everything on board to create web applications of any size and complexity. The disadvantage, however, is that you have to literally reinvent the wheel with every new project. Modern software development lives intensely from reuse. Web applications based on JavaScript, in particular, make extensive use of this. Libraries and frameworks are available for almost all requirements and programming problems that arise. They are offered via central package managers - such as npm - and can be integrated into existing projects for use with a single command. The use of libraries and frameworks is the topic of this part of the series of articles. In addition to the theoretical basics, we will look at the concrete use based on the Angular framework. We want to study the basic functionality and implement a first example application.

Libraries and frameworks as the basis for reuse

Modern software development is characterized by the fact that code for known problems and requirements is, if possible, not rewritten, but reused. In the web programming environment in particular, open source has led to the need to look for a generic library or a framework for more comprehensive questions before developing your own solution. In many cases, the effort can be reduced considerably, because you can fall back on tried and tested solutions, the error rate will decrease and your own resources can be invested in the specific problem.

So what is the difference between a library and a framework? In practice, the two basic elements of software creation and reuse are not always exactly separated.

Libraries

One developer speaks of a library, another of a framework. Basically, one can say: A library is a collection of functions, services, etc. - mostly in the form of generic classes that can be used by other programs. To use a library, you have to integrate it into your own project or import the elements to be used. Important: The library can be used largely without any restrictions from the program using it. She does i. d. Usually no specifications or restrictions regarding the structure of the program or the system architecture. Since you usually only use a few functions / services of a library, the size of the source code will increase more than if you had implemented the function independently. Still, the benefits of using a library will in most cases outweigh the disadvantages. Libraries can be downloaded and, for example, integrated manually into the existing project structure. In this case, you are fully responsible for updating it. The programmer always uses a library like a black box; In other words, he must adhere to the specified conventions for communicating with the interface. How the library works internally is secondary and does not necessarily have to be dealt with.

In the web programming environment, libraries are integrated via package managers such as npm. For this purpose, these are provided via central repositories and an update can also be carried out without any problems. Many services are now offered as usable services via the cloud in the form of RESTful APIs and can then be used via the Internet.

Frameworks

A framework goes beyond the function of a library. It offers a

generic solution concept for a certain type of application. For this purpose, your own application is integrated into the framework of the framework. Most of the time, the framework specifies a certain structure and architecture that you have to adhere to if you want to use the framework. In contrast to a library, the framework calls its own code via callback methods. However, libraries are also used when using a framework. Both the source code of your own application and the framework itself use web libraries. The difference between a framework and a library is in illustration 1 illustrated.

There are a huge number of libraries and frameworks for using JavaScript in building modern web applications. Table 1 contains a selection of well-known frameworks and a brief description.

Library / frameworkBrief description
AngularFramework for creating web applications. It is a client-side JavaScript web framework for creating single-page web applications based on the Model-View-ViewModel pattern. Software development and component testing can thus be simplified. TypeScript is used for programming.
jQueryjQuery is a free JavaScript library that provides functions for DOM navigation and manipulation. The library offers the following functions: the element selection in the Document Object Model, the Document Object Model manipulation, an extended event system, various auxiliary functions, animations, effects and Ajax functionalities. It can be expanded with plug-ins, for example with jQuery UI for the uniform design of user interfaces or jQuery Mobile for apps on mobile devices.
Vue.jsVue is a framework for creating user interfaces. In contrast to other frameworks, it is gradually adaptable. For example, the core library focuses only on the view level and can easily be integrated with other libraries or existing projects. On the other hand, with Vue.js you are also able to implement demanding single-page applications.
React.jsReact is a library that provides a basic framework for the user interface. It is component-based, with the components themselves being structured hierarchically. React forms the basis for single-page web applications, but can also be used on the server side using Node.js.
Aurelia.jsAurelia is a framework that was developed with great emphasis on reducing complexity. Aurelia uses the MV * application design pattern.

Table 1: Selected JavaScript libraries and frameworks

You read and hear about Angular very often. Angular is now a mature framework for a large number of web applications. It is the subject of the coming sections of text.

Angular

What do we need? If not already available on your development computer, install Node.js and npm and an editor or an integrated development environment, for example Visual Studio Code. You can query the currently installed versions via the command line with the following commands:

node -v npm -v

Then we will install the Angular web framework. For this, too, only the command is required npm install -g @ angular / cli.

At this point we can already create the first Angular app. To do this, create a suitable project directory, then go to the command line level and create the framework of the app as follows with the command ng new MyApp. Answer the question whether you want to create a routing in the affirmative and select CSS as the styling language. A few moments later, all files and dependencies for the project should be created. Start your editor - in our case Visual Studio Code - and open the project. You may be a little surprised at how many files and folders have been created (Fig. 2). However, as you will see, the work will mainly focus on the app folder.

Fig. 2: The folder structure of an Angular app

We are of course more than excited and would like to examine the result immediately. Start the app from the command line with ng serve –open and also open the system's standard browser at the same time. To do this, the app is compiled and the local server started. over http: // localhost: 4200 / access the app from your browser. You can see the result in Figure 3.

Fig. 3: The started Angular app

It's time to take a look at the project structure of an Angular app. Angular uses a component-based structure, which means that the entire application is viewed as a component. At the top level there is the so-called top level component. This consists of further components, etc. This creates a hierarchy, also known as a component tree. Essentially, the application consists of the two files app.module.ts and app.component.ts in the app folder. The file is also used main.ts as the starting point of the application. The application logic is in the file app.component.ts defined (Listing 1).

import {Component} from '@ angular / core'; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent {title = 'My App'; }

This is TypeScript and this is where the first Angular component is present. This consists of two parts:

  • From the component code, which is represented by a TypeScriptClass is represented.
  • From the decorator (@Component), which takes over the configuration and registration of the component with the Angular Framework.

Means import {Component} from '@ angular / core'; let's import the class Component for your own use, then we come to the decorator @Component, which is defined here as follows:

@Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})

With the help of a decorator, classes are assigned further information, i.e. H. extended by metadata. About the property selector indicate where the component should be used. About the templateProperty, you finally configure that the stored template should be rendered when the component is instantiated. You also refer to the associated CSS file for styling the component. The actual component is now in the form of an ECMAScript 2015 class, i. H. defined with TypeScript. At the moment there is only one property: title. You have now completely defined a first component or had it created by Angular.

Let's get to the file app.module.ts, the application module. You can see the source code in Listing 2.

import {BrowserModule} from '@ angular / platform-browser'; import {NgModule} from '@ angular / core'; import {AppRoutingModule} from './app-routing.module'; import {AppComponent} from './app.component'; @NgModule ({declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule], providers: [], bootstrap: [AppComponent]}) export class AppModule {}

After the import-Instructions follows the Decorator @NgModule. A declarative configuration of an Angular module takes place here. With the help of modules, related components and services are encapsulated in the Angular platform. Each Angular application consists of at least one module, specifically the application module. The following information is mandatory:

  • The entry-level component in the application: bootstrap: [AppComponent]
  • The specification of which target system is to be addressed: imports: [BrowserModule]. In this case we want to run the application in a web browser. For the time being, we only use this type of application. We have already pointed out that applications for other systems, such as mobile devices, are also possible with Angular. In this case we would have to import other modules at this point. However, we expressly postpone these options here.
  • section declarations: All components listed here are visible in the entire application module and can be used by any other component. We only have one component at the moment called AppComponent.

If you find these configurations a little confusing, perhaps even exaggerated, it is because you only have one component at the moment. As soon as the web applications become more extensive, the strength of a central configuration will quickly be confirmed.

Let's move on through the Angular project files and come to the file main.ts (Listing 3).

import {enableProdMode} from '@ angular / core'; import {platformBrowserDynamic} from '@ angular / platform-browser-dynamic'; import {AppModule} from './app/app.module'; import {environment} from './environments/environment'; if (environment.production) {enableProdMode (); } platformBrowserDynamic (). bootstrapModule (AppModule) .catch (err => console.error (err));

The start of the application is defined here. Finally, the browser wants to process an HTML5 file. This also bears the name here index.html (Listing 4).

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>

Within the <body>-Tags the so-called bootstrap process is triggered. Concrete:

<app-root></app-root>

The selector-Configuration of the AppComponentComponent ensures that the component is rendered at this point. The <body>Tag will be replaced after the component has been loaded successfully. Make sure that within the index.html-File no <script>-Tag is necessary for the integration of JavaScript. In a sense, the script instruction is only inserted dynamically into the HTML file during the build of the application.

That was certainly a very comprehensive version of a "Hello World" example. Now let's start with a real little application.

To do list

The headline already gives it away: It's about the simple example of a to-do list.We can use this simple example to explain some important procedures. Close the previous test application in Visual Studio Code, then go to the command line and create a new Angular project. We call it MyToDo. So we create the project with the command ng new MyToDo. Then we start the application via ng serve. Now open the project (or the folder structure) in Visual Studio Code. Let's go with the changes.

First we need a minimal view. We define this in the component's HTML file. An input field and a button are sufficient for us, so:

<input type="text" placeholder="Eintrag hinzufügen"/> <button >Hinzufügen</button>

Note: Please do not include both tags, as is usual in HTML <Form>Day one. Otherwise the page will be incorrectly reloaded after pressing the button. This is not desirable for a single-page application. You will now see how you get the data from the view (html) to the controller (ts). To do this, Angular allows you to declare a local variable for each element in the DOM tree. A variable is declared using a preceding # sign. This variable is then available to you within the entire template (HTML file). Let's define a variable for the input-Day:

<input #item type="text" placeholder="Eintrag hinzufügen"/>

We have the variable with item referred to, so here #item. Now we have to react to a click on the button, what with Event binding happens. The general syntax is:

(eventName) = "Name of the event"

And specifically for the button it looks like this:

<button (click)="addToDo(item.value)">Hinzufügen</button>

So we define an event addToDo and as a parameter we pass the value of the local variable item by means of item.value. At this point we are finished in the view and switch to the controller of the component, i. H. into the associated TypeScript file. The class AppComponent we expand as follows:

export class AppComponent {toDoArray: Array = []; addToDo (item: string) {this.toDoArray.push (item); }}

We define an array to hold the list entries and the event addToDo. This takes the value via the parameter item and adds it to the list. In addition, the name of the parameter in the controller and in the view do not have to match. You can take place item in the controller, for example value use. In summary: The value that was entered in the input field of the form is now in the class via the local variable AppComponent landed and can be processed there.

However, data must also be transferred back from the controller to the view. To do this, we switch back to the view (HTML file) and create a list using <ul>-Day. The individual elements of the list are over <li>Tags generated. Since you very often have to display lists of data, Angular offers the so-called * ngFor-Directive. With their help you can iterate over the individual elements of a list directly in the view. How does that look exactly? Relatively simple, but quite impressive for the newcomer to Angular:

<div class="data"> <ul> <li *ngFor="let item of toDoArray">{{item}}</li> </ul> </div>

We iterate over each element of the list toDoArray and pass the value of the list item out. This is done with the help of the Angular directive * ngFor. In the browser you can now write an entry in the form field and with confirmation on the button it is written into the array and output as a list. A look at shows that it works Figure 4.

Fig. 4: "ToDo" list with Angular

Of course, the design looks anything but appealing. We haven't bothered about that in any way. It was only about how we transfer data from the view to the controller, process it there and output it again. Any further functionality is also missing, for example the deletion of items.

Angular offers a number of features and thus a comprehensive framework for demanding web applications. These include:

  • A framework for structuring web applications
  • The implementation of the MVC pattern to separate the layers
  • Data and event binding
  • Extensions in the form of Angular directives such as * ngFor

Incidentally, Angular reacts immediately with a new translation of the sources and a reload in the browser if you make changes to the source code. This speeds up development considerably. We couldn't describe many features of Angular here, but the very simple example already shows how much support you can get from a framework when developing a web application.

Conclusion and outlook

The topic of this part of the series of articles was to become familiar with the work of libraries and frameworks. We have learned that these are a means of reuse. By using a framework, the developer is given the structure of an application. In very simple use cases this may seem a bit artificial, but once you have reached a certain size and complexity, you will appreciate the features of such a framework. We started with the example of Angular. Once you have understood the idea, the approach and the project structure, you will gradually cope better with it. It is very difficult to program the many features that a framework brings with it by hand. Therefore i. d. Usually the effort for training and the overhead associated with its use.

The next part of the series of articles will be about Ionic. Ionic is an open source web framework for creating hybrid apps and progressive web apps (PWAs) based on HTML5, CSS, Sass and JavaScript or TypeScript. It is also based on Angular and Apache Cordova and provides a program library made up of various components with which interactive apps can be programmed. So we are again building on the existing technology stack and looking at another sub-area of ​​modern web programming. Until then: work on your first Angular app. Note: You can find the source code for the project at https://larinet.com.

Developer magazine

This article was published in the developer magazine.

Of course, you can also read the developer magazine digitally via the developer.kiosk in your browser or on your Android and iOS devices. The Developer Magazine is also available in our shop by subscription or as a single issue.