Javascript: Frontend - AngularJS

# FrontEnd Technologies:

# Web (Internet)

- Html, css framework (bootstrap, material design-> component based)

Angular 2
- Single page application (fast).
- Web application or website that interacts with the user by dynamically rewritting the current page rather than loading entire new pages from a server.
- Can do asynchronous jobs.

# Tools:
- Typescript
- VS code
# MVVW (Model View ViewModel Pattern) -> two-way data binding
- In angular, the controller (the C in MVC) is replaced by ViewModel (the VM in MVVM).
# Typescript Programming Language
Typescript (.ts) is imp in angular 2.
- supersetup js
- strictly typed program
- can do class based oop
- future programming language.
- security maintain (TS code compile and run in js)
- JS with additional features.
# Data Binding
- Controller and Views synchronize.
Types:
1. Event
-  eg: click, onClick, change
2. Property
- eg: hide, show
3. 2-way binding
- Reflect in view if changes in model- controller and vice-versa.

#Pipes and Directives
Pipes -> data flow in pipes with restructure the format
Directives -> everything is directive in angular 2. ng..(directives)
- Using directives we can make elements in angular2 which can't be in HTML5.
- The directive gives behaviors.

# Frontend builds tools (angular CLI, webpack)
- Task runner -> uglify, minify

# Glossary
- class, modules, components, decorators, selectors, meta-data, directives, pipes, interface

# SQL injection - injection attack that makes it possible to execute malicious sql statement.
-no SQL injection (token authentication makes it secure.)
- token validation is important.

# Importance to get data
1. Website / Web App
2. Network
- Request url: http://...
- Access control request: Post
3. Application
- local storage (token-> for authorization)

# Angular 1 VS Angular 2 (completely different)
Installation Angular:
1. npm install -g @angular/cli
2. ng new my-app
3. cd my-app
4. ng-serve
5. localhosy: 4200 (default)

# Files and Folders Description
- e2e (end to end) for testing.
- node_modules (npm registry module locally store for our projects)
- angular-cli.json (we use angular-cli to use cli command eg ng..)
- editorconfig(vs code config)
- .gitignore(ignore for git while pushing)
- karma.config.js (jasmine) testing framework for frontend. mocha (test framework for backend and frontend).
- package.json (project description).
- protractor.conf.js (testing)
- README.md (github project description)
- tsconfig.json(ts project to js)(compile config)
- tslint.json (if something missing in code, red sign or error).
- yarn.lock (package managing tool).
- src(No need to use or change any file except src) IMPORTANT
- typing.d.ts (declaration, systemjs module definition)
- tsconfig.spec.json(ts compiler and config)
- tsconfig.app.json (ts compiler and config)
- test.ts (test file)
- styles.css (css code default)
- polyfills.ts (code run in browser, config)
- main.ts (main run file, main load file)
- index.html(browser view) only this file load in single page app
- favicon.icon (environment.ts)
- environments (development and production config)
- assets (images, css, sources, icon)
- app folder (IMP) only this folder use for coding.