Notes Taken from Angular Tutorial

Angular Tutorial: - Edureka

Reference URLS:

https://www.youtube.com/watch?v=w6kwlyiJ5bM

https://www.youtube.com/watch?v=pTec1e8oyc8

https://www.youtube.com/watch?v=JmDBGhGWi8Y

Angular advantages: 

What’s new in Angular 8:

• Ivy Engine. (this may come in full fledged version in Angular 9)
• Ivy is the name given to Angular next generation compilation and rendering pipeline.  This will help you to preview your website to see how it works.
• Bezel Engine
• Differential loading
• Backward compatibility
• makes the upgrade process for large projects easier.
• Opt-in usage sharing
• Angular team will be able to get anonymous information with your consent to keep track of the commands that are used and time taken to build.
• Dependency updates
• Angular has updated dependencies on tools like rxjs, node and typescript.  This is done for better performance.
• Web Worker bundling
• This allows you to write code that run separately from the main thread this improves speed by parallelizing multiple tasks.

Angular Architecture:

Typescript:

• Strongly typed, object oriented, compiled language. – Anders Hejlsberg at Microsoft
• Typescript is a superset of Javascript.
• Process of converting typescript to javascript is called transpilation.
• tsc <filename.ts> - command to conver ts to js.
• node <filename.js> - to execute from CMD prompt
• Note: When using angular it will automatically does this for us we don’t have to use any command like above.
• Typescript is not platform specific, It can be used in any browser device or operating system

Differences between Typescript and Javascript:

Typescript	Javascript
Object Oriented programming language	Just a scripting language
Can support static features such as modules, interfaces etc.	No support

Different ways of declaring the types in typescript:

Basic Types in Typescript:

·         Boolean

o  

·         Number

o  

·         String

o  

·         Arrays

o  

·         Tuples – Define arrays with fixed number of elements whose data type are known but they can be different

o  

·         enum – allows you to define a set of named constants.  Constants are variables whose values can’t be changed.

o  

o  

·         any

o  

·         object – represents non primitive type in typescript.  This means it can be any type which is not a number or string, Boolean, symbol,  null or unidentified

o  

Difference between let and var keyword:

Var keyword:

Here Scope of i is going beyond the for loop.

Let Keyword:

Here Scope of i is not going beyond the for loop.

Type Assertions:

When type of variable is mentioned typescript will assist you with available functions that you can use.

When type of variable is NOT mentioned typescript wont assist you with available functions that you can use.

Though you haven’t specified the type earlier and now you want typescript to assist with the available functions, you can use type assertions. 

Type Assertions will help you to define the type of the variable even if you haven’t specified the type while declaring the variable.  They can be specified in two ways.

One method of specifying type assertion: Make use of “as” keyword.

Another method of specifying type assertion: Make use of “angular brackets <>”

Functions:

Functions are building blocks of a program.

Arrow Functions:

·         Arrow functions are something like lambda function in Java. 

·         These functions can be defined in just a single line.

·         Arrow functions are very useful in terms of reducing the code size.

·         In addition they can be served to other methods as inputs.

JS:

TS:

Comparatively JS code is bulkier than TS code.

Classes:

• ·         Typescript introduces classes so that they can avail the benefits of Object oriented techniques like encapsulation and abstraction.
• ·         The class in typescript compiled to plain javascript function by typescript compiler to work across platforms and browsers.
• ·         Class in java script can include constructors properties and methods.
• ·         Typescript classes also support inheritance.  Inheritance is the ability of the program to create new classes from the existing class.
• ·         Using extends keyword one class can inherit the properties from super class.
• ·         Child classes inherit all properties and methods except private members and constructors from the parent class
• ·         Access specifiers(public, private, protected) can be used to limit the visibility of variables.
• ·         Typescript does not support multiple inheritance.

                Typescript Interfaces:

·         Interface is a structure that will contain only the declaration of fields and methods and there will be no definition of it.

·         When some class  implements the interface that class has to define each of them within the class itself.

Pre-requisite for setting up of project:

·           You need to have Node JS on your system,

·           NPM – Node Package Manager

·           Huge packages – around 12 lakh

·           Run CMD as Admin         

·           npm i -g @angular/cli

·           Using CMD navigate to the folder where you want to generate application.

·           ng new <application name>

·           cd <application name>

·           npm start

·           In browser navigate to localhost:4200

Project folder Structure:

·         e2e – Contains a source of files to perform set of end-to-end tests that corresponds to root level of application along with test specific configuration files.

·         node_modules – contains set of NPM package modules for the entire workplace

·         src – contains all the root level application source files that req required for your application development

o   app – contains all the component files in which your application logic and data are defined

§  app.routing.module.ts – containing routing info

§  app.component.css – This defines the base CSS style sheet for Route app component

§  app.component.html – it defines the HTML template associated with the root app component

§  app.component.spec.ts

§  app.component.ts – defines the logic for the applications root component or the app component.  The view that is associated with this component becomes the root of the view hierarchy

§  app.module.ts – This is a very important file and it defines the root module name.  app module tells angular how to assemble this application.  It initially has only the app component, however as you proceed when you add on more components have to specify them over here.

o   assets – contains image and other asset files that are to be copied when you build your application

o   environment – contains build configuration for particular target environment.  By default there is an unnamed standard development environment and production environment.  You can define additional target environments if required.

o   favicon.ico – It is nothing but an icon to use for this application in the bookmark bar.

o   Index.html – the main html file that is showed when someone visits your site.   CLI adds all javascript and css files when building your application.

o   main.ts –  this is the entry point of your application.  It compiles the application with JIT compiler or Just-In-Time compiler and bootstraps the application root module.  The application root module is nothing but the app module.

o   polyfills.ts –  provides scripts for browser support

o   styles.css –  lists all the CSS styles that supply styles for this project

o   test.ts – This is nothing but an entry point for all your unit tests with some angular specific configuration.  Typically you don’t need to edit any of the code that is present within these test files.

·         editorconfig – contains configuration for the code editors

·         gitignore – contains intentionally ignored files should be ignored by GIT

·         angular.json – contains all the CLI configuration defaults for all projects in workspace including configuration options for build, serve and test tools that the CLI uses such as tslint, karma and protractor.

·         browserslist – configures sharing of Target browsers and node.js versions among various fornt-end tools

·         karma.conf.js – contains application specific karma configuration.  Karma is actually a test runner for javascript applications

·         package-lock.json – provides version information for all packages installed into node modules by the npm client.

·         package.json – configures npm package dependencies that are available to all the projects in the workspace

·         README.md – contains the introductory documentation for the root root app.

·         tsconfig.app.json  – contains all the application specific typescript configurations, including typescript and angular template compiler options.

·         tsconfig.json  – contains of default typescript configuration for projects in the workspace

·         tsconfig.spec.json  – contains typescript configuration all the application tests.

·         tslint.json – contains application specific tslint configuration.

Building block 

• Module
• All declaration
• Component
• Each page refer as one component
• Pipe
• Run time data manipulation
• Services
• All external interaction
• Routing
• All navigation
• Directive
• Small functionality or portion

Component:

·         import

·         @- decorator

·         Export

E.g.:

Import {Component} from ‘@angular.core’; @Component({        selectorL ‘app-home’        templateUrl: ‘./home.component.html’,        styleUrls: {‘./home.component.css’}})Export class HomeComponent{ }

Include the created component name in app.module.ts file

You can call the component by using selector.

You can include CSS properties in css file or you can load CSS properties from external file.

e.g.: you can include bootstrap css file link in index.html file. And use the class in div tag.

In index.html file you can place the contents in a container to have uniform width.

Flow of application:

èIndex.html

=>Angular.json => main.ts => app.module.ts => app.component.html

Binding:

> One way Binding – some variable in TS file à Consumed in HTML

·         Data

·         Event – Click

·         Property – href, src etc

> Two way Binding - some variable in TS file à Consumed in HTML à goes back to TS

When you are running the application and if the port is in use:

In CMD prompt enter

>netstat -a -o – n

Above command will return all the processes in the system.

Search for 4200 and make a note of process id that is making use of the port.

Run the following command to kill the task.

>taskkill /F /PID <processID>

· Happy Learning! :-)