The document provides an overview of Angular CLI and its commands for setting up and managing Angular applications, including creating and serving an app, using modules and components, and understanding Angular's binding syntax. Key commands, such as 'ng new' for creating apps and 'ng generate' for components and services, are highlighted. It also emphasizes the similarities between TypeScript and C#, along with resources to stay in touch with the author.

1. Angular Kickstart
Foyzul Karim
CEO, Code Coopers
Lead Mentor, Code Coopers Training

2. Angular CLI
• Has all the commands (well, most of the commands) in it. Like a
magic wand.
• Verify the environment
• > node –v
• > npm –v
• Install the cli
• > npm install -g @angular/cli
• Test if the cli is working
• > ng help

4. Create an app
• > ng new my-app = creates a new folder and scaffold the whole app
• > ng cd my-app = goes into the folder
• > ng serve = compiles the typescript and everything, host a web
server (port 4200 by default) using Webpack

7. Some vocabularies
• Module : set of classes works as a single unit. Like a project inside of a
solution in the compiled language world (C#/Java)
• Component : set of classes works as a mode smaller unit. It combines
of some HTML, CSS, JavaScript (TypeScript) codes. Angular’s code
combines then as a single component.

8. What’s happening
• Open the project / folder
• Starting point  main.ts app.module
• Bootstrapping the module (combines the required classes and make
ready as a single module (.dll concept in Dot Net world)
• So, yes we can have many different modules

9. Name of the component
HTML code for the
component
Css for the component
Necessary code of the
component to
manipulate the HTML

13. Add our component
• > ng generate component todo

14. Set our component to bootstrap

15. Set the selector to index.html

17. Angular Syntax
• 3 common ways to interact with view from code
• []  evaluate the expression and sets the value to the property. Its one-way
binding , only setter works
• ()  detects the event fired from the element and calls the method set here
or change the variable set here. Its one-way binding, but something like getter
• [()]  its two-way binding and behaves like the two type of binding written
above.
• {{}}  renders the value into the HTML DOM

20. TypeScript : its just See Sharp (C#)

21. Service classes
• > ng generate service todo

23. Injections
• Imports
• Providers
• Injects

24. That’s it. Thank you for today
• Keep in touch with me at
• http://fb.com/codecoopers
• http://fb.com/codecooperstraining
• http://github.com/foyzulkarim
• http://Youtube.com/foyzulkarim
• foyzulkarim@gmail.com