Search
  • Rinku Yadav

Angular and AngularJS: Explained

Angular or Angular 2 is a TypeScript based open source web application framework and is used for building web applications using HTML and TypeScript. It is rewritten by the same team at Google who built AngularJS. It should not be confused with AngularJS as developers say that AngularJS is version 1.X while Angular (without JS) refers to version 2 and up. Angular is written using Microsoft’s TypeScript language, which is a superset of ECMAScript 6 (ES6).


Components of Angular Architecture

  • Module - This is used to break the application into small parts in which each part is designed to perform a single task of the application.

  • Components - This is used to bring the modules together.

  • Templates - This is used to define the views of Angular applications.

  • Metadata - Metadata of the Angular application is defined using ‘@’ and is used to configure the expected behavior of the class. Metadata tells Angular how to process a class.

  • Services - Services are the set of code that is shared between different components of the application.

  • Injector - It maintains a list of services that are used by the application. Whenever any component requires any service, the injector will give the instance to that component.

  • Directives - Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by the directives.

Angular Architecture

  • Property Binding: It is used to update DOM property as well as for the input events. For example [class] is used to update the DOM style class of HTML elements.

  • Event binding: It is used to generate an event from a specific element like, on button click or keyup event of input control etc.

Angular vs. AngularJS Application


Angular architecture is divided into Component, Template, Directive, Service, and Module. Components are the UI building blocks of an Angular application and are organized in NgModules. An Angular application has at least a root module that is defined by a set of NgModules. There are two kinds of directives in the Angular applications.

  • Structural Directives: These directives alter the DOM’s layout by replacing its elements.

  • Attributive Directives: These directives change the appearance or behavior of DOM elements and Angular components.

While, in AngularJS, we have MVC architecture, MVC stands for Model, View and Controller. In AngularJS, controllers act as a mediator between the view and the model. Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications.

  • Model − It is the lowest level of the pattern responsible for maintaining data. The model is responsible for managing application data. It responds to the request from view and to the instructions from the controller to update itself.

  • View − It is responsible for displaying all or a portion of the data to the user. A presentation of data in a particular format, triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.

  • Controller − It is a software Code that controls the interactions between the Model and View. The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.

MVC is popular because it isolates the application logic from the user interface layer and supports the separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data needed by the view. The view then uses the data prepared by the controller to generate a final presentable response.

  • AngularJS relies on third party tools such as IDE and webstorm while Angular allows the use of CLI (command-line interface) tool and hence reduces the time of creating applications.

  • AngularJS is an open-source front-end framework that is mainly used for developing single page web applications (SPAs) while Angular is used for building any kind of enterprise scale web and mobile applications.

  • AngularJS is not supported by mobile browsers while Angular is supported by all the popular mobile browsers.

  • AngularJS is built using JavaScript language while Angular is built using Microsoft’s TypeScript language.

  • AngularJS does not support dependency injection while Angular supports hierarchical dependency injection. In software engineering, a hierarchical dependency injection system allows definition of different boundaries or scopes for dependencies to run in and follow the component tree structure. Dependency injection gives the advantage of code reusability, ease of refactoring and ease of testing.

Applications Made Using Angular

  • Google voice

  • Google Play Books

  • Netflix

  • YouTube

  • Walmart

  • PayPal

  • Gmail

  • Xbox

  • LUIS - Microsoft Azure

  • 24UR.com

Server-Side Rendering in Angular


Normally the Angular application executes in the browser and renders pages in DOM in response to user actions. But when dealing with servers, Angular Universal is used. Angular Universal is executed on the server side and generates static pages which then bootstrapped on the client side. This means the application is rendered more quickly, and thus gives a chance to users to view application layout before it becomes fully interactive. Therefore, Angular Universal is used when we need server-side rendering of the application.


Server-side rendering is helpful in cases where we need to improve application performance on mobiles and powerless devices because some end devices do not support JavaScript or execute JavaScript.


Angular Workspace and File Structure


Angular applications are built using the context of Angular workspace. A workspace contains files of one or more projects. A project is a standalone application or a shareable library. Following are the components of Angular workspace

  • .editorconfig - This file has a configuration for code editors.

  • .gitignore - This file specifies intentionally untracked files that Git should ignore.

  • README.md - It is an introductory documentation for the root app.

  • Angular.json - It is a primary configuration file for an Angular project. It includes configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor.

  • Package.json - It configures npm package dependencies that are available to all projects in the workspace.

  • Package-lock.json - It provides version information for all packages installed into node_modules by the npm client. If we use the yarn client, this file will be yarn.lock.

  • src/ - This folder contains source files for the root-level application project.

  • Node_modules/ - It provides npm packages to the entire workspace. Workspace-wide node_modules dependencies are visible to all projects.

  • Tsconfig.json - It is the base TypeScript configuration for projects in the workspace. All other configuration files inherit from this base file.

  • Tslint.json - It is the default TSLint configuration for projects in the workspace.

Components of Angular File Structure Inside src/ folder

  • App/ - It contains the component files in which our application logic and data are defined.

  • Assets/ - It contains an image and other asset files to be copied as-is when we build our application.

  • Environments/ - It contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. We can also define additional target environment configurations.

  • Favicon.ico - An icon to use for the application in the bookmark bar.

  • Index.html - The main HTML page that is served when someone visits our site. The CLI automatically adds all JavaScript and CSS files when building our app, so typically we don't need to add any <script> or<link> tags here manually.

  • Main.ts - The main entry point for our application. It compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. We can also use the AOT compiler without changing any code by appending the --aot flag to the CLI build and serve commands.

  • Polyfills.ts - It provides polyfill scripts for browser support.

  • Styles.sass - It lists CSS files that supply styles for a project. The extension reflects the style preprocessor we have configured for the project.

  • Test.ts - The main entry point for your unit tests, with some Angular-specific configuration. We don't typically need to edit this file.

Conclusion


In short, Angular is used for developing core and optional functionalities which are then imported as TypeScript libraries in the Angular applications. It was because of the feature of reusable components Angular became popular in its usage.


Rinku advises clients on infringement investigations related to patented encryption techniques, source code review, and software inventions. Rinku has a Bachelor's degree in Computer Science and Engineering.


His primary interests lie in cutting-edge cryptography, data security, web scraping, and artificial intelligence technologies. He is also well versed with both frontend and backend technologies such as HTML, CSS, PHP, Jquery, Javascript, Python, AJAX and MySQL databases.


References


Keywords - Angular, AngularJS, Angular Application, Angular Architecture, Angular Workspace, Angular File Structure, HTML, HTML Tags, TypeScript, Web Application, Source Code, Source Code Review.


Copperpod provides Technology Due Diligence and