Basics to start with Angular 5 from setting up to deploying the application in production mode. It will help you to start fast and compare Angular JS with Angular 5

1. ANGULAR 5
By: Abhishek Mallick

2. WE WILL DISCUSS ABOUT
• Introduction
• Evolution Timeline
• Some Syntax AngularJS vs Angular 5
• Angular 5 start-up
– Angular 5 setup
– Angular 5 create new project
– New project structure
– Special Instruction
• Angular 5 elements
– Components
– Interpolation, Property Binding & Event Binding
– Route
– Services
• Angular 5 Deployment

3. INTRODUCTION
• Angular is a
– JavaScript-based
– Open-source
– Front-end web application framework
– Mainly maintained by Google
– And by a community of individuals and corporations
– To address many of the challenges encountered in developing
single-page applications

4. EVOLUTION TIMELINE
2012
2014
2016
2017
2018
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
AngularJS Angular 2 Angular 4 Angular 5 Angular 6

5. SOME SYNTAX ANGULARJS VS ANGULAR 5
Syntax AngularJS Angular 5
Model binding ng-model [(ngModel)]
Value Binding ng-value [value]
Click Binding ng-click (click)
Scope creation $scope Not needed
Repetition ng-repeat *ngFor

6. ANGULAR 5 START-UP (SETUP)
• Open command line interface
• Type command to install angular 5 at global level
– $ npm install @angular/cli -g
• Once the installation is over to check the version of Angular
use command
– $ ng -v
• If you see an output similar to this the installation is over
– Angular CLI: 1.6.8
Node: 8.9.1
OS: win32 x64
Angular:
…

7. ANGULAR 5 START-UP (CREATE NEW PROJECT)
• Open command prompt interface to the folder path
• Run the command to generate the angular structure inside the folder:
– $ ng new <project_name> –style=scss –routing
• Here in above code we are creating a new project with style support for
scss and routing enabled
• Now get inside the project name folder <project_name> by command
– $ cd <project_name>
• Now it’s time to run the default project created using command
– $ ng serve
• Now test your first application by opening the browser and opening url
mentioned which running the above command (default
http://localhost:4200)

8. ANGULAR 5 START-UP (CREATE NEW PROJECT)

9. ANGULAR 5 START-UP (PROJECT STRUCTURE)

10. ANGULAR 5 START-UP (SPECIAL INSTRUCTION)
• To do the changes we will do all our changes inside “src”
folder

11. ANGULAR 5 ELEMENTS (COMPONENTS)
• Angular components are considered as the basic building
blocks of angular app.
• Angular components can be found inside “/src/app” folder
• Angular components is made up of:
– A component decorator, which help to set CSS, animations and many
more
– Imports needed by the component to work
– A Class (here lies the component’s logic)

12. ANGULAR 5 ELEMENTS (COMPONENTS)
• Open the cmd in the <project_name> location
• Type the command
– $ ng generate component <component_name>
– You can also do this by using command
– $ ng g c <component_name>
– Example:
• $ ng g c home
• The above command will generate the component with other files as:
• create src/app/home/home.component.html (23 bytes)
create src/app/home/home.component.spec.ts (614 bytes)
create src/app/home/home.component.ts (262 bytes)
create src/app/home/home.component.scss (0 bytes)
update src/app/app.module.ts (467 bytes)
• It also maps the new component in the app.module.ts as from above.

13. ANGULAR 5 ELEMENTS (COMPONENTS)
• Now if you check the above files let us go through each
one by one:
– home.component.html : This file contains the html for the home
component. All the html changes need to be changed for this
component needs to be added in this file.
– home.component.ts : This file contains the logic need to be
performed for this component under the class
“HomeComponent” inside.
– home.component.scss : This file contains the CSS styling that
needs to be added for the component.

14. ANGULAR 5 ELEMENTS (INTERPOLATION)
• When we change some property from the component
class to template we use interpolation.

15. ANGULAR 5 ELEMENTS (INTERPOLATION)
• Example at:
https://abhishekmallickblog.wordpress.com/2018/02/20/
angular-5-interpolation-property-binding-event-binding/

16. ANGULAR 5 ELEMENTS (PROPERTY BINDING)
• Binding the properties of the html element with the code
in the class

17. ANGULAR 5 ELEMENTS (PROPERTY BINDING)
• Example at:
https://abhishekmallickblog.wordpress.com/2018/02/20/
angular-5-interpolation-property-binding-event-binding/

18. ANGULAR 5 ELEMENTS (EVENT BINDING)
• Say you want to take a data and set data from and to
an input box using component class then you use Two-
way Binding

19. ANGULAR 5 ELEMENTS (EVENT BINDING)
• Example at:
https://abhishekmallickblog.wordpress.com/2018/02/20/
angular-5-interpolation-property-binding-event-binding/

20. ANGULAR 5 ELEMENTS (ROUTE)
• Route is navigating through the multiple screens of the
app.

21. ANGULAR 5 ELEMENTS (ROUTE)
• Example at:
https://abhishekmallickblog.wordpress.com/2018/02/20/
angular-5-route/

22. ANGULAR 5 ELEMENTS (SERVICES)
• Services are class in Angular 5 which are used to provide
common features or variables to multiple modules of the
app.

23. ANGULAR 5 ELEMENTS (SERVICES)
• Example at:
https://abhishekmallickblog.wordpress.com/2018/03/25/
angular-5-services/

24. ANGULAR 5 DEPLOYMENT
• Normal build
– $ ng build
– after it executes (might 5 to 15 min) you can see a folder ”/dist”
• Production build
– $ ng build –prod
– after it executes (might 5 to 15 min) you can see a folder ”/dist”
• Let us see the difference between both

25. AT LAST OF THEORY
• As you can see from the evolution of Angular from 2012
till today, there been multiple iterations. This can help
you solve a problem and not the only solution.
• So what must be in mind is
“These are only tools which can only enable
you to solve a problem and only limited what
you want to use it for” – Abhishek Mallick

26. REFERENCE
• https://abhishekmallickblog.wordpress.com/2018/02/20/l
et-us-start-with-angular-5/
• https://angular.io/docs

27. THANK YOU FOR BEING SUCH A GREAT FOLKS