Scribd
Upload
193 views

Angular

Angular is a framework for building client applications in HTML, CSS, and JavaScript or TypeScript. TypeScript is commonly used with Angular as Angular itself is written in TypeScript. As applications get more complex, code becomes difficult to maintain and test without a framework. Angular provides a clean, loosely coupled structure that is easy to understand and maintain. It includes reusable utility code for user navigation and browser history. Overall, Angular makes application development easier compared to plain JavaScript or jQuery.

Uploaded by

kedhar swami kokkiligadda
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
193 views

Angular

Angular is a framework for building client applications in HTML, CSS, and JavaScript or TypeScript. TypeScript is commonly used with Angular as Angular itself is written in TypeScript. As applications get more complex, code becomes difficult to maintain and test without a framework. Angular provides a clean, loosely coupled structure that is easy to understand and maintain. It includes reusable utility code for user navigation and browser history. Overall, Angular makes application development easier compared to plain JavaScript or jQuery.

Uploaded by

kedhar swami kokkiligadda
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

Lecture-2

What is Angular?
• Angular is a framework for building client applications in HTML, CSS
and either javascript or a language like typescript that compiles to
javascript.

• Typescript is more common in the end user community because


Angular itself has been written with typescript.
Why do we need angular? Can we not use
plain old JavaScript or jQuery?
• As our applications get more complex, code becomes hard to
maintain. We need a way to properly structure our application.

• JavaScript patterns are hard to understand. Plus a lot of applications


built with JavaScript or jQuery are hard to test and that's why over
the past few years various frameworks have been built and evolved to
make web application development easier and angular is an example
of such frameworks.
Why do we need angular? Can we not use
plain old JavaScript or jQuery?
• It gives our applications a clean and loosely coupled structure that is
easy to understand and easy to maintain.

• It also brings in a lot of utility code that we can reuse in various


applications especially when dealing with the user's navigation and
the browser history plus applications built with angular are more
testable.

• Framework like angular to build client applications but using Angular


makes your life a lot easier.
Architecture of Angular Apps
Setting up the Development Environment
• Installation of Node
• It's basically a runtime environment for executing javascript code outside the
browser.
• node --version
• Install Angular CLI s a tool which is used for installing third party
libraries
• Install Angular CLI
• It is a command line tool that we use to create a new Angular project or
generate code as well as create deployable packages.
• npm install –g @angular/cli
• ng --version
First Angular App
• Create a new project using Angular CLI
• ng new app_name

• Compile new project


• ng serve

• Execute the app in web browser


• localhost:portnumber
Structure of an Angular Project
e2e folder
• So the first folder we have here is E-2 E which stands for end to end.
And this is where we write end to end tests for our application.

• If you have not worked but end to end tests these are basically
automated tests that simulate a real user so we can write code to
launch our browser navigate to the page of our application click a few
links here and there fill out a form. Click a button and then assert that
there is something on the page.
Node_modules
• This is where you store all the third party libraries that our application
may depend upon.

• This folder is purely for development.

• When we complete our application part of this third party libraries


are put in a bundle and deployed within an application.
src folder
• This is where we have the actual source code of our application.
• app folder
• inside this folder we have a module and a component. Every application has
at least one module and one component
• assets
• you store the static assets of our application here. If you have any image files
and it takes files your icons all of these go here
• environments
• this is where we store configuration settings for different environments. So
we have one file for the production environment and the other for the
development environment
• Fevicon
• Index
• Styles.css
• Main.ts
• Pollyphils

You might also like