- An Expression is simply a JS expression wrapped in curly braces and is outputed to the DOM
- Expressions can be:
- Some Computation Logic
- Literals
- Operators
- Variables
<!DOCTYPE html>
<html >
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body >
<div ng-app ng-init="sayHi='Hi There Everyone!'; luckyNum= 13; rate = 10.5; time= 11; myArr = [458, 812]; individual = { fName:'Omar', lName :'Belkay'}">
{{ (luckyNum * rate * time)/100 }}<br />
{{myArr[1]}} <br />
{{individual.fName + " " + individual.lName}}
</div>
</body>
</html>- I use the ng-init directive to declare variables within my application and they can be of any datatype
- Contain a conditional
- Have a loop
- Exceptions
- RegEx
- Declare Functions
- Have A Comma
- Have A Void
- Have the return keyword in them
npm i -g @angular/cling new nameofangapp- --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
├── 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
ng serveng generate component navbarng g c navbar- @ 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
- ALWAYS keep your Components and Services Separate
- Failure to do so will require you to FIRST declare your Service THEEEN your Component
- IF you fail to follow this order it results in:
- RUNTIME NULL REFERENCE ERROR
- IF you fail to follow this order it results in: