Data Binding in Angular

This post is primarily focused on what data binding is and the types of data binding available.

String Interpolation.
Property Binding.
Event Binding.
Two-Way Data Binding.

Data binding is one of the most powerful and important features in any software development language. It allows us to define communication between the component and view. So we can say that data binding is passed from component to view and from view to the component.


Build a Basic CRUD App with Angular and Node

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible.
In recent years, single page applications (SPAs) have become more and more popular. A SPA is a website that consists of just one page. That lone page acts as a container for a JavaScript application. The JavaScript is responsible for obtaining the content and rendering it within the container. The content is typically obtained from a web service and RESTful APIs have become the go-to choice in many situations. The part of the application making up the SPA is commonly known as the client or front-end, while the part responsible for the REST API is known as the server or back-end. In this tutorial, you will be developing a simple Angular single page app with a REST backend, based on Node and Express.
You’ll be using Angular as it follows the MVC pattern and cleanly separates the View from the Models. It is straightforward to create HTML templates that are dynamically filled with data and automatically updated whenever the data changes. I have come to love this framework because it is very powerful, has a huge community and excellent documentation.
For the server, you will be using Node with Express. Express is a framework that makes it easy to create REST APIs by allowing to define code that runs for different requests on the server. Additional services can be plugged in globally, or depending on the request. There are a number of frameworks that build on top of Express and automate the task of turning your database models into an API. This tutorial will not make use of any of these in order to keep this focused.
Angular encourages the use of TypeScript. TypeScript adds typing information to JavaScript and, in my opinion, is the future of developing large scale applications in JavaScript. For this reason, you will be developing both client and server using TypeScript.
Here are the libraries you’ll be using for the client and the server:

Angular: The framework used to build the client application
Okta for Authorisation: A plugin that manages single sign-on authorization using Okta, both on the client and the server
Angular Material: An angular plugin that provides out-of-the-box Material Design
Node: The actual server running the JavaScript code
Express: A routing library for responding to server requests and building REST APIs
TypeORM: A database ORM library for TypeScript

Start Your Basic Angular Client Application
Let’s get started by implementing a basic client using Angular. The goal is to develop a product catalog which lets you manage products, their prices, and their stock levels. At the end of this section, you will have a simple application consisting of a top bar and two views, Home and Products. The Products view will not yet have any content and nothing will be password protected. This will be covered in the following sections.
To start you will need to install Angular. I will assume that you already have Node installed on your system and you can use the npm command. Type the following command into a terminal.
npm install -g @angular/cli@7.0.2

Depending on your system, you might need to run this command using sudo because it will install the package globally. The angular-cli package provides the ng command that is used to manage Angular applications. Once installed go to a directory of your choice and create your first Angular application using the following command.
ng new MyAngularClient

Using Angular 7, this will prompt you with two queries. The first asks you if you want to include routing. Answer yes to this. The second query relates to the type of style sheets you want to use. Leave this at the default CSS.
ng new will create a new directory called MyAngularClient and populate it with an application skeleton. Let’s take a bit of time to look at some of the files that the previous command created. At the src directory of the app, you will find a file index.html that is the main page of the application. It doesn’t contain much and simply plays the role of a container. You will also see a style.css file. This contains the global style sheet that is applied throughout the application. If you browse through the folders you might notice a directory src/app containing five files.

These files define the main application component that will be inserted into the index.html. Here is a short description of each of the files:

app.component.css file contains the style sheets of the main app component. Styles can be defined locally for each component
app.component.html contains the HTML template of the component
app.component.ts file contains the code controlling the view
app.module.ts defines which modules your app will use
app-routing.module.ts is set up to define the routes for your application
app.component.spec.ts contains a skeleton for unit testing the app component

I will not be covering testing in this tutorial, but in real life applications, you should make use of this feature. Before you can get started, you will need to install a few more packages. These will help you to quickly create a nicely designed responsive layout. Navigate to the base directory of the client, MyAngularClient, and type the following command.
npm i @angular/material@7.0.2 @angular/cdk@7.0.2 @angular/animations@7.0.1 @angular/flex-layout@7.0.0-beta.19

The @angular/material and @angular/cdk libraries provide components based on Google’s Material Design, @angular/animations is used to provide smooth transitions, and @angular/flex-layout gives you the tools to make your design responsive.
Next, create the HTML template for the app component. Open src/app/app.component.html and replace the content with the following.


[DZone Research] JavaScript Flavors and Frameworks

This post is part of the Key Research Findings in the 2018 DZone Guide to Dynamic Web and Mobile Development. 
For this year’s DZone Guide to Databases, we surveyed software professionals from across the IT industry. We received 1,202 responses with a 64% completion rating. Based on these numbers, we calculated the margin of error at 3%. In this article, we discuss the various flavors of JavaScript developers use as well as their favorite front-end development frameworks.


5 Easy Steps to Run Your C Code From an Angular App

As a front-end developer, you’ve probably been hearing about WebAssembly for a long time. Below I will show you how, in 5 simple steps, you can start using the code written in C by calling it directly from the Angular component. I won’t write down what WebAssemblyis but I will show you how to use it right away:
1. Download the Emscripten library from GitHub and install it.


Upgrade to Angular 7 in 5 Simple Steps

Angular helps to build modern applications for web, mobile, or desktop. Currently, Angular 7 is the latest version. Staying up-to-date with the latest version is very important. Upgrading to Angular 7 takes just a few simple steps:

First, upgrade the Angular version globally by adding the latest version via the terminal: sudo npm install -g @angular/cli@latest
Upgrade the version locally in your project and make sure the changes for the new version are reflected in the package.json fileng update @angular/cli
Upgrade all your dependencies and dev dependencies in package.json

npm install –save @angular/animations@latest @angular/cdk@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/flex-layout@latest @angular/forms@latest @angular/http@latest @angular/material@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest core-js@latest zone.js@latest rxjs@latest rxjs-compat@latest

Dev Dependencies:

npm install –save-dev @angular-devkit/build-angular@latest @angular/compiler-cli@latest @angular/language-service @types/jasmine@latest @types/node@latest codelyzer@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-jasmine@latest karma-jasmine-html-reporter@latest jasmine-core@latest jasmine-spec-reporter@latest protractor@latest tslint@latest rxjs-tslint@latest webpack@latest

Angular-devkit was introduced in Angular 6 to build Angular applications that required dependency on your CLI projects.
Also, you’ll need to upgrade the version for Typescriptnpm install typescript@2.9.2 –save-dev

Now, migrate the configuration of angular-cli.json to angular.jsonng update @angular/cli ng update @angular/coreIf Angular material is used, use this command:ng update @angular/material
Remove deprecated RxJS 6 features npm install -g rxjs-tslint   rxjs-5-to-6-migrate -p src/, be patient and wait until the execution completes).
Now, uninstall rxjs-compat as it is an unnecessary dependency for Angular 7.npm uninstall –save rxjs-compat
Also changeimport { Observable } from ‘rxjs/Observable’;  toimport { Observable } from ‘rxjs’;

Finally, start your Angular 7 application using ng serve.


The Challenge of the Commission Report

As a follow-up to my “New Application Journey" article, I wanted to talk about a challenge I encountered while trying to build a report that was manually created each month using Google Sheets.
As a TL;DR (too long, didn’t read) to the original article, I wasn’t happy with the application my mother-in-law was using for her very small business in the southeast section of the United States. So, I used her business needs to create a new application from scratch using Angular, MySQL, and the AWS environment. As I started building out reports for the data, I realized that automating the manual report she created in Google Sheets was not going to be as easy as I expected.


Building Mobile Apps With Angular or Vue.js and NativeScript {N}

More and more Java developers have been coming into contact with front-end development in recent years. For this group of developers, it is only a small step to switch to mobile app development with NativeScript. In this post, we try to clarify the possibilities of native and hybrid app development using NativeScript.
What Is NativeScript {N}?
{N} is an open source framework (under the Apache 2 license) to build native iOS and Android apps, using TypeScript and Angular. {N} is a different technology than the hybrid frameworks, such as Ionic and Phonegap. {N} is a runtime, not a web technology. Your app will not run as a mini website in a WebView and is therefore more efficient. With {N} you have direct access to all the Native APIs of your device.


FormBuilder in Angular 6

As a follow-up to my “New Application Journey" article, I wanted to focus on how FormBuilder in Angular improves the process of form-based aspects of your application, while introducing some reactive programming concepts along the way.
As a TL;DR (too long, didn’t read) to the original article, I wasn’t happy with the application my mother-in-law was using for her very small business in the southeast section of the United States. So, I used her business needs to create a new application from scratch using Angular, MySQL, and the AWS environment. Since the application had a few forms to introduce, I was dreading the dated process I have been using — going all the way back to my introduction to AngularJS back in 2013.


Best JS Frameworks to Build Your Next Application

The first thing people notice about your application is its visual appeal. Most users tend to associate interface design with the credibility and professional competence of your company. That’s why choosing the right front-end technology plays a crucial role in your business growth.
Investing in user experience brings huge competitive advantages and great financial results. However, before counting up future income, you should decide which platform will be the foundation of your success. How long do technologies last?


Okta: A Nice Solution… Even for Small Apps

As a follow-up to my “New Application Journey" article, I wanted to focus on how Okta provides an easy-to-use and easy-to-configure option — even for non-enterprise-scale applications.
As a TL;DR (too long, didn’t read) to the original article, I wasn’t happy with the application my mother-in-law was using for her very small business in the southeast section of the United States. So, I used her business needs to create a new application from scratch using Angular, MySQL, and the AWS environment. However, I needed to have some layer of security, since I didn’t want someone who happened to uncover the URL to her application to gain unauthorized access.