AngularJS é uma estrutura para construir aplicativos da web de grande escala e alto desempenho, mantendo-os fáceis de manter. A seguir estão os recursos da estrutura AngularJS.
Components- A versão anterior do Angular tinha como foco os controladores, mas agora mudou o foco para ter componentes em vez de controladores. Os componentes ajudam a construir os aplicativos em muitos módulos. Isso ajuda a manter melhor o aplicativo por um período de tempo.
TypeScript- A versão mais recente do Angular é baseada no TypeScript. Este é um superconjunto do JavaScript e é mantido pela Microsoft.
Services- Os serviços são um conjunto de códigos que podem ser compartilhados por diferentes componentes de um aplicativo. Portanto, por exemplo, se você tivesse um componente de dados que selecionava dados de um banco de dados, poderia tê-lo como um serviço compartilhado que poderia ser usado em vários aplicativos.
Angular 2 tem os seguintes componentes -
Modules- Isso é usado para dividir o aplicativo em partes lógicas de código. Cada pedaço de código ou módulo é projetado para executar uma única tarefa.
Component - Isso pode ser usado para reunir os módulos.
Templates - Isso é usado para definir as visualizações de um aplicativo Angular JS.
Metadata - Isso pode ser usado para adicionar mais dados a uma classe Angular JS.
Service - Isso é usado para criar componentes que podem ser compartilhados por todo o aplicativo.
Módulos são usados em Angular JS para colocar limites lógicos em seu aplicativo. Portanto, em vez de codificar tudo em um aplicativo, você pode construir tudo em módulos separados para separar a funcionalidade de seu aplicativo. Um módulo é composto pelas seguintes partes -
Bootstrap array- Isso é usado para informar ao Angular JS quais componentes precisam ser carregados para que sua funcionalidade possa ser acessada no aplicativo. Depois de incluir o componente na matriz de bootstrap, você precisa declará-los para que possam ser usados em outros componentes no aplicativo Angular JS.
Export array - Isso é usado para exportar componentes, diretivas e tubos que podem ser usados em outros módulos.
Import array - Assim como o array de exportação, o array de importação pode ser usado para importar a funcionalidade de outros módulos Angular JS.
Cada aplicativo consiste em componentes. Cada componente é um limite lógico de funcionalidade para o aplicativo. Você precisa ter serviços em camadas, que são usados para compartilhar a funcionalidade entre os componentes. A seguir está a anatomia de um componente. Um componente consiste em -
Class - É como uma classe C ou Java que consiste em propriedades e métodos.
Metadata - Isso é usado para decorar a classe e estender a funcionalidade da classe.
Template - Isso é usado para definir a visualização HTML que é exibida no aplicativo.
Uma diretiva é um elemento HTML personalizado usado para estender o poder do HTML. Angular 2 tem as seguintes diretivas que são chamadas como parte do módulo BrowserModule.
ngIf -
o ngif element é usado para adicionar elementos ao código HTML se for avaliado como verdadeiro, caso contrário, não adicionará os elementos ao código HTML.
Sintaxe
*ngIf = 'expression'Se a expressão for avaliada como verdadeira, o correspondente será adicionado, caso contrário, os elementos não serão adicionados.
ngFor -
o ngFor elemento é usado para elementos com base na condição do loop For.
Sintaxe
*ngFor = 'let variable of variablelist'A variável é uma variável temporária para exibir os valores no variablelist.
Os aplicativos Angular 2 têm a opção de tratamento de erros. Isso é feito incluindo a biblioteca catch ReactJS e, em seguida, usando a função catch.
A função catch contém um link para a função Error Handler.
Na função de tratamento de erro, enviamos o erro para o console. Também devolvemos o erro ao programa principal para que a execução possa continuar.
Agora, sempre que você receber um erro, ele será redirecionado para o console de erro do navegador.
O roteamento ajuda a direcionar os usuários para páginas diferentes com base na opção que eles escolhem na página principal. Portanto, com base na opção escolhida, o componente angular necessário será renderizado para o usuário.
A interface de linha de comando (CLI) pode ser usada para criar nosso aplicativo Angular JS. Também ajuda na criação de uma unidade e testes de ponta a ponta para o aplicativo.
A injeção de dependência é a capacidade de adicionar a funcionalidade de componentes em tempo de execução. Vamos dar uma olhada em um exemplo e nas etapas usadas para implementar a injeção de dependência.
Step 1- Crie uma classe separada que tenha o decorador injetável. O decorador injetável permite que a funcionalidade dessa classe seja injetada e usada em qualquer módulo Angular JS.
@Injectable()
export class classname {
}Step 2 - Em seguida, no módulo appComponent ou no módulo em que deseja usar o serviço, é necessário defini-lo como um provedor no decorador @Component.
@Component ({
providers : [classname]
})Este arquivo é usado para fornecer as opções sobre o TypeScript usado para o projeto Angular JS.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}A seguir estão alguns pontos-chave a serem observados sobre o código acima.
O destino para a compilação é es5 e isso ocorre porque a maioria dos navegadores só pode entender o texto digitado ES5.
A opção sourceMap é usada para gerar arquivos de mapa, que são úteis durante a depuração. Portanto, durante o desenvolvimento, é bom manter essa opção como verdadeira.
O "emitDecoratorMetadata": true e "experimentalDecorators": true é necessário para decoradores Angular JS. Se não estiver no lugar, o aplicativo Angular JS não será compilado.
Este arquivo contém informações sobre o projeto Angular 2. A seguir estão as configurações típicas do arquivo.
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation,
supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --killothers --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "<2.4.0",
"@angular/compiler": "<2.4.0",
"@angular/core": "<2.4.0",
"@angular/forms": "<2.4.0",
"@angular/http": "<2.4.0",
"@angular/platform-browser": "<2.4.0",
"@angular/platform-browser-dynamic": "<2.4.0",
"@angular/router": "<3.4.0",
"angular-in-memory-web-api": <0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "<2.0.10",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "<2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": <4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"
},
"repository": {}
}Alguns pontos importantes a serem observados sobre o código acima -
Existem dois tipos de dependências: primeiro, as dependências e, em seguida, as dependências de desenvolvimento. Os dev uns são necessários durante o processo de desenvolvimento e os outros são necessários para executar o aplicativo.
O comando "build: watch": "tsc -p src / -w" é usado para compilar o texto datilografado no fundo procurando por mudanças nos arquivos datilografados.
Este arquivo contém os arquivos de sistema necessários para o aplicativo Angular JS. Isso carrega todos os arquivos de script necessários sem a necessidade de adicionar uma tag de script às páginas html. Os arquivos típicos terão o seguinte código.
/**
* 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 app is within the app folder
app: '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/platformbrowser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/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/bundles/inmemory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);Alguns pontos importantes a serem observados sobre o código acima -
'npm:': 'node_modules /' informa a localização em nosso projeto onde todos os módulos npm estão localizados.
O mapeamento de app: 'app' informa a pasta onde todos os arquivos de nossos aplicativos são carregados.
O código a seguir estará presente no app.module.ts Arquivo.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Vamos examinar cada linha do código em detalhes.
A instrução import é usada para importar funcionalidades dos módulos existentes. Assim, as 3 primeiras instruções são usadas para importar os módulos NgModule, BrowserModule e AppComponent para este módulo.
O decorador NgModule é usado para definir posteriormente as importações, declarações e opções de bootstrapping.
O BrowserModule é exigido por padrão para qualquer aplicativo angular baseado na web.
A opção bootstrap diz ao Angular qual componente inicializar no aplicativo.
O filtro de minúsculas é usado para converter a entrada em todas as minúsculas.
No exemplo a seguir, adicionamos um filtro de minúsculas a uma expressão usando a barra vertical. Aqui, adicionamos um filtro de minúsculas para imprimir o nome do aluno em todas as letras minúsculas.
<div>
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | lowercase}}
The second Topic is {{appList[1] | lowercase}}
The third Topic is {{appList[2]| lowercase}}
</div>O filtro de maiúsculas é usado para converter a entrada em maiúsculas.
No exemplo a seguir, adicionamos filtro em maiúsculas a uma expressão usando a barra vertical. Aqui, adicionamos o filtro de maiúsculas para imprimir o nome do aluno em todas as letras maiúsculas.
<div>
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | uppercase}}
The second Topic is {{appList[1] | uppercase}}
The third Topic is {{appList[2]| uppercase}}
</div>O filtro de fatia é usado para fatiar um pedaço de dados da string de entrada.
No exemplo a seguir, adicionamos o filtro de fatia a uma expressão usando a barra vertical. Aqui, o valor da propriedade será dividido com base nas posições inicial e final.
<div>
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | slice:1:2}}
The second Topic is {{appList[1] | slice:1:3}}
The third Topic is {{appList[2]| slice:2:3}}
</div>O filtro de data é usado para converter a string de entrada no formato de data.
No exemplo a seguir, adicionamos um filtro de data a uma expressão usando a barra vertical. Aqui, o valor da propriedade será convertido para o formato de data.
<div>
The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}
</div>O filtro de moeda é usado para converter a string de entrada no formato de moeda.
No exemplo abaixo, adicionamos filtro de moeda a uma expressão usando a barra vertical. Aqui, o valor da propriedade será convertido para o formato de moeda.
<div>
The currency of this Tutorial is {{newValue | currency}}
</div>O filtro de porcentagem é usado para converter a string de entrada no formato de porcentagem.
No exemplo a seguir, adicionamos filtro de porcentagem a uma expressão usando a barra vertical. Aqui, o valor da propriedade será convertido para o formato de porcentagem.
<div>
The percentage of this Tutorial is {{newValue | percent}}
</div>Quando o valor de uma propriedade associada a dados muda, esse método é chamado.
Isso é chamado sempre que ocorre a inicialização da diretiva / componente após o Angular exibir pela primeira vez as propriedades vinculadas aos dados.
Isso serve para detectar e agir em mudanças que o Angular não consegue ou não detecta por conta própria.
Isso é chamado em resposta depois que o Angular projeta conteúdo externo na visualização do componente.
Isso é chamado em resposta após o Angular verificar o conteúdo projetado no componente.
Isso é chamado em resposta após o Angular inicializar as visualizações do componente e as visualizações filhas.
Isso é chamado em resposta após o Angular verificar as visualizações do componente e as visualizações filhas.
Esta é a fase de limpeza antes de o Angular destruir a diretiva / componente.