1. 1. SCSS vs CSS – the basics
2. 2. Installing Webpack
3. 3. Installing Gulp
4. 4. Webpack Configuration
5. 5. Gulp Configuration
6. 6. Gulp vs Webpack tool handling – comparison
7. 7. Gulp or Webpack?
8. 8. How about using Webpack instead of Gulp?
9. 9. Summary

Gulp vs Webpack? Both of these tools play an important role in the world of programming. Often the choice between them seems complicated at first glance. However, understanding their differences and similarities will undoubtedly help us make the right decision – especially those who are new to the world of programming. Whether we’re considering using Gulp (task runner), Webpack (module bundler), or a combination of both, knowing more about their functionalities will definitely make our job easier and increase our level of productivity. If you’re looking for the right tools for your next project, read on.

SCSS vs CSS – the basics

Before comparing the tools (Webpack and Gulp), let’s remind ourselves of what CSS and SCSS technologies are – apart from being indispensable in the world of programming, of course.

CSS and SCSS are technologies we use daily to assign specific appearances to elements (color, size) and position these elements on the page. However, it’s essential to consider certain differences before deciding to use any of them.

CSS is the standard stylesheet language, firmly rooted in the front-end world. Compared to SCSS, its syntax appears simpler and much more intuitive. Younger developers definitely tend to choose CSS, especially in the early stages of their learning. CSS rules aim to define styles for specific elements, such as paragraphs, divs, or other HTML elements.

/* CSS syntax */

h1 { color: blue; font-size: 24px; }

SCSS is simply a CSS preprocessor, it extends the syntax with additional functions and allows for the use of advanced techniques, including:

• nesting rules – CSS selectors can be nested within other selectors, reflecting the structure of HTML selectors.
• using variables (which enable storing reusable values throughout your stylesheet),
• mathematical operators (allowing for operations like addition, subtraction, multiplication, and division within your styles), making your code easier to write, more modular, and more elegant.

/* SCSS syntax with nesting and variables */

$primary-color: blue;

h1 {

color: $primary-color;

font-size: 24px;

}

Key differences between SCSS and CSS:

1. Syntax: SCSS offers a more expanded syntax, which makes writing and maintaining code more straightforward. Nesting rules allow for more readable and logical code.
2. Variables: SCSS enables the definition of variables, allowing for easy changes to style values in one place, and promoting consistency across a project.
3. Preprocessor: SCSS is one of many CSS preprocessors, meaning SCSS code needs to be compiled into regular CSS before deployment on a web page.

The choice between SCSS and CSS depends on the complexity of the project and the team’s skillset. For straightforward projects that don’t require advanced styling techniques, CSS might be a suitable choice. However, for more complex projects where modularity and easy edits are crucial, SCSS can provide greater flexibility and convenience when it comes to managing styles.

Read also: Front-End development outsourcing

Installing Webpack

The features of Webpack primarily allow for managing dependencies and creating organized files. Installing the tool is ridiculously easy. Let’s start by checking if we have the Node Package Manager (NPM) installed, which is, in my opinion, the quickest and most efficient way to install Webpack. Next, we open the command line and type in the command:

npm install webpack –g

Then, from the command line, we navigate to the directory with our project and type the command:

npm init

We can notice that a package.json file has been created in the target directory. All that’s left is to install Webpack in our project:

npm install --save-dev webpack

And now we can enjoy this powerful tool!

Further configuration steps depend on the individual needs of the project – I will describe an example of a brief configuration in the points below. However, detailed guidelines regarding Webpack’s capabilities can be found in the official documentation available on the website: Webpack Documentation.

Installing Gulp

On the other hand, we use Gulp for automating certain tasks, such as compilation, minification of files, images, or refreshing the browser. Installing Gulp is just as easy as installing Webpack. Let’s ensure that we have NPM installed. Then, we start with the command:

npm install -g gulp

We navigate to our project directory, creating a package.json file by using the command:

npm init

And all that’s left for us is to add Gulp to our project:

npm install --save-dev gulp

How do we configure Webpack? After installation, we can start creating the gulpfile.js file, which will be responsible for task configuration for our tool. Later in the article, I will also provide a brief configuration for Gulp.

To explore all the capabilities of Gulp, the Gulp is available.

Webpack Configuration

As I mentioned earlier, I will present a brief configuration of Webpack in our project. It’s such an advanced tool that I can’t describe all its capabilities here.

Let’s start by adding a webpack.config.js file, which contains the entire Webpack configuration.

Next, let’s place the basic configuration there:

module.exports = {

entry: './src/main.js',

output: {

path: __dirname + '/dist',

filename: 'bundle.js'

},

mode: 'production'

};

We defined where Webpack should fetch the source files (entry). The output property specifies where they should be placed after processing. The mode option determines whether we want to optimize the code, for example, for production. Webpack provides us with a broad package of plugins and loaders, allowing us to tailor it to our needs.

Gulp Configuration

Gulp is a task automation tool that we can customize in the gulpfile.js file. Within the configuration, we define tasks such as code minification, compilation, or refreshing the browser after every change in the code.

const gulp = require('gulp');

const uglify = require('gulp-uglify');

gulp.task('compress', function() {

return gulp.src('src/js/*.js')

.pipe(uglify())

.pipe(gulp.dest('dist/js'));

});

This is a sample configuration, the aim of which is to compress JavaScript files.

First, we create a new task called ‘compress’. Then, with return gulp.src(‘src/js/*.js’), we specify the source files to be processed (in our case, these are all files with the .js extension, from the src/js directory).

The next step is to pass the source files to the plugin using pipe(uglify()), which compresses our code, removing, for example, unnecessary spaces and comments so that the file is as small as possible.

Finally, we indicate the directory where the processed files should be saved.

Gulp vs Webpack tool handling – comparison

If we were to compare Webpack and Gulp, it’s hard to pinpoint a single correct choice – it all depends on the project we’re currently working on.

Webpack is primarily a bundler that compiles project assets into clear outputs. We can easily extend it thanks to plugins, which allows us to achieve a wide range of applications, such as:

• Transpilation – in the case of JavaScript, for example, adapting the ES6 version to older browsers,
• Code minification – the process of removing unnecessary characters from code to reduce its size, thereby improving load times),
• Dependency management.

Check all Gulp plugins available: Using plugin.

On the other hand, Gulp is a task automation tool that will definitely improve our workflow. In my opinion, it is very easy to learn. In a short time, we can create tasks for compiling SASS files or automatic browser refresh. The configuration is much more readable and flexible.

Webpack handles dependencies superbly, while Gulp stands out when we want to fully automate our work.

In a nutshell:

• Webpack is a module bundler. Like Gulp, Webpack also allows you to run many functions related to tasks.
• Gulp is a task automation tool to enhance your workflow.

Gulp or Webpack?

The choice between these two technologies depends on the specific needs and architecture of our project. It is also a matter of personal preferences and experience. If complex bundling and dependency management are crucial to your development process, Webpack might be the right way to go. On the other hand, if you need a simple and clear way to automate typical developer tasks, Gulp is an excellent solution. This article is really an introduction to these tools. At each stage, it is useful to use documentation and take advantage of the knowledge of experienced colleagues and Technical Leaders in a project.

Remember, nothing prevents us from combining both tools. By using Gulp and Webpack simultaneously, we can benefit from the advantages of each. This can not only improve the quality of our project but also reduce the time needed for development.

How about using Webpack instead of Gulp?

When combined with NPM scripts, Webpack can successfully replace Gulp. In my experience, however, it is better to combine tools rather than limit yourself to just one, which I strongly encourage you to do. As I mentioned, Webpack and Gulp are both build tools that you can use for similar tasks. However, their approaches and strengths differ. Ultimately, the choice between using

Webpack alone or combining it with Gulp depends on the requirements of your project and your preference as a programmer.

Gulp vs Webpack comparison – summary

I hope I have been able to clarify the benefits of using Webpack and Gulp. When it comes to the question of ‘Webpack or Gulp’, it’s hard to find one perfect solution, especially in the case of beginner front-end developers. Above all, we need to focus on our skills, experience, and project needs. There is no universal solution. Often, we have a predetermined work ecosystem. It’s worth experimenting with both technologies, combining them, testing, and creating an optimized, efficient work environment.

APPLICATION DEVELOPMENT SERVICES From initial analysis and design to development, testing, and maintenance, we manage every aspect of the process. Explore our services today!

Why use RxJS? Challenges for developers of modern web applications

When creating modern and efficient web applications, we are faced with numerous challenges. As developers, we need to bear in mind that, for example, we cannot block a user and make them wait until our website handles several events. So, what should we do if the application has to run an animation, load a loader, and react to the user’s action? How do you make it possible to handle all these situations at the same time? Here the paradigm of reactive programming with the RxJS library comes in handy. 

Reactive programming is a paradigm for writing code based on asynchronous data streams.
It is a way of creating applications that respond to changes, as opposed to the typical, imperative way of programming, in which we explicitly make step-by-step instructions to handle these changes.
It sounds quite complicated as such an approach calls for a change in the way of thinking. However, thanks to certain solutions, you can smoothly switch to reactive programming – in the case of JavaScript, the RxJS library. 

Data Streams

A stream is a sequence of data ordered over time. Data streams can be created from objects, variables, data structures, events (clicks), HTTP request responses, etc.
On its timeline, the stream can also emit an error (when an unexpected event occurs causing the stream to end) or earn completed status (which means the stream has emitted all the data). We can capture these methods (error and complete) to perform appropriate operations on them – you will find out more in the paragraphs below.

Elevate Your Application Development

Our tailored Application Development services meet your unique business needs. Consult with Marek Czachorowski, Head of Data and AI Solutions, for expert guidance.

Schedule a meeting

What is RxJS observable?

RxJS uses observable objects that use an observer design pattern.
To illustrate how it works, let’s use the example of subscribing to a newsletter. You have likely clicked the “subscribe” button on YouTube or a blog many times already. When a new article or other material appears, you are notified straight away. Unsubscribing is possible at any time.

Subscribe 

Observable and streams work the same way.

• By clicking the subscribe button, you become an observer of a given resource.
• Observable as an observed object gives us a data stream with news.
• The subscription to the stream provides us with the ‘subscribe’ method.
• We can also choose which data is valuable to us as ‘news’.

Observable vs JavaScript promises

Observable is a stream of values (of any type). But wait… Why do we need this observable stuff when we already have a promise object in JavaScript? Observable gives us a lot more possibilities. Here is a short comparison:

Promise

• it is asynchronous each time,
• it is ‘eager’ – processing starts immediately after an object is defined,
• it can only return one value,
• it has no operators,
• it cannot be canceled.

Observable

• it can be both synchronous and asynchronous,
• it is ‘lazy’ – this means that it won’t be executed at the moment of defining the stream, but when the subscription is created,
• it returns one or more values,
• there are a number of operators to use,
• we can cancel it any time,
• it gives us more options when handling errors (e.g. retry operator ()),

Hot vs cold observables

We can divide observables into hot and cold.

Cold observables:

• Emitting values begins with the first subscriber (when the first subscribe() appears – read more later in the article).
• They return new values for each new subscriber.
• Example: the service for downloading data from the backend, where we need to subscribe in order to execute the query.

Hot observables:

• They send values despite the lack of a subscriber.
• They share the same data among all subscribers.
• Example: observable created from a click event.

Creating observables and execution of observable

There are many ways to create an observable. Creating them from other data structures is also common – here of or from operators are helpful. In RxJS, creating one observable of several other observables is not a problem. Below are some examples:

Observable examples

The from operator can be iterated over only one argument (e.g. arrays, array-like elements – let’s take an array of objects as an example).

import { from, Observable } from 'rxjs'; 

  

const to ReadBooks = [ 

{ bookId: 1, title: The psychology of money', author: 'Morgan Housel' 

publicationYear: 2020 }, 

{ bookId: 2, title: 'The subtle art of not giving a f*ck', author: 'Mark Manson', publicationYear: 2016 }, 

{ bookId: 3, title: How to talk to anyone', author: 'Leil Lowndes', publicationYear: 1999 }, 

{ bookId: 3, title: 'Invent and wander', author: Jeff Bezos', publicationYear: 2020 }, 

  

]; 

  

let source2$ = from(toReadBooks); 

source2$.subscribe(book => console.log(book.title));

This way, the array of objects has turned into an observable. Easy, isn’t it?

Operators

What if there are several streams and we need one observable? No problem! RxJS provides several operators to help us. One of them is a concat.

import { concat, from, Observable, of } from 'rxjs'; 

  

const toReadBooks = [ 

  

  

{ bookId: 1, title: The psychology of money', author: 'Morgan Housel' 

publicationYear: 2020 }, 

{ bookId: 2, title: 'The subtle art of not giving a f*ck', author: 'Mark Manson', publicationYear: 2016 },  

{ bookId: 3, title: How to talk to anyone', author: 'Leil Lowndes', publicationYear: 1999 }, 

{ bookId: 3, title: 'Invent and wander', author: Jeff Bezos', publicationYear: 2020 }, 

  

]; 

  

let source1$ = of('hello', 10, true, toReadBooks[0].title); 

source1$.subscribe(value => console.log(value)); 

  

let source2$ = from(toReadBooks); 

source2$.subscribe(book => console.log(book.title 

  

// combine the 2 sources 

concat(source1$, source2$) 

.subscribe(value => console.log(value));

Voilà! RxJS makes life easier!

Subscriptions

I mentioned the option of ‘subscribing’ to the stream. Another term that seems complicated at first (but isn’t!). A subscription simply means connecting to a stream. Each observable has a subscribe() method, to which we can pass parameters in two ways: as an object with methods or as a set of callbacks. The object passed to the subscribe method is called an observer.

Observer

The observer has three components:

• The first method (next) is executed if we manage to get the value from the stream. Each new value invokes this method.
• The second method (error) is executed if an error occurs in the stream, ; for example, in the HTTP query we get the status 500. In the event of an error, our observer will not proceed and will not perform the complete method, and thus will be marked as closed and will stop emitting values.
• The third method (complete) is executed when the stream emits the last value.

Nearshoring services

Entrust your project to nearshore software development experts Get started now!

RxJS pros 

The RxJS library undoubtedly facilitates application development. It can be integrated with practically any frontend framework (Angular, React). Also, using pure JavaScript is not a problem. There is a wide range of operators to use which allow you to modify streams in any way. Frequent updates make subsequent editions of the library easier to use. Thanks to RxJS, we can speed up, as well as improve the quality of software.

RxJS cons

I find it harder to write something about the disadvantages than the advantages. Working with Angular every day, I can’t imagine writing even one component without the RxJS library. Certainly, it might be difficult – especially for beginners – to test RxJS code. Testing such code calls for knowledge of many additional techniques and tools. Fortunately, RxJS has a solution for this in the form of RxJS Marbles. It allows us, step by step, to test asynchronous RxJS code synchronously, using the RxJS TestScheduler test tool and virtual time steps. However, this is an extensive issue that could better be described in a separate article.

Features of RxJS – the summary

The above is a very broad description of reactive programming and the RxJS library. A new article could be written on each of the above matters, and mine is just a drop in the ocean – many aspects have been skipped over.
Undoubtedly, RxJS has become standard for developing modern and efficient applications. Continuous development and support for the most popular frameworks make RxJS by far the most frequently used library, allowing us to control asynchrony.

Read more: Using AWS Lambda functions

For my technology there are many frameworks available on the market so it’s not difficult to choose the most convenient for the particular project or individual preferences. But let’s take a look at all areas of programming where frameworks can be used.

The areas where we can use frameworks in IT are:

• For compilers of different programming languages – programs for the automatic translation of code written in one language to the equivalent code in a second language.
• Applications for financial modeling.
• Applications for earth science modeling.
• Decision support systems – systems that deliver information and knowledge.
• Web applications – computer programs which work on servers through computer networks and connect with users’ computers by means of internet browser.
• Middleware – software between different applications, services or systems.

On today’s software market we have many ready-to-use solutions, and most of them are based on frameworks, because they have to keep architecture at a high level of clarity and formalization to enable software developers to make further modifications. This features a high level of complexity, but it is worth learning new technologies and solutions because they can accelerate your work or that of your team. Let’s consider it in even greater detail and take a look at the list of pros and cons of frameworks.

Read also: Clean Architecture

Pros and cons of frameworks

Pros:

• Efficiency – building applications with frameworks requires the software developer to write less code,
• Improved quality of code – because frameworks are designed to be flexible, they have good internal logic, and they impose the same logic on the created application,
• Reliability – frameworks such as application skeletons are well-projected and tested.

Cons:

• Complexity – learning frameworks is difficult because of flexible and advanced usage,
• Performance – instead of the flexible construction of the software which has been created, we often get a lower level of performance (at this point I have to mention cache systems that can improve the performance of frameworks in a large percentage of server responses).

As we can see, we have more pros than cons, which in my opinion is the biggest advantage of frameworks. However, we have to be aware that frameworks are not always the best solution. For example, if we need to create an application to display a single message on screen as a server response, the usage of frameworks will slow down the server response and the execution of our application. Such an application needs only one command to execute and no additional tools are necessary.

How to use frameworks properly?

Of course, I wouldn’t say that frameworks can resolve all our problems with software, but they can certainly help us with our daily tasks. On the other hand, we have to be careful here. Too many times I’ve seen fights on community forums dedicated to a given framework, where people try to prove that the framework which they have chosen is the best.

I believe that frameworks are like tools – the more tools you have, the more problems you can solve. If you only have a hammer, you can probably only hammer a nail. But if you have a shed full of tools you can do whatever you want.

Multi-framework approach

This approach is supported by the architecture of today’s applications, which are built from packages – separable modules with their own requirements that we can use to create any kind of application. That way, the application can be divided into smaller parts and is easier for more people to understand. Packages also organize the structure of applications and help to develop larger projects.

According to this idea, we can use packages as independent software and install them to build our application. There is no obstacle to the use of frameworks in the same way – each part of our application can be built on a different framework. Why? When we use libraries created for only one framework, we are not able to utilize software created for other frameworks. In summary – we should use the approach that allows us to remain open to other possibilities: the multi-framework approach.

Summary

The multi-framework approach can be seen in popular solutions like Magento (e-commerce platform), Sylius (e-commerce platform) or next generation e-commerce shop which calls Shopware, there is a not only e-commerce application – where we can see it, also at popular and highly flexible CMF frameworks such as Sulu. When you check the source code of these applications on GitHub, you will see that the authors have used packages from Zend & Symfony frameworks – those packages are manageable in PHP technology via a composer service. The proportions aren’t huge at first glance, but we can start to consider it a multi-framework usage and treat is as a conscious architectonic decision.

PWA is nothing more than a version of a web page functioning just like a mobile application on a smartphone.

See more: Mobile development team

There are a couple of guidelines that PWA must meet.

• HTTPS: the application uses encrypted protocol, thanks to which we can display pages, use forms and download files. Encryption prevents the capture of and changes to the data that is being sent.
• Front-End of the application, ensuring responsiveness. Thanks to this, the application adjusts its appearance depending on the device.
• Offline regardless of access to the Internet, the application has some particular functionalities.
• The application has a manihest.json file, which allows users to add shortcut icons to the start screens, analogically to mobile applications.
• Even when using slow 3G connections, the application loads quickly.
• High level of reactiveness to user actions, such as switching pages.

PWA are used by corporations from all over the world. Some of the leading ecommerce examples are Uber, Lyft, Starbucks and Trivago. We can also find examples of PWA implementations on the Polish market, which have resulted in better outcomes. Thanks to Progressive Web Application, OLX has 146% more advertising clicks on their web portal. What is more, the Bounce Rate (the number of people who leave the page after only a couple of seconds) decreased by 80%. This must have resulted in increased attractiveness of the portal for both users and advertisers.

Also read: Creating PWA with Angular

The hottest Front-End technology of recent years

PWA technology has been talked about for a number of years now, and the fact that it is promoted by Google and Microsoft results in the subject of PWA coming up during the biggest conferences. PWA has a lot to offer for businesses and users of their websites.

Firstly, Progressive Mobile Applications have comparable results with those of mobile applications when it comes to positioning. As they are Google-supported, it is possible that within a couple of years it will be possible to gain some extra ranking points here. Reliability is another feature of this technology. The script embedded in the Front-End controls the cache and shares the sources which are saved there. Thanks to this, we gain independence when it comes to Internet access.

Regardless of the quality of the connection, the application loads quickly thanks to the Service Worker mechanism. Swiftness in the functioning of the website is a key factor. According to Google, 53% of users will leave a page if it doesn’t load within three seconds. Well-developed PWA ensures good functioning and rapid reactions to commands. The attractiveness of PWA sources arises from their similarity to native applications, beloved by customers once a wide range of smartphones became available on the market.

Changing the website into PWA

The internet is full of guides on how to change one’s website to a well-functioning application. A basic knowledge of Front-End should be sufficient here (HTML + CSS + Java Script). Google provides access to an expanded service, which helps in the creation of a well-functioning PWA. We encounter issues here, however, when we own an online shop or a dedicated web service.

Obtaining the best results will be most likely when cooperating with an experienced business partner. JCommerce as the one of the Top Web Development Companies offers the services of experienced Front-End developers. The company can offer various cooperation models, including in the context of building entire Front-End and PHP teams. They provide the scalability of development process, which allows to transform all the type of web application to progressive.

The future of PWA

The possibilities created by current Front-End technologies facilitate the development of user-friendly e-commerce solutions. Progressive Web Applications mean the beginning of a revolution in terms of online shops. In the future, ponderous e-markets with glittering banners will be replaced by e-salons which are easy on the eye. Even nowadays we do our shopping more eagerly while using websites which are visually attractive; it is hard for us to imagine making e-payments via portals which resemble the unpleasant-looking creations from the ‘90s. The high quality of the products is important, yet even more important is our experience – and this is certainly what PWA can offer.

At the end of this post you will find a simple example of an application built using Angular framework.

What is Angular?

In short, Angular is the framework which allows you to create scalable and very efficient web applications. Angular is based on JavaScript and HTML.

How is Angular built?

And here’s where we get closer to answering the question which is the title of this article. Version 1.0 of Angular, also known as AngularJS (created for Single Page Applications but also multipage applications), is very similar to MVC (Model-View-Controller). MVC supports best practices in architecture and writing clean business code and is well-known throughout the IT industry as the ancestor of the architectonic patterns.

Similarly to MVC, the architectonic version of Angular which I mentioned above consists of controllers, models and views. Of course, just as with MVC, we can build web applications in a more complex way, which is also advisable, for example by delegation app logic to the routes, managers and other files – but this is not necessary for understanding similarities to the MVC pattern, which is the aim of this post, after all.

Controllers

The JavaScript controller in Angular, developed within the module, which corresponds to MVC’s controller. The module includes controllers, services and other app files, and is not often declared within the package of functionalities. Personally, when I had to create a functionalities package concerning one domain model, let’s say a package of functionalities concerning displaying data, editing it, a couple of views and communication with APIs, then I would have declared one module.

Better and easier management of the abovementioned modules can be achieved with so-called bundling, which is a mechanism available in JavaScript for managing modules, packages, resources and import/export.

Models

In AngularJS MVC models have their equivalents, which are also responsible for delivering application logic. In some cases I would say that if Angular is applied for multipage applications purposes, the role of an equivalent of the MVC’s model is played by services, so-called recipes, but for some programmers it can be controversial. Recipes have various types and classes, but in my entire career I’ve never used any of them directly, like so-called value recipes or factory recipes. Instead I use more common service recipes, which can replace the two previously mentioned recipes; most importantly they follow the Constructor Injection design pattern, instead of Singleton. (I hope to write a blog post or series of posts concerning design patterns).

Views

Similarly to the MVC pattern or any other pattern concerning web applications, we use views responsible for delivering the user interface within our application. In the case of MVC, we mostly use model-type views, which leads to the use of the Razor engine. For those who have not worked with it, the Razor engine, which can be found in ASP.NET MVC from version 3.0, allows users to introduce native objects of a particular language, its syntax and particular model objects into HTML syntax. In the case of Angular, views are mostly created with pure HTML syntax, and the equivalent of the Razor engine’s logic are directives in Angular. Directives are a kind of instructions and procedures – they are “injected” directly into HTML elements.

The most important directives used in Angular are ng-model (passing objects and its values) and ng-repeat (possibility of iterating objects within arrays or lists). One could build plenty of user interfaces using only these two directives.

Below I have given an example of an application based on Angular (not using the service). You can import the code snippets below into particular code templates available within Web template options in Visual Studio. In the 2017 version, the following may be found:

• For Module -> AngularJs Module
• For controller -> AngularJs Controller or AngularJs Controller using $scope
• For View -> standard HTML Page file template

Module:

angular.module(‘angularModule’, []);

Controller:

angular.module(‘angularModule’).controller(“angularController”, function ($scope) {

   $scope.angularTestObject = “test”;

});

View:
<!DOCTYPE html>

<html>

<body>

   <div ng-app=”angularModule” ng-controller=”angularController”>

       <p>angularTestObject’s value equals:</p>{{ angularTestObject }}

   </div>

</body>

</html>