Angular

===================================================
===================================================
===================================================
1. First angular web page….

1.1] Using NPM: https://angular.io/guide/quickstart

The Difference Between AngularJs i.e v 1.0 & Angular i.e. v 2.0:

 Speed : Angular is 5 times faster than AngularJs

 Components : Instead of controllers and scope, we use components, which feel simpler.
 Directives : Creating custom directives is much simpler. Ex. <ul *ngFor=” ”>
 Data Binding : When we need to link data to HTML element or listen for a events on the
page, we have an easy data binding syntax.
 Services are now just class…
 ………….and many more small improvements……

What is TypeScript ?

 TypeScript is a free and open-source programming language developed and

maintained by Microsoft.
 It is a strict syntactical superset of JavaScript, and adds optional static typing
to the language.
 Anders Hejlsberg, lead architect of C# and creator of Delphi and Turbo
Pascal, has worked on the development of TypeScript.
 TypeScript may be used to develop JavaScript applications for client-side or
server-side (Node.js) execution.
 TypeScript lets you write JavaScript the way you really want to.
 TypeScript is pure object oriented

 TypeScript can help programmers to write object-oriented programs and

 have them compiled to JavaScript, both on server side and client side.

TypeScript is designed for development of large applications and compiles to

JavaScript.
As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid
TypeScript programs.

Features :
TypeScript starts with JavaScript and ends with JavaScript.
Typescript adopts the basic building blocks of your program from JavaScript.
Hence, you only need to know JavaScript to use TypeScript.
All TypeScript code is converted into its JavaScript equivalent for the purpose of
execution.

TypeScript-generated JavaScript can reuse all of the existing JavaScript frameworks,

tools, and libraries.
The ECMAScript [ ES5, ES6 or ES2015 ] specification is a standardized
specification of a scripting language.
JavaScript is not strongly typed.

What is Angular ?

 Angular is a framework for dynamic web application.

 Provides a way to organize your HTML, Javascript and CSS to keep your front-end
code clean.
 Released in 2011.
 Mainly maintained by Google with the help of the open source community.

TypeScript : The Angular Source

 TypeScript is Microsoft’s extension of javaScript that allows the use of all
ES2015 features and adds powerful typed checking and object-oriented features.

The Angular Source is programmed with Typescript

1) Transpili :

1) Building Our index :

We won’t be covering all the libraries you need to load up Angular.
When we are ready to start developing, we will go through…
5-minute QuickStart Guide.

https://angular.io/guide/quickstart

Angular CLI
 The Angular CLI is a command line interface tool that can create a project,

add files, and perform a variety of ongoing development tasks such as testing,

bundling, and deployment.

Step 1. Set up the Development Environment

You need to set up your development environment before you can do anything.

Install Node.js® and npm if they are not already on your machine.

Verify that you are running at least Node.js version 8.x or greater and npm version 5.x

or greater by running node -v and npm -v in a terminal/console window. Older

versions produce errors, but newer versions are fine.

Then install the Angular CLI globally.

content_copy

npm install -g @angular/cli

npm : node package manager

install : command or action gonna to perform

-g : globally in our machine, so we can access from anywhere.

@angular/cli : package name

 =======================================================

===

sudo npm install -g @angular/cli

sudo : to give superuser permissions [ for MAC and Linux ]

=======================================================

===

Step 2. Create a new project

Open a terminal window.

Generate a new project and default app by running the following command:

content_copy

ng new my-app

The Angular CLI installs the necessary npm packages, creates the project files, and

populates the project with a simple default app. This can take some time.

You can add pre-packaged functionality to a new project by using the ng add

command. The ng add command transforms a project by applying the schematics in

the specified package. For more information, see the Angular CLI documentation.

Angular Material provides schematics for typical app layouts. See the Angular

Material documentation for details.

Step 3: Serve the application

Go to the project directory and launch the server.

content_copy

cd my-app

ng serve --open

or

ng serve –o or ng serve -o or ng serve

The ng serve command launches the server, watches your files, and rebuilds the app as

you make changes to those files.

Using the --open (or just -o) option will automatically open your browser on

http://localhost:4200/.Your app greets you with a message

  Document Structure : -

The src folder

Your app lives in the src folder. All Angular components, templates, styles, images, and anything else your app
needs go here. Any files outside of this folder are meant to support building your app.

File Purpose

Defines the AppComponent along with an HTML template, CSS

stylesheet, and a unit test. It is the root component of what
app/app.component.{ts,html,css,spec.ts} will become a tree of nested components as the application
evolves.

Defines AppModule, the root module that tells Angular how to

app/app.module.ts assemble the application. Right now it declares only the
AppComponent. Soon there will be more components to declare.

A folder where you can put images and anything else to be

assets/*
copied wholesale when you build your application.

This folder contains one file for each of your destination

environments, each exporting simple configuration variables
to use in your application. The files are replaced on-the-fly
environments/* when you build your app. You might use a different API
endpoint for development than you do for production or
maybe different analytics tokens. You might even use some
mock services. Either way, the CLI has you covered.

A configuration file to share target browsers between

browserslist
different front-end tools.

Every site wants to look good on the bookmark bar. Get

favicon.ico
started with your very own Angular icon.

index.html The main HTML page that is served when someone visits your
 site. Most of the time you'll never need to edit it. The CLI
automatically adds all js and css files when building your app so
you never need to add any <script> or <link> tags here manually.

Unit test configuration for the Karma test runner, used when
karma.conf.js running ng test.

The main entry point for your app. Compiles the application
with the JIT compiler and bootstraps the application's root
main.ts module (AppModule) to run in the browser. You can also use the
AOT compiler without changing any code by appending the—
aot flag to the ng build and ng serve commands.

Different browsers have different levels of support of the web

standards. Polyfills help normalize those differences. You
polyfills.ts
should be pretty safe with core-js and zone.js, but be sure to
check out the Browser Support guidefor more information.

Your global styles go here. Most of the time you'll want to

have local styles in your components for easier maintenance,
styles.css
but styles that affect all of your app need to be in a central
place.

This is the main entry point for your unit tests. It has some
test.ts custom configuration that might be unfamiliar, but it's not
something you'll need to edit.

TypeScript compiler configuration for the Angular app

tsconfig.{app|spec}.json (tsconfig.app.json) and for the unit tests (tsconfig.spec.json).

Additional Linting configuration for TSLint together with

tslint.json Codelyzer, used when running ng lint. Linting helps keep your
code style consistent.
2) Creating our first custom element :

---------------------------------------------------------------------------------------------------------
--
index.html
---------------------------------------------------------------------------------------------------------
--

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobs</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<my-app>Loading App...</my-app>
// this is where our Angular application will load.
// this could be name anything even <racing-app>
// we can’t use HTML tags ex. <body>, <table>, etc.
//Until our app gets loaded in the browser, we see: Loading App...
</body>
</html>

***********************************************************************************
*
 3) Writing our first TypeScript file…
---------------------------------------------------------------------------------------------------------
--
main.ts
---------------------------------------------------------------------------------------------------------
--

import { Component } from '@angular/core';

***********************************************************************************
*
Import : ES2015 feature used to import functions, objects or Primitives.
Component : Function we will use to create Component.
[ Components are the basic building blocks of Angular 2 application. A Component
controls a portion of the screen. ]

***********************************************************************************
*

4) Component is a “Decorator function”....

-----------------------------------------------------------------------------------------------------------
main.ts
---------------------------------------------------------------------------------------------------------
--

import { Component } from '@angular/core';

/* Start : Component Decorator */
class FirstComponent { }

5) Decorating our first component

 ---------------------------------------------------------------------------------------------------------
--
main.ts
---------------------------------------------------------------------------------------------------------
--

import { Component } from '@angular/core';

/* Start : Component Decorator */
//often called metadata...
@Component({
selector: 'my-app',
template: '<h1>Angular Welcomes You..!</h1>'
})
class FirstComponent{}
/* End : Component Decorator */

***********************************************************************************
*
A decorator adds more behavior to our class from outside the class.
It must be declared immediately before the class.
[ The decorator turns plain old JavaScript class into a component. ]

@Component : Used to apply our component decorator to our class.

[ Decorators are a typeScript feature. ]
selectore : The CSS Selector for the HTML element where we are want the
component to load.
template : The content we want to load inside our selector.

***********************************************************************************
*

6) Declaring the ‘Root Angular Module’

---------------------------------------------------------------------------------------------------------
--
main.ts
---------------------------------------------------------------------------------------------------------
 --

import { Component, NgModule } from '@angular/core';

/* Start : Component Decorator */
@Component({
selector: 'my-app',
template: '<h1>Anjuman E Mobs..!</h1>'
})
class FirstComponent{}
/* End : Component Decorator */

/* Start : Module Decorator */

@NgModule({
declarations: [FirstComponent] //List of all components within the module
})
class FirstModule{}
/* End : Module Decorator */
***********************************************************************************
*
Modules are how we organise our application in Angular. Every Angular application
must have a “root module”, which we’ll need to launch it.
***********************************************************************************
*

7) Dependencies to render the application.

---------------------------------------------------------------------------------------------------------
--
main.ts
---------------------------------------------------------------------------------------------------------
--

import { Component, NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
/* Start : Component Decorator */
@Component({
 selector: 'my-app',
template: '<h1>Anjuman E Mobs..!</h1>'
})
class FirstComponent{}
/* End : Component Decorator */

/* Start : Module Decorator */

@NgModule({
declarations: [FirstComponent]
})
class FirstModule{}
/* End : Module Decorator */
***********************************************************************************
*
BrowserModule : Module needed for running Angular websites.
platformBrowserDynamic : Angular libraries that will render the website.[ This will
allow us to bootstrap, or Launch the app. ]

***********************************************************************************
*

8) Bootstrapping our Application.

---------------------------------------------------------------------------------------------------------
--
main.ts
---------------------------------------------------------------------------------------------------------
--

import { Component, NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
/* Start : Component Decorator */
@Component({
selector: 'my-app',
template: '<h1>Angular Welcomes you..!</h1>'
})
 class FirstComponent{}
/* End : Component Decorator */

/* Start : Module Decorator */

@NgModule({
declarations: [FirstComponent],
imports: [ BrowserModule ],
bootstrap: [ FirstComponent ]
})
class FirstModule{}
/* End : Module Decorator */

platformBrowserDynamic().bootstrapModule(FirstModule);

***********************************************************************************
*
imports: [ BrowserModule ] : Loads required dependencies to launch our app in the
browser.
bootstrap: [ FirstComponent ] : includes our root component.
platformBrowserDynamic().bootstrapModule( FirstModule ) : Render
application using AppModule.

***********************************************************************************
*

9) Previewing our rendered Application.

---------------------------------------------------------------------------------------------------------
--
Output will be
---------------------------------------------------------------------------------------------------------
--
Angular Welcomes You..!

***********************************************************************************
*
[ Source Code : <my-app ng-version="5.1.3"><h1>Angular Welcomes
You..!</h1></my-app> ]

***********************************************************************************
*

10) Our Application is full of Components.

-------------------------------- o ---------- x --------- o --------------------------

***********************************************************************************
*
Components are building block of Angular application.
And they easily nest one inside the other.

[ Each component may have its own : class file, html file , css file ,
etc ]

***********************************************************************************
*