You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I use the ng-init directive to declare variables within my application and they can be of any datatype
NO-FLY ZONES FOR EXPRESSIONS
Contain a conditional
Have a loop
Exceptions
RegEx
Declare Functions
Have A Comma
Have A Void
Have the return keyword in them
Install Angular CLI
npm i -g @angular/cli
How To Create An Angular Application Using The Angular CLI
ng new nameofangapp
Flags When Creating An Angular App
--verboase=true Telling Angular to output more info to the console
--skipTests=true Telling Angular to not generate test files for my project
--skipGit=true Telling Angular to not initialize a Git Repo for my project
--routing=true Telling Angular that I want routing in my app and to have it listed in my modules
Project Structure
├── README.md
├── /node_modules ======> 3rd party libs are installed here that we use in my app
└── /src
└── /myapp ======> All the files necessary to generate the UI of my app are here
| ├── myapp-routing.module.ts
| ├── myapp.component.css ======> CSS Stylesheet for the root component
| ├── myapp-component.html ======> Create the html file for me
| ├── myapp.component.spec.ts ======> Unit tests for the root component
| ├── myapp.component.ts ======> Definition of module and properties
| └── myapp.module.ts ======> Root Component i.e. App.js in ReactJS
├── /assets ======> Static files i.e. images, fonts, etc.
├── /environments ======> configuration for development and production environments
| ├── environment.prod.ts
| └── environment.ts
├── favicon.ico ├── index.html ======> Bootstraps my app
├── main.ts ======> Main entry point of your Angular app tells Angular to start my app
├── polyfills.ts ├── styles.css ======> Global styling
└── test.ts ======> Unit Tests
├── angular.json ======> Defines structure to my angular application
├── karma.conf.js ======> Test runner file
├── package-lock.json ======> Gives Angular Details in regards to the version for all the packages in node_modules dir
├── package.json ======> Configures all your npm package dependencies
├── README.md ======> Documentation
├── tsconfig.app.json
├── tsconfig.json ======> Typescript configuration file... Gives instructions to the typescript compiler
├── .browserslistrc
├── .editorconfig
└── .gitignore ======> List the files you do not want Git To Track Here
Fire Your Angular App in The Browser
ng serve
How To Create A Component In Angular
ng generate component navbar
2nd Way ofHow To Create A Component In Angular
ng g c navbar
Dependency Injection In Angular
@ Injectable Decorator tells Angular that this specified Service Class should be visible to everyone
within your Application.
Since Components consume services
I need Dependency Injection to give my component all the power my service has for functionality purposes
Good Practices
ALWAYS keep your Components and Services Separate
Failure to do so will require you to FIRST declare your Service THEEEN your Component