Introdução ao aplicativo JS angular

JS angular é um aplicativo de código aberto. Foi escrito em JavaScript. JS angular foi desenvolvido no ano de 2010 pelo Google. O aplicativo JS angular também fornece uma referência dinâmica a aplicativos e páginas da web. O JS angular permite estender o vocabulário HTML para seu aplicativo. JS angular é usado porque o HTML falha quando está sendo usado para declarar as visualizações dinâmicas em aplicativos da web. O JS angular é conhecido como o conjunto de ferramentas para a construção do Framework mais adequado ao seu desenvolvimento de aplicativos.

Os recursos da estrutura JS angular podem ser modificados ou substituídos, reutilizados para se adequarem a mais ou a um único fluxo de trabalho e para referência futura. Ele está sendo totalmente extensível e funciona com outras bibliotecas também. O código do aplicativo AngularJS é simples em objetos javascript antigos. Faz seu código testar, manter, reutilizar. No JS angular, não há necessidade de herdar de tipos proprietários para agrupar os modelos nos métodos de acessadores, como temos que fazer em outros. O JS angular seguiu os mais recentes conceitos de desenvolvimento.

Conceitos de aplicação JS angular

Os conceitos do Angular JS Application com seus exemplos são os seguintes:

  • Diretivas para estender atributos HTML

A diretiva de recurso é exclusiva e está disponível em outras estruturas. As diretivas são escritas com facilidade e também podem ser genéricas, pois podem ser escritas uma vez e reutilizadas várias vezes. As diretivas são realmente úteis e há muitos motivos para usar, como quando você tem necessidades especiais como a grade personalizada ou outra funcionalidade, a diretiva que você deseja realmente ainda não existe. A diretiva Angular JS Application começa com 'ng-' como ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, etc.

Exemplo:

Loop com ng-repeat:

    ((x))

  • Escopo

É usado para a comunicação entre o controlador e a visualização. Ele vincula uma visualização ao modelo de visualização e funções definidas no controlador Angular JS Application suporta escopos aninhados ou hierárquicos. É uma fonte de dados para o Aplicativo Angular JS e pode adicionar ou remover propriedades quando necessário. Toda a manipulação e atribuição de dados ocorre através do objeto de escopo quando executar a operação CRUD.

  • Controladores

Eles são usados ​​para definir o escopo das visualizações e o escopo pode ser considerado como variáveis ​​e funções que a visualização pode usar alguma ligação.

Exemplo:




First Name:

Last Name:


Full Name: ((firstName + " " + lastName))

var app = angular.module('myApp', ());
app.controller('myCtrl', function ($scope) (
$scope.firstName = "James";
$scope.lastName = "Anderson";
));

  • Ligação de dados

Ele sincroniza os dados entre o modelo e a visualização. Isso significa que a alteração no modelo atualizará a visualização. A diretiva ng-model é usada para ligação de dados bidirecional.

Exemplo:
Quando o usuário digita na caixa de texto, o valor alterado é exibido em maiúsculas e minúsculas em um rótulo que é uma ligação de dados bidirecional.

  • Serviços

É usado quando o estado é compartilhado entre o aplicativo e precisa de uma solução para armazenamento de dados. Pode ser um singleton e pode ser usado por outros componentes, como diretivas, controladores e outros serviços. Os serviços usados ​​são $ http, $ location, $ log, $ route, $ filter, $ document, $ timeout, $ exceptionHandler.

  • Encaminhamento

Isso ajuda a dividir o aplicativo em várias visualizações e vincula várias visualizações aos controladores. Ele divide o SPA em várias visualizações para dividir logicamente o aplicativo e torná-lo mais gerenciável.

Exemplo: rota padrão

App.config(('$routeProvider',
function($routeProvider)
(
$routeProvider.
when('/List',
(
templateUrl: 'Views/list.html',
controller: 'ListController'
)).
when('/Add',
(
templateUrl: 'Views/add.html',
controller: 'AddController'
).
otherwise((
redirectTo: '/List'
));
)));

  • Filtros

Eles são usados ​​para estender o comportamento da expressão e diretiva de ligação. Permite formatar os dados e formatar valores ou aplicar determinadas condições. Os filtros são chamados em HTML com o pipe dentro das expressões.

Exemplo:

< html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

 html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

Entrada de filtragem:

    (((x.name | letras maiúsculas) + ', ' + x.age + ', ' + x.city))

  • Expressões

As expressões (()) são a maneira declarativa de especificar o local de ligação de dados em HTML e usar uma expressão para ligação de dados. Ele pode ser adicionado em modelos HTML e não suporta instruções de fluxo de controle, mas suporta filtros para formatar os dados antes de exibi-los.

Exemplo:

Insira algo na caixa de entrada:

Nome:

Você escreveu: ((firstName))

  • Módulos

    O módulo é o contêiner de um aplicativo e os controladores de aplicativos pertencem ao módulo. É uma coleção de funções e divide o aplicativo no componente funcional pequeno e reutilizável. Um módulo pode ser identificado por um nome exclusivo e pode depender de outros módulos.

Exemplo:



//Referring module name myApp
(( firstName + " " + lastName ))


  • Teste

Para testar o código do Angular JS Application, as estruturas de teste são amplamente usadas como Jasmine e Karma. Essas estruturas de teste suportam principalmente zombarias e altamente configuráveis ​​usando um arquivo JSON com a ajuda de vários aplicativos JS angulares do plug-in.

Conclusão - Aplicação JS Angular

O JS angular fornece a estrutura que possui diretivas exclusivas e recursos poderosos. As diretivas nos ajudam a criar a nova sintaxe HTML, que é principalmente específica para um aplicativo. Está sendo usado como componentes reutilizáveis. O componente permite ocultar estruturas complexas e outros comportamentos. O foco seria apenas o que o aplicativo faz e a aparência do aplicativo separadamente. Atualmente, o aplicativo Angular JS está se popularizando entre os usuários, pois é fácil aprender e desenvolver o aplicativo. Existem muitas oportunidades no mercado para o desenvolvedor front-end. Se você é bom em JavaScript, o Angular JS não será difícil para você aprender e atualizar suas habilidades com essa tecnologia seria uma ótima idéia.

Artigos recomendados

Este artigo foi um guia para o aplicativo Angular JS. Aqui discutimos os conceitos de aplicação JS angular com alguns exemplos para entender melhor. Você também pode consultar o seguinte artigo para saber mais.

  1. Diferenças de Angular 5 e Angular 4
  2. O que é aprendizado de máquina?
  3. Diferenças entre JSON e BSON
  4. O que é o Laravel Framework?
  5. O que é o Testing Frameworks for Java?

Categoria:

Desenvolvimento de software