About the Presentation: Nikunj Patel will be presenting on Angular 2 CLI with Node JS. • Are you a developer interested in TypeScript and Angular? • Do you feel like setting up a solid Angular 2 environment is a huge pain? • Is your Angular app becoming a maintenance nightmare? • Are you seeing Code inconsistency due to lack of coding standards in your angular App? Worry not, In this Live coding session we will explore the power of “Angular CLI” by developing an Angular Application. In the process, we will learn how easily we can produce a well structured, modular and testable code. We will discuss key points, shortcuts, gotchas and best practices of the Angular world. If Time permits, we will also develop backend Rest API using node.Js to power our Angular App to get a feel of how Angular can help you solve real-world problems. Please come prepared with following installed so that we can hit the ground running. Prerequisites : Install Node.Js Install Visual Studio Code Install Google Chrome Install PostMan (Optional) About the presenter: Nik Patel is Sr. Software Engineer at Frontline Education. He has 7+ years of experience in a Full stack and works on .NET and MEAN stack. He strongly believes in “Paying it forward” and is committed to growing by learning and contributing back to the community.

1. ANGULAR CLI
NIKUNJ PATEL
@PATELNIK7

2. INTRODUCTION TO ANGULAR
• Angular started as a side project and was released back in June, 2012
• client side MVC and MVVM framework
• Mongo, Express, Angular, Node (MEAN) Stack.
• Journey from 1.0 —> 2.0 —> 4.0

3. WHY ANGULAR?
• Two way data binding
• loosely coupled and easily testable.
• TypeScript
• Components
• Develop Once, Run everywhere
• Size and Speed.
• Added IDE Support

4. BASIC DEFINITIONS
• Bootstrapping
• It is used to explicitly specify a root component that Angular should use to start
the application.
• Components
• Allows to add metadata to determine how to process, instantiate and use
component (Class with templates) at runtime.
• Modules
• Helps put components as a cohesive blocks of functionality.

5. DEVELOP “HELLO WORLD” FROM SCRATCH
• “With great power, comes great responsibility.”
• Setting up Angular environment is tougher than it used to be.
• In Angular1, we could easily create Hello World application in matter of minutes.
However, With Angular2 Things have changed.
• Let’s see what it takes now to create Angular2 application.

6. PREREQUISITES FOR “HELLO WORLD”.
• Install TypeScript (if not installed)
• tsconfig.json
• package.json
• App (module, component, main.ts)
• systemjs.config.js
• lite-server , Concurrently

7. WHEN THEY SAID USE ANGULAR

8. INTRODUCING ANGULAR CLI
• Angular Command Line Interface (CLI) is a powerful solution to allow code generation
with simple commands.
• It also helps us with following
• Setting up Angular Project
• Following best practices in Js world.
• Testable Code
• Modular Code.
• Let’s Create “Hello World” application using Angular CLI.

9. PREREQUISITES FOR “HELLO WORLD”.
• Install TypeScript (if not installed) : npm install -g TypeScript
• Install Angular Cli : npm install -g @angular/cli
• Create New Project. : ng new ProjectName
• Go To the directory : cd ProjectName
• run the Project. : ng serve -o

10. “HELLO WORLD” WITH ANGULAR CLI

11. ANGULAR CLI - BASIC COMMANDS
• dry run : --dry-run
• skip npm : --skip-npm
• default styles : ng set defaults.styleExt scss
• routing : --routing
• ng doc.
• ng help
• ng generate

12. ANGULAR CLI - MORE COMMANDS
• Module : ng g m ModuleName
• Component : ng g c ComponentName
• Class : ng g cl ClassName
• Interface : ng g i InterfaceName
• Enum : ng g e EnumName
• Service : ng g s ServiceName
• Directive : ng g d DirectiveName

13. LIVE CODING : TODO APP
• Requirements
• Home Screen
• Add new To-do
• List all remaining To-do
• List of Paused To-do

14. LIVE CODING : TODO APP
• Requirements
• Home Screen
• ToDo Card
• Done
• Delay
• Delete

15. LIVE CODING : TODO APP
• Requirements
• Home Screen
• ToDo Card
• History Page
• Show all Complete ToDo
• Chart / Graph

16. LIVE CODING : TODO APP
• Requirements
• Home Screen
• ToDo Card
• History Page
• Create Api
• Node.Js as a backEnd

17. LIVE DEMO

18. IT’S EASY WITH CLI
• ng build
• ng build -p PortNumber
• ng test
• ng e2e
• ng build --prod

20. Survey link : http://bit.ly/NgCliSdc

21. REFERENCES
• Angular CLI (https://github.com/angular/angular-cli/)
• PluralSight Course : Angular CLI by John Papa
(https://app.pluralsight.com/library/courses/angular-cli/)
• Angular CLI cheatsheet