The document provides an introduction to Angular, detailing its evolution from version 1.0 to 4.0, and highlights its features such as two-way data binding, TypeScript compatibility, and the Angular CLI for project setup and best practices. It outlines the requirements for creating a 'Hello World' application and offers commands for generating various components. Additionally, the document describes a live coding example for a to-do app, showcasing the use of the CLI in development.

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