O Angular utiliza o TypeScript como linguagem, mas o que é o TypeScript…

● TypeScript permite escrever JavaScript do jeito que você realmente quer.

● TypeScript é um super conjunto de JavaScript que compila para JavaScript
simples.
● Qualquer browser. Qualquer host. Qualquer sistema operacional. Código
aberto.

As frases acima estão na página de entrada do TypeScript -

http://www.typescriptlang.org/

TypeScript é um super conjunto da linguagem JavaScript que fornece classes,

interfaces e a tipagem estática opcional.

Uma das grandes vantagens do TypeScript é permitir que os IDEs proporcionem um

ambiente mais rico para detectar erros comuns enquanto você digita o código
usando o recurso Intellisense.

Assim, em um projeto que você vai usar muito JavaScript adotar o TypeScript pode
trazer um ganho de produtividade e resultar em um produto mais robusto.

O TypeScript é open source e pode ser usado para desenvolver aplicações

JavaScript do lado do cliente ou do lado do servidor (Node.js).

Ele foi introduzido como linguagem no Microsoft Visual Studio 2013 Update 2, e, por
ser um super conjunto do JavaScript, qualquer programa JavaScript existente
também é um programa TypeScript válido.

Para usar o Angular com o TypeScript é necessário seguir os seguintes passos:

Instalar o Visual Studio Code:

● download : https://code.visualstudio.com/download

Instalar a última versão do Node.js:

● download: https://nodejs.org/en/download/

Instalar a versão mais recente do TypeScript:

● download: https://www.npmjs.com/package/typescript

Possuir a última versão do NPM: Node Package Manager, o gerenciador de

pacotes do Node.js (em geral ao instalar o Node.js ele já é instalado)
Com o Node.JS instalado, temos à disposição o comando npm, necessário para
instalar o Angular CLI. Neste ponto, será preciso abrir o terminal do sistema
operacional e digitar a instrução:

● npm install -g @angular/cli

Essa instrução, normalmente, requer um bom tempo para que seja concluída, pois
diversas bibliotecas do Node.JS serão obtidas através da internet. Concluída a
instalação, o Angular CLI está à nossa disposição através do comando ng, que é
um programa para ser executado a partir da linha de comando e para o qual
podemos passar diversos parâmetros. É dessa forma que criamos um novo projeto
em Angular, criamos artefatos, realizamos o build do projeto, entre outras opções.

Criando Primeira Aplicação

Depois de instalado a primeira coisa a fazer é criar uma pasta onde iremos criar o
nosso projeto. Você pode criar a pasta usando o Explorer ou a janela de prompt do
comando. (md c:\AppAngular2)

Eu vou criar uma pasta no meu computador local chamada : C:\AppAngular2.

Feito isso abra o VS Code e no menu File, clique em Open Folder, selecione a
pasta AppAngular2 e clique em Selecionar Pasta.

Você deverá visualizar a seguinte janela:

Uma aplicação Angular possui uma arquitetura que pode conter até oito blocos de
construções:

● Modules
● Components
● Templates
● Metadata
● Data binding
● Directives
● Services
● Dependency injection

Uma aplicação Angular básica deve possuir pelo menos um Module, um

Component e um arquivo HTML.

Cada aplicativo Angular tem pelo menos uma classe Module, o módulo raiz,
chamado de AppModule. Um módulo é responsável por expor para a aplicação
algum código específico, que pode ser uma classe, uma função, ou mesmo uma
constante. Um módulo define um contexto para compilação de templates.

Um Component é responsável por controlar a sua View/Tela, e uma aplicação

Angular possui uma classe Component chamada de AppComponent onde
definimos o que vamos exibir ao usuário. Um componente é um recurso utilizado
para criar uma classe responsável por controlar e manter o estado de uma view.
Os componentes são a principal maneira de construir e especificar elementos e
lógica na página, por meio de elementos personalizados e atributos que adicionam
funcionalidade aos nossos componentes existentes.

Além disso toda aplicação Angular deve possuir os seguintes arquivos de

configuração :

● package.json - Contém todas as informações de dependências do projeto;

● tsconfig.json - Arquivo de configuração do TypeScript - (define como o
typescript vai gerar javascript a partir dos arquivos do nosso projeto-
configura o compilador typescript)
● sistemjs.config.js - Permite carregar módulos compilados usando o
compilador TypeScript. Para módulos anônimos (um módulo por arquivo JS),
ele permite mapear o nome dos módulos para arquivos JS que realmente
contêm o código JavaScript do módulo.

Geralmente também temos um arquivo main.ts que é usado para inicializar a

aplicação.

Vamos então iniciar o desenvolvimento da nossa aplicação criando os arquivos

necessários.

Criando o arquivo package.json

A primeira coisa que devemos fazer é criar um arquivo package.json, pois neste
arquivo é que definimos as dependências da nossa aplicação, ou seja, os pacotes
que precisamos gerar para a aplicação funcionar.

A partir de agora eu vou trabalhar com o terminal integrado do VS Code e para

isso vou teclar CTR+' para abrir essa janela. Verifique se você está posicionado na
pasta AppAngular2 do projeto.

Vamos digitar o comando : npm init -y (documentação:

https://docs.npmjs.com/cli/init )

Este comando irá criar o arquivo package.json na pasta do projeto. Usamos -y para
que sejam usadas as configurações padrão e nenhuma pergunta seja feita durante
a criação do arquivo.

Será criado o arquivo package.json conforme abaixo:

Vamos alterar o conteúdo desse arquivo copiando e colando o código abaixo:
{
"name": "appAngular2",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/upgrade": "~2.1.0",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0"
}
}
Neste arquivo temos informações para usar o servidor que vai levantar nossa
aplicação, as dependências do angular, do bootstrap e de outros arquivos, e as
dependência para o ambiente de desenvolvimento.

Em ‘scripts’ temos os comandos que executaremos para compilar e inicializar

nosso servidor local, e em ‘dependencies’ e ‘devDependencies’ temos
informações das bibliotecas a serem incluídas e utilizadas no projeto.

O Package.json é o arquivo mais importante para o projeto, onde você importa a

lista de dependências que você usou em seu projeto. Será a partir desse arquivo
que os pacotes usados na sua aplicação serão resolvidos.

De onde veio esse conteúdo ?

Bem, eu o peguei no repositório GitHub ( https://github.com/angular/quickstart ), no

exemplo do quickstart do angular, mas, provavelmente ele já deve ter sofrido
alterações em seu conteúdo desde então.

Criando o arquivo tsconfig.json

Vamos agora criar o arquivo tsconfig.json na pasta do projeto. Para isso clique no
ícone New File, ao lado da pasta, no VS Code :

A seguir informe o nome tsconfig.json e inclua o seguinte código neste arquivo :

{
"compilerOptions": {
"target": "es5",
"module":
"commonjs",
"moduleResolution":
"node",
"sourceMap": true,

"emitDecoratorMetadat
a": true,

"experimentalDecorator
s": true,
"removeComments":
false,
"noImplicitAny": false
}
}

Neste arquivo definimos o uso do ECMAScript 5 e outras configurações para o

typescript: como gerar o arquivo de map, usar o módulo commomjs, etc.

Gerando os arquivos das dependências do projeto a partir do

package.json

Após criar o arquivo package.json com as depêndencias do projeto, precisamos

gerar a pasta node_modules no projeto que irá conter os arquivos dessas
dependências.

Para fazer isso vamos abrir uma janela de prompt de comando e ir para a pasta
onde esta o arquivo package.json e digitar: npm install

Ao final você deverá ver uma janela parecida com a da figura abaixo onde podemos
verificar, após alguns segundos, a baixa dos pacotes das bibliotecas referenciadas
no arquivo package.json na pasta ng_modules :
Gerando o arquivo systemjs.config.js

Agora vamos gerar o arquivo systemjs.config.js que permite carregar módulos

compilados usando o compilador TypeScript.

No menu do VS Code clique em New File e informe o nome systemjs.config.js.

A seguir inclua o seguinte código neste arquivo :

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '../node_modules/'
},
// map tells the System loader where to look for things
map: {
// our output js is within the src folder mention folder name if all js file
located in a particular file
app: '.',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser':
'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic':
'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.
js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no
extension
packages: {
app: {
main: './app/main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
 main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);

Este arquivo faz o mapeamento para os arquivos dos pacotes e permite que
compilador encontre os arquivo referenciados. Veja como deve ficar o projeto no VS
Code:

Criando o arquivo app.component.ts

Vamos agora criar uma pasta chamada app dentro da pasta AppAngular2;
Selecione a área dos arquivos e clicando no ícone New Folder e informando o
nome app.

A seguir vamos criar dentro da pasta app o arquivo app.component.ts que é um

arquivo de Component. Este arquivo define as informações que iremos exibir ao
usuário (view).
Selecione a pasta app e clique no ícone New File e informe o nome :
app.component.ts: (O nome deste arquivo segue o style guide sugerido pela
equipe do Angular)

A seguir inclua o seguinte código neste arquivo :

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

@Component({
selector: 'minha-app',
template: '<h1>Minha primeira aplicação Angular no Visual Studio
Code</h1><br>Macoratti .net'

})
export class MeuPrimeiroComponent_VSCode { }

Primeiro precisamos importar a anotação ‘Component’ que esta no pacote ‘core’ do

Angular. A sintaxe TypeScript usada é : import { nomeClasse } from
'local_e_nome_pacote'

Depois utilizamos o decorator (anotação) ‘Component’ em uma classe TypeScript,

no caso ‘MeuPrimeiroComponente_VSCode’; essa anotação ‘Component’ será
interpretada pelo Angular no momento da execução.

O atributo ‘selector’ significa o nome da tag HTML que usaremos em nosso HTML,
e que será interpretado pelo Angular, e o atributo ‘template’ contém o código HTML
que será inserido na página dentro da tag definida em ‘selector’. Definimos o nome
da nossa tag como 'minha-app'. Depois vamos usar essa tag no arquivo
index.html.

Para que a classe seja consumida por qualquer outra classe temos que exportar a
classe usando a palavra export.

O arquivo app.compenent.ts é o arquivo de componente principal da aplicação

onde definimos as tags, as rotas, o menu da aplicação.

Criando o arquivo app.module.ts

Este arquivo expõe o código da nossa aplicação e usa o componente criado no item
anterior.
Vamos agora criar no projeto o arquivo typescript app.module.ts que é um arquivo
de Módulo da aplicação, e que expõe o código da nossa aplicação.

Selecione a pasta app e clique no ícone New File e informe o nome :

app.module.ts: (O nome deste arquivo segue o style guide sugerido pela equipe do
Angular)

A seguir inclua o seguinte código neste arquivo :

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

import { BrowserModule } from '@angular/platform-browser';
import { MeuPrimeiroComponent_VSCode } from './app.component';

@NgModule({
imports: [BrowserModule],
declarations: [MeuPrimeiroComponent_VSCode],
bootstrap: [MeuPrimeiroComponent_VSCode]
})
export class AppModule { }

Toda aplicação Angular possui um arquivo de módulo padrão - app.module.ts -

onde definimos a classe AppModule e usamos o decorator NgModule.

O NgModule instrui o Angular a como compilar e executar o código de uma

aplicação.

O NgModule contém uma metadata chamada ‘declarations’, onde adicionamos os

componentes que fazem parte do módulo; ele possui também a metadata
‘imports’, que permite importar um outro módulo que seja dependência de algum
recurso utilizado pelo módulo.

Assim, o decorador @NgModule define os metadados para o módulo. Este

metadados importam um único módulo auxiliar, BrowserModule, o módulo que
cada aplicativo do navegador deve importar. O BrowserModule registra provedores
de serviços de aplicativos críticos.

A lista de declarações - declarations - identifica o único componente da aplicação,

o componente raiz, que no nosso exemplo é o componente :
MeuPrimeiroComponent_VSCode.

A declaração bootstrap indica que iremos inicializar o componente

MeuPrimeiroComponent_VSCode. Ela só existe no módulo raiz da aplicação que
é o AppModule.
Além disso somente no módulo raiz é que importamos o BrowserModule.

Criando o arquivo index.html

O arquivo index.html é o arquivo que irá exibir as informações ao usuário e onde

vamos usar as definições do nosso Componente.

Selecione a pasta AppAngular2 e clique no ícone New File e informe o nome :

index.html. (esse arquivo não é criado na pasta app)

A seguir inclua o seguinte código neste arquivo :

<!DOCTYPE html>
<html>
<head>
<title>Angular2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="../styles.css">-->

<!-- Polyfill(s) for older browsers -->

<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>

<script src="../systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

<body>
<minha-app>Carregando...</minha-app>
</body>
</html>
Neste arquivo definimos a referência ao css do bootstrap e aos polyfills para
navegadores antigos. Definimos também o caminho do arquivo systemjs.config.js.

Incluimos neste arquivo a tag <minha-app> </minha-app> que definimos no

arquivo app.component.ts.

Será nesse local que o template que definimos no mesmo arquivo será exibido.

Criando o arquivo main.ts - O arquivo que irá inicializar a nossa

aplicação

Agora que já temos todos os arquivos criados com seu respectivo código vamos
testar a nossa aplicação. Para isso vamos criar o arquivo main.ts.

Selecione a pasta app e clique no ícone New File e informe o nome : main.ts.

A seguir inclua o seguinte código neste arquivo :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

Neste código inicializamos o modulo AppModule da nossa aplicação Angular

chamando a função 'bootstrapModule' da biblioteca platformBrowserDynamic.

Ao final desse processo a nossa aplicação deverá possuir a seguinte estrutura:

 |-app
––|-app.component.ts
––|-app.module.ts
––|-main.ts
|-index.html
|-package.json
|-systemjs.config.js
|-tsconfig.json

Essa é a estrutura básica mínima para criar uma aplicação Angular.