Projeto de demonstração AngularJS: Como construir um aplicativo com AngularJS

Publicados: 2020-09-10

Se você está aprendendo desenvolvimento full-stack, deve ter se deparado com a pergunta “Como executar o projeto AngularJS?” Não se preocupe porque, neste artigo, compartilharemos um tutorial detalhado sobre como construir um aplicativo com AngularJS.

Depois de concluir este projeto, você estará familiarizado com o básico do AngularJS, suas implementações e terá um aplicativo em funcionamento que poderá exibir para seus amigos. Você pode marcar este tutorial como listamos as etapas para diferentes estágios de desenvolvimento junto com o código.

Observe que você deve entender o código antes de implementá-lo. É por isso que não recomendamos copiar e colar o código. No entanto, se você souber como cada linha de código funciona, poderá copiá-la e colá-la livremente. Entender como o código funciona garantirá que você aprenda com mais eficiência.

Índice

O que é AngularJS? Uma breve introdução

Antes de discutirmos os projetos AngularJS, vamos falar um pouco sobre a tecnologia primeiro. O AngularJS permite que os usuários estendam o HTML para aplicativos. É um framework web front-end baseado em JavaScript. O HTML fica atrasado em visualizações dinâmicas para aplicativos da Web e o Angular resolve esse problema.

AngularJS tem uma próspera comunidade de usuários e desenvolvedores onde você pode fazer perguntas e remover sua confusão. Angular fornece aos usuários vinculação de dados, controladores e muitas outras ferramentas poderosas para aprimorar o front-end de uma página da web. Você descobrirá muitos conceitos em nosso projeto conforme os implementaremos em nosso tutorial.

Pré-requisitos para projetos AngularJS para iniciantes

Antes de começar a trabalhar em projetos AngularJS, você deve estar familiarizado com os seguintes conceitos:

HTML

HTML significa HyperText Markup Language. É responsável por qualquer estrutura de página web e é o primeiro bloco de construção para o desenvolvimento web. Você deve estar familiarizado com a sintaxe do HTML, seus elementos e implementações antes de começar a trabalhar neste projeto.

CSS

CSS significa Cascading Style Sheets e é a principal linguagem para adicionar elementos visuais a uma página da web. É tão importante quanto o HTML porque faz com que a página da Web pareça melhor e se torne mais acessível. Embora o HTML seja necessário para o primeiro estágio do nosso projeto AngularJS, você teria que adicionar CSS a ele posteriormente. É por isso que você deve estar familiarizado com ele antes de começar a trabalhar em projetos AngularJS para iniciantes.

JavaScript

AngularJS é baseado em JavaScript. Estar familiarizado com a sintaxe JS, o código e suas implementações simplificará muitos aspectos técnicos do AngularJS para você também. Certifique-se de entender bem o básico do JS antes de começar a trabalhar nesta tarefa.

Além desses pré-requisitos, você também deve estar familiarizado com o básico do AngularJS. Este projeto pressupõe que você tenha um conhecimento prático de HTML, CSS, JS e AngularJS. Agora que tiramos isso do caminho, vamos começar.

Como executar o projeto AngularJS – Tutorial

Neste tutorial, construiremos um aplicativo de feed esportivo AngularJS. Um aplicativo de feed esportivo mostra as estatísticas de uma partida ou evento. Por exemplo, você pode criar um aplicativo que mostre o scorecard das partidas ou uma tabela de pontuação da equipe do IPL. Escolhemos trabalhar em um aplicativo de feed esportivo porque não requer muito desenvolvimento de back-end.

O HTML

Vamos começar criando o HTML para nosso aplicativo. Aqui está o modelo para o nosso código HTML.

<thead>

<tr><th colspan="4″>Classificação do Campeonato de Pilotos</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</table>

</body>

Você deve ter notado {{ e }}. Eles são chamados de expressões e permitem que você execute tarefas computacionais para retornar o valor necessário. Por exemplo, aqui estão algumas expressões válidas:

{{ 2 + 2 }}
{{ o meu nome }}

Você pode dizer que são trechos de JavaScript. No entanto, seria melhor se você não usasse expressões para implementar a lógica de alto nível. Para fazer isso, você deve usar diretivas. As expressões são adequadas apenas para implementação de lógica de baixo nível. A principal tarefa das expressões é vincular os dados necessários do aplicativo ao HTML.

Aprenda: Salário de desenvolvedor HTML na Índia: para calouros e experientes

As Diretrizes em Nosso Código

Um dos conceitos mais importantes que você descobriria enquanto trabalhava em projetos AngularJS são as diretivas. Uma diretiva é um marcador em um elemento DOM para informar ao AngularJS que ele deve anexar um comportamento específico ao elemento individual. A diretiva pode dizer ao Angular para executar várias tarefas, como transformar o elemento DOM e seus filhos, substituindo-o por um elemento DOM diferente. A maioria das diretivas poderosas começa com “ng-” onde “ng” significa Angular.

Aqui estão as diferentes diretivas que usamos em nosso código acima, junto com seus aplicativos:

ng-app

Essa diretiva inicializa o aplicativo e define seu escopo. É uma diretiva essencial porque você pode ter vários aplicativos no AngularJS e informa ao programa os pontos inicial e final de cada aplicativo.

ng-controller

Esta diretiva define qual controlador teria o poder da visão do usuário. Indicamos o driversController a esse respeito, que fornecerá a lista de drivers (driversList) em nosso aplicativo.

ng-repetir

Esta diretiva é uma das mais usadas entre os desenvolvedores Angular. Ele define o escopo do modelo durante o loop pelas coleções.

O Angular tem muitas diretivas e, à medida que você trabalhar em mais projetos do AngularJS para iniciantes, descobrirá mais aplicativos para eles. É por isso que recomendamos trabalhar em projetos diferentes enquanto aprende uma habilidade específica.

Os Controladores

Ter a visão seria inútil a menos que adicionemos um controlador. Então, vamos adicionar o driversController aqui:

angular.module('F1FeederApp.controllers', []).

controller('driversController', function($scope) {

$scope.driversList = [

{

Condutor: {

dadoNome: 'Sebastian',

familyName: 'Vettel'

pontos: 322,

nacionalidade: “alemão”,

Construtores: [

{nome: “Red Bull”}

]

{

Condutor: {

dadoNome: 'Fernando',

familyName: 'Alonso'

pontos: 207,

nacionalidade: “espanhol”,

Construtores: [

{nome: “Ferrari”}

]

}

];

});

Uma variável única que você deve ter notado é $scope. Estamos passando essa variável como um parâmetro para o controlador, pois vincularia o controlador às visualizações. $scope contém todos os dados a serem usados no modelo e todos os dados que você adicionar a ele estarão acessíveis nas visualizações.

Vamos adicionar um array de dados estático por enquanto e substituí-lo mais tarde à medida que avançamos em nosso projeto.

Vamos primeiro adicionar o controlador ao app.js, que deve ficar assim:

angular.module('F1FeederApp', [

'F1FeederApp.controllers'

]);

Esta pequena linha de código inicializou nosso aplicativo e registrou os módulos dos quais nosso aplicativo depende. Agora temos que adicionar todas essas informações ao nosso arquivo index.html:

<!DOCTYPEhtml>

<html>

<cabeça>

<title>Alimentador F-1</title>

</head>

<thead>

<tr><th colspan="4″>Classificação do Campeonato de Pilotos</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</table>

</body>

</html>

Nesta fase, você pode iniciar seu aplicativo. No entanto, lembre-se de que você terá que depurar o aplicativo. Uma etapa crucial para aprender a executar o projeto AngularJS é depurar um aplicativo.

Carregar dados do servidor

Agora adicionaremos a funcionalidade de buscar dados ao vivo de um servidor RESTful em nosso aplicativo. Para se comunicar com servidores HTTP, o AngularjS possui dois serviços, $http e $resource. Em nosso código, usaremos $http, pois oferece abstração de alto nível. Criaremos um serviço personalizado para abstrair nossas chamadas de API do servidor. Ele buscará os dados e será um wrapper em torno de $http. Então, adicionaremos o seguinte código ao nosso arquivo services.js:

angular.module('F1FeederApp.services', []).

factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = function() {

return $http({

método: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

retornar ergastAPI;

});

Primeiro criamos um novo módulo chamado F1FeederApp.services e adicionamos um serviço ergastAPIservice. Observe que passamos $http como parâmetro para o serviço. Também diremos ao Angular para adicionar nosso módulo ao aplicativo. Para fazer tudo isso, precisamos substituir o código em app.js pelo seguinte:

angular.module('F1FeederApp', [

'F1FeederApp.controllers',

'F1FeederApp.services'

]);

Teremos que modificar um pouco o controller.js e adicionar o ergastAPIservice na forma de dependência, e então esta etapa terminará:

angular.module('F1FeederApp.controllers', []).

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(function (resposta) {

//Aprofunde a resposta para obter os dados relevantes

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

Para verificar se o código está funcionando ou não, recarregue seu aplicativo. Você notaria que não modificamos o modelo, mas incluímos apenas a variável nameFilter. Na próxima seção, usaremos essa variável:

Aplicar filtros

Até agora, adicionamos um controlador funcional ao nosso aplicativo. Agora adicionaremos mais funcionalidades a ele adicionando uma barra de entrada de pesquisa de texto. Você pode incluir o seguinte código em seu index.html abaixo da tag <body>:

Estamos usando a diretiva “ng-model” aqui. Ele ligará o campo de texto à variável “$scope.nameFilter”. A diretiva garante que nosso valor de variável permaneça atualizado de acordo com o valor de entrada. Vamos dizer ao “ng-repeat” que ele deve filtrar o array “driversList” pelo valor presente no “nameFilter” antes de gerar os dados:

Estamos realizando duas ligações de dados diferentes aqui. Primeiro, sempre que você inserir um valor no campo de pesquisa, o Angular garantirá que a variável $scope.nameFilter seja atualizada de acordo. Segundo, assim que nameFilter atualiza ng-repeat, a segunda diretiva anexada a ele recebe um novo valor e uma atualização.

Suponha que queremos apenas filtrar usando Driver.familyName e Driver.givenName. Teremos que adicionar driversController abaixo de $scope.driversList = [] assim:

$scope.searchFilter = function (driver) {

var palavra-chave = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || palavra-chave.test(driver.Driver.givenName) || palavra-chave.test(driver.Driver.familyName);

};

Para finalizar este processo, basta atualizar a linha com a diretiva ng-repeat:

Você pode recarregar o aplicativo para ver se o código está funcionando ou não. Nosso aplicativo agora tem uma função de pesquisa. Em seguida, adicionaremos rotas.

Adicionando Rotas

Temos que criar uma página que mostre os detalhes de nossos motoristas. A página deve permitir que um usuário clique em um motorista e visualize suas informações de carreira. Começaremos adicionando o serviço $routeProvider no arquivo app.js. Ele o ajudará a lidar adequadamente com as diferentes rotas de aplicativos.

Agora vamos adicionar uma rota para informações do piloto e outra para o placar do campeonato. Agora, nosso arquivo app.js se parece com isso:

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.controllers',

'ngRoute'

]).

config(['$routeProvider', function($routeProvider) {

$routeProvider.

when(“/drivers”, {templateUrl: “partials/drivers.html”, controller: “driversController”}).

when(“/drivers/:id”, {templateUrl: “partials/driver.html”, controller: “driverController”}).

caso contrário({redirectTo: '/drivers'});

}]);

Depois de adicionar este código, quando um usuário navegar para https://domain/#drivers, ele carregará o driversController e localizará a visualização parcial. Se você tem acompanhado este tutorial até agora, deve ter notado uma coisa. Não adicionamos as visualizações parciais! Então, nosso próximo passo seria adicionar o mesmo ao nosso aplicativo:

Adicionando visualizações parciais

Um ótimo recurso do AngularJS é que ele permite vincular diferentes rotas a várias visualizações e controladores. No entanto, para que o AngularJS execute essa ação, ele deve saber onde pode renderizar essas visualizações parciais.

Então, estamos usando a diretiva ng-view e a adicionamos ao nosso arquivo index.html:

<!DOCTYPEhtml>

<html>

<cabeça>

<title>Alimentador F-1</title>

</head>

<ng-view></ng-view>

</body>

</html>

Devido a essa implementação, quando navegarmos por uma rota de aplicativo, o Angular carregará a visualização relevante e a renderizará. Ele determinaria o local para renderização por meio da tag <ng-view>. Agora, só temos que criar um arquivo chamado partials/drivers.html e colocar o código HTML da tabela de campeonatos lá. Enquanto estamos nisso, também vincularemos nossa rota de informações do motorista aos nomes do motorista:

<thead>

<tr><th colspan="4″>Classificação do Campeonato de Pilotos</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</a>

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</table>

Estamos chegando aos estágios finais de desenvolvimento. Nossa página de informações do motorista precisa de dados, então é isso que adicionaremos a ela. Para fazer isso, teríamos que escrever o seguinte código em services.js:

angular.module('F1FeederApp.services', [])

.factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = function() {

return $http({

método: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverDetails = function(id) {

return $http({

método: 'JSONP',

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverRaces = function(id) {

return $http({

método: 'JSONP',

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'

});

}

retornar ergastAPI;

});

Agora vamos editar controllers.js. Nosso objetivo é conectar cada ID de motorista ao serviço, para que nossa recuperação de informações permaneça específica para o motorista solicitado.

angular.module('F1FeederApp.controllers', []).

/* Controlador de drivers */

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = function (driver) {

var re = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);

};

ergastAPIservice.getDrivers().success(function (resposta) {

//Aprofundando a resposta para obter os dados relevantes

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

}).

/* Controlador de driver */

controller('driverController', function($scope, $routeParams, ergastAPIservice) {

$scope.id = $routeParams.id;

$scope.raças = [];

$scope.driver = null;

ergastAPIservice.getDriverDetails($scope.id).success(function (resposta) {

$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];

});

ergastAPIservice.getDriverRaces($scope.id).success(function (resposta) {

$scope.races = response.MRData.RaceTable.Races;

});

Observe que adicionamos o serviço $routePrams no controlador de driver. Isso permitiria acessar parâmetros de URL e é uma etapa crucial.

Agora vamos criar um arquivo chamado partials/driver.html já que adicionamos todos os dados necessários e só temos que lidar com o resto da visão parcial. Usamos a diretiva ng-show no código abaixo. A diretiva garantirá que nosso aplicativo mostre apenas o elemento HTML necessário quando a expressão for verdadeira. Isso significa que mesmo que a condição seja nula, o aplicativo não mostrará o elemento HTML. Aqui está o código:

</div>

País: {{driver.Driver.nationality}} <br/>

Equipe: {{driver.Constructors[0].name}}<br/>

Nascimento: {{driver.Driver.dateOfBirth}}<br/>

<a href=”{{driver.Driver.url}}” target=”_blank”>Biografia</a>

</div>

</nav>

<thead>

<tr><th colspan="5″>Resultados da Fórmula 1 2013</th></tr>

</thead>

<tbody>

<tr>

<td>Rodada</td> <td>Grande Prêmio</td> <td>Equipe</td> <td>Grade</td> <td>Corrida</td>

</tr>

<td>{{race.round}}</td>

<td><img src=”img/flags/{{race.Circuit.Location.country}}.png” />{{race.raceName}}</td>

<td>{{race.Results[0].Constructor.name}}</td>

<td>{{race.Results[0].grid}}</td>

<td>{{race.Results[0].position}}</td>

</tr>

</tbody>

</table>

</div>

</section>

Etapas Finais (CSS)

Até agora, você tem um aplicativo de alimentação esportiva funcionando corretamente. Como discutimos antes, o CSS se concentra em tornar a página da Web atraente. Portanto, nesta etapa, você tem independência para adicionar CSS ao seu aplicativo e aprimorar sua aparência. Você pode alternar fontes, alterar o plano de fundo, adicionar imagens diferentes ou animar algumas transições para melhorar a interface do usuário do aplicativo. As seções técnicas do nosso projeto estão completas.

Checkout: Salário Full Stack Developer na Índia

Saiba mais sobre Desenvolvimento

Agora você criou um aplicativo AngularJS! Esperamos que você tenha gostado deste tutorial. Lembre-se disso

Angular é um framework bastante robusto com muitas funcionalidades. Os deste artigo foram muito poucos em comparação com as coisas que o Angular é capaz. Ao trabalhar em projetos AngularJS mais avançados, você descobrirá mais de seus poderosos recursos.

Se você quiser saber mais sobre desenvolvimento full-stack, recomendamos acessar nosso blog. Você encontrará vários recursos sobre os vários aspectos desse campo. Aqui estão alguns para leitura adicional:

10 principais habilidades para se tornar um desenvolvedor full-stack
Por que se tornar um desenvolvedor full-stack?
Como se tornar uma série de desenvolvedores full-stack

Por outro lado, você também pode fazer um curso de desenvolvimento full-stack e aprender com especialistas do setor por meio de projetos, vídeos e tarefas.

Se você estiver interessado em aprender mais sobre desenvolvimento full-stack, confira o PG Diploma in Full-stack Software Development da upGrad & IIIT-B, projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos e atribuições , IIIT-B Alumni status, projetos práticos práticos e assistência de trabalho com as principais empresas.

Aterre no seu emprego dos sonhos

UPGRAD E DIPLOMA PG DO IIIT-BANGALORE EM DESENVOLVIMENTO DE SOFTWARE

Inscreva-se hoje