Angular4 kickstart
2 likes556 views
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.
![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](https://image.slidesharecdn.com/angularkickstart-171111170555/85/Angular4-kickstart-17-320.jpg)
Angular4 kickstart
- 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 • [email protected]