In this slide, i have discussed the basics of angular and how can we make a Angular app beyond the 'hello world'. i also discussed about components, typescript etc in the slide. this was created for Angular Meetup Bangladesh 2017 session. Thanks
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
3.
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
5.
6.
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
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
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