Overview of Angular
Prepared by Spring Team
Content
⎆ Introduction to Angular
⎆ Angular Architecture
⎆ Angular Environment Installation
⎆ Angular CLI
⎆ Angular Module
⎆ Creating First Application
2
Introduction
⎊ Angular is a JavaScript framework and platform for developing client-slide (front-end).
⎊ It was created in 2009 by two developers, Misko Hevery and Adam Abrons.
⎊ It contains some benefits such as :
1. Support multiple platform
2. High speed, ultimate performance
3. Productivity
4. Full stack development
3
Introduction
⎊ The differences between Angular and AngularJS
AngularJS Angular
Architecture The view processes the information Uses components and
available in the model to generate the directives.
output.
Written JavaScript TypeScript
Mobile Support Not support Support
Expression Use ng-bind for databinding Properties enclosed in “()” and
Syntax “[]”
4
Introduction
Routing Uses $routerprovider.when() for Uses @RouteConfig{(..)} for
routing configuration. routing configuration.
Dependency Does not use dependency injection. Uses hierarchical dependency
Injection injection system with unidirectional
tree-based change detection.
Structure Less manageable Better structure
Speed Reduced the development effort and Faster
time
5
Angular Architecture
6
Angular Architecture
⎊ The architecture diagram identifies the eight main building blocks of an Angular application:
1. Module: denoted by @NgModule and used to declare each thing you create in application
and group them together.
2. Components: the piece of the screen; visually and logically and denoted by @Component.
3. Templates: a template is nothing but a form of HTML tags that tells Angular about how to
render the component.
7
Angular Architecture
4. Metadata : the information saying what to do with the class.
5. Data Binding:used to define the communication between a component and the DOM.
6. Directives : a .js/.ts class, which is declared with @Directive. That’s what lets you change
the UI elements at runtime.
7. Services: declared as @Injectable. A class that gives us the ability to use data in multiple
components. It provides specific functionality not directly related to views and saves us
from duplicated code.
8
Angular Environment Installation
⎊ Install Node.js from https://nodejs.org/en/
to check the version of your node.js node -v
⎊ Use npm to Install Angular CLI
use this following command :
npm install -g @angular/cli or npm install -g @angular/cli@latest
⎊ Check your installed version
to check Node and Angular CLI version, use ng --version command
9
Angular CLI
⎊ Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and
maintain Angular applications. You can use the tool directly in a command shell, or indirectly
through an interactive UI such as Angular Console.
Example :
- ng new : used for create application
- ng generate : used to generate components, routes, services and pipes with a simple command.
- ng serve : test your app locally while developing.
10
Creating First Application
Go to your terminal and execute these commands
$ cd ~
$ ng new angular-example
$ cd angular-example
$ ng serve
11
References
● https://www.freecodecamp.org/news/angular-8-tutorial-in-easy-steps/
● https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407
● https://www.edureka.co/blog/angular-tutorial/
● https://medium.com/@cyrilletuzi/architecture-in-angular-projects-242606567e40
12
THANKS!
Please try hard to study..!
13
