DEV Community: Charu Malik

Angular Architecture: Overview and Concept

Charu Malik — Thu, 22 Nov 2018 05:15:10 +0000

Written in TypeScript, Angular implements core and additional functionality as a set of TypeScript libraries. These are imported to Angular apps. Basically, Angular is a framework as well as a platform for building client applications in HTML and TypeScript.

Angular is one of the leading frameworks preferred by web developers around the world. As such, it is a lucrative option to add to your programming arsenal. Here are some of the best Angular tutorials to kickstart your Angular journey as well as to hone your extant Angular skills.
The Angular architecture is not so difficult to comprehend. Especially, when you are acquainted with the various concepts upon which the same is based. Therefore, before summarizing it all up, let us first know the underlying concepts in detail.

The 7 Constituents of any Angular App

There are several parts of an Angular application. Any Angular app is made up of 7 essential constituents. These are:

Components
Templates
Metadata
Data binding
Directives
Services 7.Dependency Injection a.k.a. DI

Components

It is mandatory for any Angular app to have at least one component. This is known as the root component. It connects a component hierarchy with the page DOM (Document Object Model). Regardless of the total number of components, an Angular app has, each component defines a class that has the application and data logic.
It simply means that what role a component will play in an application depends on the class of that component. Each class is associated with an HTML template that defines (means, how it will project something on a screen) a view in the target environment.

A class defined immediately below a @Component () decorator is identified as a component. After which, the decorator provides the application the template (discussed below) and related component-specific metadata (also discussed below).

What are Decorators?

Decorators are a distinct set of functions that modify JavaScript classes. Angular comes with a multitude of defined decorators, each of which attaches a specific kind of metadata to class in which they are used. It simply lets the system knows what those classes are and what should they do.

Know decorators better with Todd Motto.

Templates

As the name suggests, these are elements of Angular applications that combine HTML with Angular markup, which are able to modify HTML elements before projecting them on the screen.
Templates make use of pipes for improving the user experience. Pipes do so by transforming values for display. This simply means that pipes can be used to add a unit, like time and currency, as per to a user’s locale. Angular comes with a plethora of predefined pipes. However, it is also possible to define your own pipes. Here’s how!

Metadata

How the class will be processed depends entirely on metadata, as simple as that. A class decorator is used for attaching metadata to a class. Any class that has @Component class decorator attached to it, is known as the Component class.
For providing the necessary information required by Angular to create the component, class Decorator makes use of configuration object. Some of the configuration options are directives, selector, and templateURL.

Data Binding

Binding markup is responsible for connecting application data with the DOM. There are 2 types of data binding, namely:

Event Binding – Allow the application to respond to user input in the target environment. It does so by updating application data

Property Binding – Allows interpolation of values, which are computed from application data into the HTML

Changes in the DOM, like user choices, gets reflected in the program data. This is known as [two-way data binding]. It is achieved by means of a ngModel directive.

Directives

Template directives are responsible for providing logic. Prior to a view is displayed, Angular evaluates the directives and resolves the binding syntax present in the template for modifying the DOM as well as the HTML elements. This is done in accordance with the program data and logic. There are 3 types of directives:

Attribute Directives – Modify the behavior or appearance of a component, element, or another directive

Components – These are directives with a template

Structural Directives – Modify the DOM layout by adding or removing DOM elements

Services

A service class is created when there is a need for some data or logic that is not associated with a specific view. Moreover, this data or logic requires to be shared across components.

The service class definition immediately precedes the @Injectable () decorator. Its role is to provide that metadata, which allows the service to be injected into client components in the form of a dependency.

Dependency Injection (DI)

Simply, DI enables keeping the component classes lean and efficient. This enables the classes to delegate tasks such as fetching data from the server, log directly to the console, and validate user input to services.

Other Important Concepts

Besides the 7 fundamental parts of a typical Angular application, two more concepts are at play. These are Modules and Routing, each of which is described as follows:
Modules

Each Angular application has a root module, named AppModule. It provides the bootstrap mechanism for launching the application. Generally, an Angular application contains several functional modules.

Though NgModules differ from JavaScript (ES2015) modules, the former complement the latter. Nonetheless, NgModules allow import and export of functionality from and to, respectively, other NgModules. This is similar to JavaScript modules.
The purpose of an NgModule is to declare the compilation context for a set of components. These components might belong to an application domain or a workflow. In order to form functional units, an NgModule can associate its components with related code, like services.

In order to facilitate the development of complex applications, the code can be organized into distinct functional modules. Further, doing so assists in designing for reusability and benefitting from lazy loading that minimizes the time required for the code to load at startup of an application.

Routing

Router NgModule helps in defining a navigation path between many applications states and view hierarchies in an Angular application. This special NgModule is modeled after the popular browser navigation conventions, which are:
Enter some URL in the address bar of the browser to navigate to the corresponding page

Clicking links on a webpage allows the browser to navigate to a new webpage
Clicking on the back and forward buttons in the browser correspond to navigation backward and forward, in the respective order, through the browser history
Instead of pages, the router maps URL-like paths to views. As soon as a user performs some action, the router intercepts the browser’s behavior and responds by hiding or showing view hierarchies. How a router will interpret a link URL depends on the app’s view navigation rules and data state.

Routers also make use of lazy loading. This is done in case the router finds that a module that defines some particular functionality required by the current application state has not been loaded.

The router logs activity in the browser history. This allows the back and forward buttons to work. Navigation to new views is done when the user clicks a button or selects something from a drop box. Or, it might be in response to some other action from a source.

Navigation paths are associated with components for defining the navigation rules. A navigation path makes use of a URL-like syntax, which integrates with the program data. This is analogous to how a template syntax integrates views with the program data.

Thereafter, program logic is applied to choose which views to show and which ones to hide as per the user input and defined access rules.

How it all Works!

NgModules are the basic building blocks of any Angular application because they provide a compilation context for components. Any Angular application is defined by a set of NgModules. These NgModules collect related code into functional sets.
An Angular app has at least a root module, which enables bootstrapping and several feature modules. Components define views. These are sets of screen elements that are chosen and modified as per the program logic and data.

Furthermore, components make use of services that provide specific functionality not directly related to views. Services providers are injected into components as dependencies. This makes the code efficient, modular, and reusable.

Components as well services are classes. Decorators mark their type and provide metadata that decides how to use each of them. The metadata for some component class associates the same with a template, all for defining a view.

A template combines normal HTML code with Angular directives as well as binding markup, which allow Angular to modify the HTML before rendering the same for display. The metadata for a service class offers the information that the Angular needs to provide to the components via DI.

This sums up the concept of Angular architecture. To have a better understanding of the same, practice is the key. It will help you develop a sharp understanding of how Angular applications exactly work.

Top 10 Solidity Tutorials

Charu Malik — Thu, 18 Oct 2018 06:16:12 +0000

To begin with, Solidity is a contract-oriented programming language invented for writing smart contracts on various blockchain platforms. Well, you already knew that! Right! I mean, that’s why you’re here to know about the top 10 Solidity tutorials you can add to your learning list.

Ethereum is one of the leading blockchain platforms at present. In fact, Solidity is especially invented for developing Ethereum-specific programs. Solidity is a powerful contract-oriented programming language, attracting new learners with each passing day.

You might be aware that cryptocurrency is gaining traction for some years right now. While the debate is equally divided on both sides, preferable and non-preferable, there are several blockchain platforms that are rising in the meantime.
One such is Ethereum. In fact, the Ethereum organization has a good portion of the blockchain decentralized application market to them. New developers interested in charting the blockchain territory need to be able to build decentralized applications, also known as Dapps.

For doing so, they need to first learn Solidity. Although it is much similar to javascript, like any other programming language Solidity requires understanding combined with experience.

There are several tutorials available over the Internet, but, obviously not each of them are great. That’s why we are here to help you sort the mess and go through the best ones of them.

So, here are top 10 Solidity tutorials you can go for enhancing your smart contract writing skill with Solidity and do much more:

Solidity Development: Creating our First Smart Contract by Nikita Fedosenko
Go to– https://medium.com/coinmonks/solidity-development-creating-our-first-smart-contract-54943b47d7f3

Excited to write your very first smart contract? Well, this tutorial from Nikita Fedosenko will allow you to write a smart contract in the form of a crypto game. The tutorial gives a step by step guide on working your way towards writing the right Solidity code. Moreover, all terms are well explained in the smallish tutorial.

How to Learn Solidity: The Ultimate Ethereum Coding Tutorial By Ryan Molecke
Go to – https://blockgeeks.com/guides/solidity/
In addition to imparting important information on Solidity, this tutorial will explain about Ethereum. The tutorial focuses on how you can use Solidity for the Ethereum platform. The tutorial combines setting up environment and writing first Solidity smart script into one adding important supplementary information regarding Solidity as well as Ethereum.

Linked Lists in Solidity by Austin Thomas Griffith
Go to – https://medium.com/coinmonks/linked-lists-in-solidity-cfd967af389b
No matter what programming language, the concept of linked lists has always been a priority. This is also true for Solidity. The Linked Lists in Solidity tutorial from Austin Thomas Griffith succeeds in simplifying the concept as well as illustrating it with opportune instances. The tutorial answers everything about the Linked Lists, from why you should use it to how you should do it in the right way.

Learning Solidity: Tutorial 8 Debugging Solidity Using Remix by What’s Solidity
Go to – https://www.youtube.com/watch?v=7z52hP26MFs&list=PL16WqdAj66SCOdL6XIFbke-XQg2GW_Avg&index=8
Remix is an open source tool that helps with writing smart contracts using Solidity right away from the browser. The tutorial tells you how to use debugging features offered by Remix. The 10-and-a-half minutes long tutorial is simple and full of examples to make it easier to learn. Furthermore, What’s Solidity offers a number of other free Solidity tutorials on YouTube.

Solidity Variable and Types (Smart Contract Tutorial) by DesignCourse
Go to– https://www.youtube.com/watch?v=QdG9xsOolJ4
No matter what programming language you need to learn and master, having a good understanding about the variables and their types are essential. To help you understand and appreciate variable and types available in Solidity, this tutorial from DesignCourse is an opportune option. The tutorial is a little over 14 minutes and illustrate the aforementioned with several instances.

Learning Solidity: Tutorial 27 Getting Started with browser development using Metamask by What’s Solidity
Go to– https://www.youtube.com/watch?v=eog2eYrPEu0
Metamask is a browser-based Solidity editor, which is regarded to be one of the best available out there. A good number of Solidity developers rely on Metamask for development of Solidity-based programs. With this tutorial from What’s Solidity you’ll be able start beginning browser development with Metamask right away. The almost 25 minutes-long tutorial sheds light on some important concepts related to browser development and Metamask.

Introduction to Solidity: Creating a data contract [Part I] by Komhar
Go to – https://blockgeeks.com/introduction-to-solidity-part-1/
This is perhaps one of the best tutorials to get started with Solidity. The text-only tutorial covers all the basics of Solidity, including environment creation and setting up. Other than offering an illuminating insight to Solidity, the tutorial offers a precise and clear demonstration of creating a data contract.

Ethereum Builder’s Guide
Go to – https://ethereumbuilders.gitbooks.io/guide/content/en/solidity_tutorials.html
One of the most comprehensive Solidity all-text tutorials available on the Internet. This tutorial not only helps you to set up Solidity, but to install Ethereum client on MacOS, Ubuntu, and Windows. The tutorial further explores Ethereum APIs and Smart Contracts.

The basics of Solidity
Go to – https://ethereumdev.io/
Straight from the lab, The basics of Solidity is a multi-faceted tutorial that will help you with a wide variety of concepts, including the Ethereum Wallet and Lifecycle of a contract. Furthermore, the tutorial covers the concept of writing decentralized applications too. For comprehending the tutorial you need to have basic understanding as well as experience working with Solidity.

Lesson 1: Making the Zombie Factory by Cryptozombies
Go to – https://cryptozombies.io/en/lesson/1
This is one of the most amazing Solidity tutorials available on the Internet. Cryptozombies are one of the leading tutors when it comes to game making using Solidity. With this tutorial, which also serves as the first step in the much bigger Cryptozombie game making tutorial, lets you understand various Solidity concepts with accurate demonstrations and illustrations.

Simply go through the tutorials and you’ll be able to appreciate Solidity. These tutorials are great not only for newcomers but also for developers with a good experience with Solidity.
However, like any other programming language you keep getting better with the more time you invest and the more work you do. So, it’s important to keep going.
If you are confused with so many suggestions above, you can find the best solidity tutorial recommended by the learners on Hackr.io.

Happy Solidity Learning!