- Angular Oficial
- ES 6
- NG2 Bootstrap Abstração do Bootstrap sem o JQuery.
- Materialize Abstração do Materialize sem o JQuery.
$ 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, utilizarhidden
nestes casos.ngSwitch
e*ngSwitchCase
: Funciona como um bloco deswitch
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 }}
ondevalor
é 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 tipoHTMLElement
. Dentro doViewChild
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
.