• Angular Oficial
• ES 6
• NG2 Bootstrap Abstração do Bootstrap sem o JQuery.
• Materialize Abstração do Materialize sem o JQuery.

• Node Js

    $ npm install -g @angular/cli
    $ npm install -g typescript

Encapsula :

• Template
• Dados a ser mostrado na tela
• Comportamento da VIEW

Responsável pela comunicação dos componentes com o backend e injeção de classes.

Responsável pela navegação.

São uma form de passar instruções para o template.

• *ngIf : Mesmo comportamento do if, mas para o template. Não recomentado para mostrar e esconder muitos blocos, utilizar hidden nestes casos.
• ngSwitch e *ngSwitchCase : Funciona como um bloco de switch dentro do template.
• *ngFor : Laço de repetição no template para iterar um array.
• ngClass : Mesmo comportamento de class bind. Deixando mais legivel quando tem várias classes.
• ngStyle : Mesmo comportamento de stle bind. Deixando mais legivel quando tem várias styles.
• ng-content: Serve para renderizar um conteúdo passado no template para o outro.

Ajuda a organizar a aplicação e a modularizar.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

• declarations : Todos os componentes, diretivas, factory ou pipe do meu módulo.
• imports : Módulos importados para ser usado no meu módulos atual ou dentro de algum outro component.
• providers : Serviços disponiveis para serem utilizados nos componentes declarados no módulo.
• bootstrap : Encontrado somente no módulo raiz do projeto, indica qual componente deve ser instânciado ao ser executada a aplicação (container).
• exports : Define quais componenetes do módulos vão ficar visível para outros módulos.

Contém os códigos html para ser utilizados nos componentes.

• No template pode ser definido variáveis, basta colocar dentro da sua tag #nomeVar, exemplo :

    <input type="text" #valorInpur>

É a forma de associar informações do component para o template e vice-versa.

• Interpolation : {{ valor }} onde valor é um objeto do componente.
• Property binding : [propriedade]="valor".
• Two Way Data Binding : Valor do template e do componente atualizados ao mesmo tempo. [(ngModel)]=propriedade, para utilizar precisa importar o FormsModule.
• Class e Style Binding : Uma forma de Property Binding para css.
• Event Binding : Binding de eventos, para fazer o binding se usa os parenteses : (evento).
• Input/Output : Serve para passar um valor para o compinente. Para Declarar que a variável se trata de um Input/Output basta coloca @Input ou @Output na sua declaração.
• Acessando DOM : Se utilizada o decorator @ViewChild('') em uma variável do tipo HTMLElement. Dentro do ViewChild deve se passar como parâmetroo nome da variável declarada no template : @ViewChild('minhaVar').

    $ ng lint

Escaneia o proejeto verificando as boas práticas do Angular.

    $ ng test

Executa os teste unitários com Jasmine.

    $ ng e2e

Executa os testes de integração/carregamento de dados com e2e do Protractor.

    $ ng new nome-projeto

Assim o CLI vai criar o projeto e baixar todas as depedências do npm. Para rodar o projeto no navegador, va ate a pasta do seu projeto e execute :

    $ ng serve

    $ ng g component meu-component

ou

    $ ng g c meu-component

    $ ng g module meu-modulo

ou

    $ ng g m meu-modulo

    $ ng g service meu-servico

ou

    $ ng g s meu-servico

    $ ng g diretive minha-diretiva

ou

    $ ng g d minha-diretiva

É gerado o build dentro da pasta /dist/. Serve para tester a aplicação e debugar.

    $ ng build

ou

    $ ng build --dev

É gerado o build dentro da pasta /dist/. Arquivos minificados e ofuscados.

    $ ng build --prod

Exemplo Bootstrap:

    $ npm install --save bootstrap@next

Adicionar os arquivos necessários no .angular-cli.json, conforme exemplo :

    "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

Apenas arquivos de fonte que são importados diretamente no arquivo index.html.