Learn Angular 4.0 In 10 Days - Day One

At that time, HTML was used just to create static documents with hyperlinks, allowing the navigation between them. However, in 1993, with the creation of Common Gateway Interface (CGI), it became possible to demonstrate or develop dynamic content generated by server-side applications. One of the first languages used for this purpose was Perl, followed by other languages such as Java, PHP, Ruby, and Python. However, the technology kept moving forward, at first with technologies such as Flash and Silverlight, which provided an amazing user experience through the use of plugins. At the same time, the new versions of JavaScript, HTML, and CSS had been growing in popularity really fast, transforming the future of the Web by achieving a high level of user experience without using any proprietary plugin.

AngularJS is a part of this new generation of libraries and frameworks that came to support the development of more productive, flexible, maintainable, and testable web applications.

What is Angular?

Basically, Angular is an open source, JavaScript-based web application development framework. Definition of Angular as put by its official documentation is as follows,

“AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. And, it all happens within the browser, making it an ideal partner with any server technology.”

It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Angular JS supports JavaScript MVC (MVVM) frameworks.

The most common question before starting AngularJS is what is AngularJS? In common words, it is -

• A MVC Structured Framework
• A Single Page Application Framework
• A Client Side Templating
• A Language where the written code can be easily tested by unit testing

Now, the above key features of AngularJS contain the main concept of innovations of Angular. The main idea behind Angular is the separation between HTML manipulation and JavaScript logic in the web pages so that the HTML page and JS logic can be developed simultaneously. It always give us faster productivity from a developer's point of view. Also, Angular provides us a structured JavaScript framework which can perform unit testing easily.

General Features of AngularJS

The most important and remarkable general features of AngularJS are,

1. Angular JS is a efficient framework that can help developer to develop Rich Internet Applications (RIA).
2. Angular JS provides developer an options to write client side application using Javascript using a clean Model View Controller (MVC) mechanism.
3. Code or Applications written in Angular JS are cross browser compatible. Angular JS framework automatically handles javascript code suitable for each browser.
4. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.
5. ngularJS is a framework to build large scale, high performance, and easy-to-maintain web applications.

Why Angular is known as a Framework

Before exploring AngularJS in depth, let us consider exactly what is AngularJS? What do we mean by a “framework,” and why would we want to use one? The dictionary definition tells us that a framework is “an essential supporting structure.” That sums up Angular very nicely, although Angular is much more than that. Angular is a large and helpful community, an ecosystem in which you can find new tools and utilities, an ingenious way of solving common problems, and, for many, a new and refreshing way of thinking about application structure and design. We could, if we wanted to make life harder for ourselves, write our own framework.

Realistically, however, for most of us, this just isn’t possible. It almost goes without saying that you need the support of some kind of framework, and that this framework almost certainly should be something other than your own undocumented (or less than well understood) ideas and thoughts on how things should be done. A good framework, such as AngularJS, is already well tested and well understood by others. Keep in mind that one day others may inherit your code, be on your team, or otherwise need to benefit from the structure and support a framework provides.

The use of frameworks isn’t uncommon; many programmers from all environment of coding rely on them. Business application developers use frameworks, such as the Microsoft Entity Framework, to ease their pain and speed up development when building database-related applications. For example, Java programmers use the LibGDX framework to help them create games. I hope I have explained the need for a framework and, more specifically, the fact that AngularJS is a great choice.

Architecture Concept

It's been a long time since the famous Model-View-Controller (MVC) pattern provided by Microsoft Corporation started to gain popularity in the software development industry and became one of the legends of the enterprise architecture design. Basically, the model represents the knowledge that the view is responsible for presenting, while the controller mediates the relationship between model and view. After a lot of discussions about which architectural pattern needed to follow by the Angular JS framework, its authors declared that from now on, AngularJS would adopt Model-View-Whatever (MVW). Regardless of the name, the most important benefit is that the framework provides a clear separation of the concerns between the application layers, providing modularity, flexibility, and testability.

In terms of concepts, a typical AngularJS application consists primarily of a view, model, and controller, but there are other important components, such as services, directives, and filters. The view, also called template, is entirely written in HTML, which provides a great opportunity to see web designers and JavaScript developers working side by side. It also takes advantage of the directives mechanism, which is a type of extension of the HTML vocabulary that brings the ability to perform programming language tasks such as iterating over an array or even evaluating an expression conditionally.

Behind the view, there is the component. At first, the component contains all the business logic implementation used by the view. However, as the application grows, it becomes really important to perform some refactoring activities, such as moving the code from the controller component to other components (for example, services) in order to keep the cohesion high.

The connection between the view and the controller is done by a shared object called model. It is located between them and is used to exchange information related to the model. The model is a simple Plain-Old-JavaScript-Object (POJO). It looks very clear and easy to understand, bringing simplicity to the development by not requiring any special syntax to be created.

Advantages of Angular JS

AngularJS, commonly referred to as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. The library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Those attributes are interpreted as directives telling Angular to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

The main advantages of the Angular JS are,

• No need to use observable functions; Angular analyzes the page DOM and builds the bindings based on the Angular-specific element attributes. That requires less writing, the code is cleaner, easier to understand and less error prone.
• Angular modifies the page DOM directly instead of adding inner HTML code. That is faster.
• Data binding occurs not on each control or value change (no change listeners) but at particular points of the JavaScript code execution. That dramatically improves performance as a single bulk Model/View update replaces hundreds of cascading data change events.
• Quite a number of different ways to do the same things, thus accommodating to particular development styles and tasks.
• Extended features such as dependency injection, routing, animations, view orchestration, and more.
• Supported by IntelliJ IDEA and Visual Studio .NET IDEs.
• Supported by Google and a great development community.
• AngularJS is more intuitive as it makes use of HTML as a declarative language. Moreover, it is less brittle for reorganizing.
• AngularJS is a comprehensive solution for rapid front-end development. It does not need any other plugins or frameworks. Moreover, there are a range of other features that include Restful actions, data building, dependency injection, enterprise-level testing, etc.
• AngularJS is unit testing ready, and that is one of its most compelling advantages.

Now, let us talk about Angular 4. Angular community has introduced some significant changes to Angular 4 and therefore, the major version number has been changed from 2 to 4 (skipping 3). The reason behind directly jumping to Angular 4 and skipping the version 3 was that the router package was in version 3.x, so instead of putting everything to 3.0 and the router to 4.0, the team chose to upgrade the versions of all the ng - modules to 4.0.

The following points introduced in Angular 4.0,

• TypeScript 2.1+ Required
  TypeScript 2.1 and 2.2 have brought really nice features you should check out. Angular 4 now supports them (and you will soon be able to activate the new strictNullChecks TypeScript option for example).
  
  
• ModuleID Removed
  They have added a new SystemJS plugin which dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.
• Ahead of Time Compilation
  View Engine: As we know, in AoT mode, Angular compiles your templates during the build, and generates JS code whereas in case of Just in Time mode, this compilation is done at runtime. Now, AoT has several advantages, like we will get to know that our templates is incorrect at build time instead of having to wait at runtime, and the application starts faster (as the code generation is already done). The downside of AoT that people were facing was that the generated JS is generally bigger than the uncompiled HTML templates. So, in the vast majority of applications, the package is in fact bigger with AoT. The team worked quite hard to implement a new View Engine, that produces less code when you use the Ahead of Time compilation. The results are quite impressive on large apps, while still conserving the same performances.
  
  
• Animations
  Angular Team have segregated animation package from @angular/core as a separate and dedication package. Therefore, if you don’t use animations, this extra code will not end up in your production bundles.
  
  
• Template is now ng-template
  The template tag is now deprecated, which mean you should use the ng-template tag instead. It still works though. Now Angular has its own template tag called ng-template. You will have a warning if you use the deprecated template somewhere when you update to Angular 4, so it will be easy to spot them.

In the previous section, we will discuss about how to set the environment of an angular 4 projects using visual studio. Also we will develop our first program in Angular 4. Before going to start the program, lets’ discuss about the project configuration.

Angular Js 4.0 project always contains 3 major configuration files. They are,

• tsconfig.json
• package.json
• system.config.js

tsconfig.json

The existence of a tsconfig.json file in a project directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project. A project is compiled in one of the following ways

• By invoking tsc with no input files, in which case the compiler searches for the tsconfig.json file starting in the current directory and continuing up the parent directory chain.
• By invoking tsc with no input files and a --project (or just -p) command line option that specifies the path of a directory containing a tsconfig.json file, or a path to a valid .json file containing the configurations.

When input files are specified on the command line, tsconfig.json files are ignored.

Sample of tsconfig.json

The "compilerOptions" property can be omitted, in which case the compiler’s defaults are used. For full list of supported Compiler Options, please visit the below links -

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html