Open In App

Introduction to AngularJS

Last Updated : 21 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

AngularJS is a popular open-source framework that simplifies web development by creating interactive single-page applications (SPAs). Unlike traditional websites that load new pages for each click, SPAs offer a smoother user experience by updating content on the same page.

AngularJS makes this possible by transforming static HTML into dynamic content that adapts to user interactions. Features like data binding and dependency injection streamline development, saving you time and effort. With regular updates and a large community, AngularJS ensures your web applications stay modern and efficient.

AngularJS is a JavaScript Framework

AngularJS is a JavaScript framework that can be used in 2 ways given below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js" 
integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

Why Choose AngularJS?

  1. Easy to Work With: AngularJS requires only basic knowledge of HTML, CSS, and JavaScript. You don’t need to be an expert; just bring your curiosity and creativity.
  2. Time-Saving Components: AngularJS allows you to work with reusable components, saving time and reducing unnecessary code. Components are the building blocks of your application.
  3. Ready-to-Use Templates: AngularJS leverages plain HTML templates, which it compiles and makes ready for use. No complex setup—just write your HTML and let AngularJS do the heavy lifting.
  4. Directives: AngularJS extends HTML with custom elements and attributes called directives. These enable you to create reusable components and define custom behaviors for your application. Directives make it easier to manipulate the DOM, handle events, and encapsulate complex UI logic within a single component.

Steps to Install Angular JS using Angular CLI

Step 1: Install the Angular CLI

npm install - g @angular/cli

Step-2: Initialize new project using the below command

ng new my-app

Step-3: Go to your project directory

cd my-app

Project Structure:

Angular JS Project structure

Step-4: Run the application using the following command in the terminal

ng serve 
Angular JS Introduction Page

Steps to Create First Angular App

Example: This example illustrates the basic Hello World app using Angular JS.

JavaScript
// Filename - app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>Hello World!</h1>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Output:

angular-js-first-app

Angula Hello World App

History of AngularJS

AngularJS was first developed in 2008-2009 by Miško Hevery and Adam Abrons at Brat Tech LLC. Its original purpose was to provide software for an online JSON storage service and simplify the development of enterprise applications that were valued by the megabyte. Currently, AngularJS is maintained by Google. Version 1.6, which introduced the concept of component-based application architecture, was the first release. This version removed the Sandbox, which was responsible for security, despite the fact that it had several vulnerabilities that could bypass it.

Key Features of AngularJS

  1. Model-View-Controller (MVC) Architecture:
    • Model: Manages data and logic, responding to requests from the view and instructions from the controller.
    • View: Displays application data to users.
    • Controller: Orchestrates communication between the model and view, updating the model based on user interactions.
  2. Filters and Data Transformation:
    • AngularJS provides powerful filters for transforming data before displaying it in templates. Common filters include filterorderBy, and currency.
    • You can also create custom filters tailored to your application’s needs.
  3. Routing and Single-Page Applications (SPAs):
    • Implement client-side routing to create SPAs.
    • Handle route parameters and navigation seamlessly.
  4. Services and Dependency Injection:
    • Services are reusable components that provide specific functionality.
    • Dependency injection ensures loose coupling between components, making your code more maintainable.
  5. Custom Directives and Components:
    • Build reusable components using custom directives.
    • Isolate scope and communicate between components.
  6. Testing AngularJS Applications:
    • Write unit tests using Jasmine and Karma.
    • Explore end-to-end testing with Protractor.
  7. Advanced Topics:
    • Dive into promises and asynchronous programming.
    • Interact with RESTful APIs.
    • Optimize performance and follow best practices.

Applications of AngularJS

  1. Dynamic Forms:
    • AngularJS excels at creating dynamic forms with real-time validation and feedback.
  2. Real-Time Dashboards:
    • Build interactive dashboards that update in real time based on user interactions.
  3. Collaborative Apps:
    • AngularJS is perfect for chat applications and collaborative document editing.
  4. E-Commerce Platforms:
    • Create seamless shopping experiences with AngularJS-powered product catalogs and checkout processes.

Advantages of AngularJS

  • It facilitates the Two-way Binding that helps to render correspondingly the changes made to the view or the model.
  • It helps to create a responsive web application, along with providing the prototyping that can be utilized to load the application faster.
  • It uses the concept of directive that helps to add functionality to the application. For this, the overall length of the code reduces along with discarding the repetition of the code that is specific to perform the particular task.




Previous Article
Next Article

Similar Reads

AngularJS ng-show Directive
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: &lt;element ng-show="expression"&gt; Contents... &lt;/element&gt; Parameter Value: expre
2 min read
Difference between Bootstrap and AngularJS
Bootstrap is a free and open source front-end web development framework. It is a giant collection of HTML, CSS, and JavaScript code that is designed to help build user interface components. It is a free collection of tools for creating websites and web applications. It is used by many developers and according to the official Bootstrap site: It is t
5 min read
How to append a new table row in AngularJS ?
In this article, we will see how to insert or append the new table row in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the push() method to insert the new rows into the array. This array will be served as the content to the &lt;tr&gt; element. The ng-repeat directive is used to serve the co
2 min read
How to use a Custom Service Inside a Filter in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a &lt;script&gt; tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of any value, function, or feature that an application
4 min read
AngularJS currency Filter
AngularJS currency filter is used to convert a number into a currency format. If no currency format is specified currency filter uses the local currency format. Syntax: {{ currency_expression | currency : symbol : fractionSize}}Parameters: It contains 2 parameters as mentioned above and described below: symbol: It is an optional parameter. It is us
2 min read
How to convert string into a number using AngularJS ?
In this article, we will see how to convert a string into a number in AngularJS, along with understanding its implementation through the illustrations. Approach: The parseInt() method is used for converting the string to an integer. We will check whether the string is an integer or not by the isNumber() method.Example 1: In the first example, the s
2 min read
How to encode/decode URL using AngularJS ?
In this article, we will see the mechanism to encode/decode URL using AngularJS, along with knowing the different methods available to accomplish the given task, &amp; will understand it through the illustration. A URL specifies a resource and its access protocol. Encode URL: URL Encoding is a way to translate unprintable or reserved characters in
3 min read
AngularJS ng-init Directive
The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: &lt;element ng-init = "expression"&gt; ... &lt;/element&gt;Example: This example descr
1 min read
AngularJS ng-if Directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it is false then the element is removed and if it is
2 min read
AngularJS ng-dblclick Directive
The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice. This means that the element's original ondblclick event will not be overridden by this directive, both will be executed.
2 min read