UNIT 3: INTRODUCTION TO ANGULAR JS

INTRODUCTION TO ANGULARJS

● 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.
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.
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: Manages communication between the model and
view, updating the model based on user interactions.
MVC ARCHITECTURE
KEY FEATURES OF ANGULARJS
2. Filters and Data Transformation:
● AngularJS provides powerful filters for transforming data before
displaying it in templates. Common filters include filter, orderBy,
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.
KEY FEATURES OF ANGULARJS

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.
KEY FEATURES OF ANGULARJS

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.
ANGULARJS IS A JAVASCRIPT FRAMEWORK

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

below:

● Using Angular CLI and NPM

● Using CDN Link in script tag
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.
WHY CHOOSE ANGULARJS?
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:
STEPS TO INSTALL ANGULAR JS USING ANGULAR
CLI
Step-4: Run the application using the following command in the terminal
ng serve
STEPS TO CREATE FIRST ANGULAR APP
Example: This example illustrates the basic Hello World
app using Angular JS.
SUMMARY TO CREATE FIRST ANGULAR APP

● Imports the Component decorator from Angular's core library.

● The component is using a selector (my-app) to be rendered in HTML.
In this case, wherever you use <my-app></my-app>, Angular will
display this component. This makes it reusable.
● The template is an inline HTML (<h1>Hello World!</h1>), but could
be replaced with a separate HTML file.
● Styles are defined in an external CSS file ([Link]).
● The component logic is contained in the AppComponent class, but it
doesn't have any functionality right now.
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.
APPLICATIONS OF ANGULARJS

1. Collaborative Apps:
● AngularJS is perfect for chat applications and collaborative
document editing.
2. 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.
ANGULAR CLI | ANGULAR PROJECT SETUP

Angular is an open-source front-end web application

framework that is used for building single-page and complex
web applications. By default, angular uses TypeScript for
creating logic but as the browser doesn’t know typescript it
converts typescript into javascript in order to make typescript
understandable.
WHAT IS ANGULAR CLI?
 Angular CLI (Command Line Interface) is a powerful tool for
managing Angular Projects. It is a handy tool that makes building
Angular apps easier and faster.
 It makes the development process easier by defining different
commands for different operations. It keeps your project organized
and consistent.
 Note: Please make sure you have installed node and npm in your
system. You can check your node version and npm version by using
the following command: node --version
npm --version
STEPS TO CREATE APPLICATION USING ANGULAR
CLI
 Step 1: Install Angular CLI
npm install - g @angular/cli
 Step 2: Create new Project
 ng new myNewApp
 Step 3: Navigate to your Project Directory
 cd myNewApp
 Step 4: Run Server and See Your Application
 ng serve
ANGULARJS

 AngularJS is a JavaScript framework. It can be added to an HTML

page with a <script> tag.
 AngularJS extends HTML attributes with Directives, and binds data
to HTML with Expressions.
 AngularJS is distributed as a JavaScript file, and can be added to a
web page with a script tag:
 <script src="[Link]
[Link]"></script>
ANGULARJS EXTENDS HTML

 AngularJS extends HTML with ng-directives.

 The ng-app directive defines an AngularJS application.
 The ng-model directive binds the value of HTML controls (input,
select, textarea) to application data.
 The ng-bind directive binds application data to the HTML view.
ANGULARJS EXAMPLE

<!DOCTYPE html>
<html>
<script src="[Link]
6.9/[Link]"></script>
<body>

<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

</body>
</html>
EXAMPLE EXPLAINED:

 AngularJS starts automatically when the web page has loaded.

 The ng-app directive tells AngularJS that the <div> element is the
"owner" of an AngularJS application.
 The ng-model directive binds the value of the input field to the
application variable name.
 The ng-bind directive binds the content of the <p> element to the
application variable name.