ObservaçãoPara realizar este tutorial, é aconselhável ter uma base clara sobre AngularJS, já que não entraremos em detalhes sobre alguns aspectos técnicos dessa tecnologia.
Enquanto sabemos, AngularJS Ele nos fornece um grande número de módulos, serviços e filtros que são úteis ao criar um aplicativo da web ou móvel para hoje. Existem outros módulos que não podemos encontrar no núcleo deste framework, um deles é o ngRoute. Este módulo tem a função de usar URLs amigáveis, atribuindo a ele um controlador e um modelo que é chamado automaticamente via Ajax.
Mais informações sobre o ngRoute:
Usando o ngRoute
Primeiro criamos nosso diretório de projeto, vamos chamá-lo de routeapp, dentro deste diretório criamos outro chamado public, em public criamos um arquivo index.html. Agora, dentro de public, criamos um diretório chamado js onde colocaremos nossos arquivos angulares. Dentro do js, começamos a colocar os dois primeiros arquivos chamados app.js e controller.js
Podemos obter todas as versões atuais do angularjs neste link: https://code.angularjs.org/. Para usar o tutorial, usaremos a versão 1.5.5 https://code.angularjs.org/1.5.5/
Index.html code
Rota Ng DinâmicaCódigo App.js
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Código Controller.js
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Agora executamos isso em um servidor web. Você pode usar o que quiser, seja Apache, nginx, Tomcat, etc. No meu caso, usarei express de nodejs. Se você também quiser fazer isso com o nodejs, siga as etapas a seguir. Se você nunca usou nodejs, pode seguir o seguinte tutorial, onde é explicado:
- Crie arquitetura de front-end com npm, bower e grunt.
Usamos o seguinte comando na raiz do projeto a partir da linha de comando.
npm ini
npm install --save-dev expressDepois da instalação expressa criamos um arquivo na raiz do projeto chamado server.js e adicionamos o seguinte código:
var express = require ('express'); var app = express (); var port = Number (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App started at http: // localhost:' + port);});Agora executamos o comando:
node server.jspara iniciar o servidor da web.
Ao iniciar o servidor da web, verifique se o console do inspetor de elementos do navegador digitou a palavra AngularJS.
Agora vamos fazer o uso de ngRoute.
Usando rotas
Nós vamos usar o função de configuração angular para criar as rotas do nosso webapp.
.config (function ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl / home.html', controlador: 'HomeController'}) .otherwise ({redirectTo: '/ home'}); }) Código App.js- /casa: o URI de nossa página inicial.
- templateURL: o caminho do nosso modelo para casa.
- controlador: O controlador atribuído ao modelo inicial.
- De outra forma: Coloque nosso site em / home por padrão
Dentro do corpo de index.html, adicionamos uma tag div com o atributo ng-view que ficará encarregado de renderizar o template home.html e os futuros templates que iremos criar no tutorial.
Informações sobre o ngView:
Código em index.html:
Adicionamos o controlador doméstico em controller.js .controller ('HomeController', function () {console.log ('HomeController');})Se tudo deu certo, você deve obter algo como a seguinte imagem:
Persistência de dados
Já testamos que nosso serviço de rotas está funcionando corretamente, continuamos com a criação de um módulo para gerenciar usuários, neste módulo podemos criar, listar, editar e deletar usuários. Para o tutorial, não precisamos nos comunicar com um back-end, que faremos persistência de dados com um array, o que significa que esses dados são temporários e que cada vez que atualizarmos o aplicativo, esses dados serão perdidos.
Começamos criando os seguintes arquivos services.js Y values.js dentro do diretório js
angular.module ('routeapp.values', []) .value ('Usuários', []); Código Values.js
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Bancos de dados', ['Usuários', função (usuários) {return {DataUser: {add: function (user) {Users.push (usuário);}, list: function () {return Users;}, update: function (index, user) {return Users [index] = user;}, get: function (index) {return Users [index];} , destroy: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "objeto"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} devolver cópia;}}}]); Código Services.js
Em serviços js, criamos duas fábricas chamadas Bancos de dados Y Útil.
- Bancos de dados: Ele cuidará da persistência dos dados dos registros do usuário (usando funções add, update, list, get, destroy).
- Útil: Ele servirá como um clonador dos dados de que precisaremos ao registrar um usuário.
Injetamos o módulo de serviços em nosso app.js
routeapp.servicesO código da primeira linha de app.js seria assim:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Agora só temos que salvar os scripts services.js e values.js em index.html, colocá-los antes do script app.js para evitar qualquer tipo de inconveniente na execução da aplicação.
Antes de continuar, vamos testar se nosso aplicativo não está apresentando erros no console de desenvolvimento. É assim que os arquivos foram criados até agora.
Continuamos criando os modelos de cadastro e lista de usuários. Nós criamos dentro de tpl para user.html e user-list.html
Nome de usuário Nome e-mail SalvarUser.html code
| Do utilizador | Nome | Correspondência |
|---|---|---|
| {{item.username}} | {{nome do item}} | {{item.email}} |
Dentro de controller.js adicionamos o controlador para user.html e user-list.html
.controller ('UserController', function ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (usuário); $ scope.user = {};};}) .controller ('UserListController', function ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();})Código Controller.js
Adicione em index.html os links para acessar os dois modelos:
- Registrar usuário
- Consultar o usuário
Precisamos apenas adicionar as novas rotas que criamos à configuração app.js, colocá-las antes do caso contrário funcionar:
.when ('/ usuário', {templateUrl: 'tpl / user.html', controlador: 'UserController'}) .when ('/ usuário / lista', {templateUrl: 'tpl / user-list.html', controlador : 'UserListController'}) Vamos ver como está tudo indo até agora.
PROLONGAR
Teste registrando vários usuários e verificando se eles estão se registrando corretamente no Consulte os usuários.
Pronto, agora continuamos com a atualização e eliminação de usuários. Para atualizar um usuário, basta adicionar uma nova funcionalidade ao UserController, mudamos o código anterior por este novo:
.controller ('UserController', function ($ scope, Databases, Util, $ routeParams, $ location) {var userID = $ routeParams.userID; var isEdit = (userID! = undefined); $ scope.user = {}; se (isEdit) {$ scope.user = Databases.DataUser.get (userID);} $ scope.save = function () {var user = Util.clone ($ scope.user); if (isEdit) {Databases.DataUser. update (userID, user); $ location.path ('/ user / list');} else {Databases.DataUser.add (user);} $ scope.user = {};};}) Explicação do novo código:- $ routeParams: Este serviço irá retornar os parâmetros GET de nossa aplicação, neste caso iremos utilizá-lo para retornar o ID do usuário que iremos atualizar. $ routeParams.userID. Mais informações sobre $ routerParams https: //docs.angular … ce / $ routeParams
Também temos que adicionar um novo caminho na configuração do app.js:
.when ('/ user /: userID', {templateUrl: 'tpl / user.html', controlador: 'UserController'})É importante colocar este novo caminho sob o caminho '/ usuário / lista', para que nos apresente um conflito com o último mencionado.
- '/ user /: userID': Como podemos ver, esta URL tem algo especial chamado: userID, este é o parâmetro que usaremos no UserController.
Resta apenas adicionar uma nova coluna em user-list.html onde iremos adicionar um link para editar o usuário registrado.
Código em user-list.htmlEditar
Agora só temos que testar esta nova operação, atualizar o aplicativo, registrar e editar o usuário.
Precisamos apenas adicionar a funcionalidade para excluir usuários. Criamos um novo modelo em tpl chamado user-delete.html
Você quer remover {{nome do usuário}}?Remover User-delete.html code
Adicionamos um novo link na tabela user-list.html para acessar o modelo user-delete.html
Adicionamos em controller.js o controlador para user-delete.html chamado UserDeleteControllerRemover
.controller ('UserDeleteController', function ($ scope, Databases, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path ('/ user / list');}}) E adicionamos o caminho na configuração do app.js
.when ('/ user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controlador: 'UserDeleteController'})Nós atualizamos o aplicativo, registramos e testamos a operação de remoção do usuário.
Terminamos nosso aplicativo básico! Já dominamos a criação de rotas manuais em nosso aplicativo, mas se olharmos de perto e vermos o que as rotas são construídas:
- /casa
- / do utilizador
- / Lista de usuários
- / user /: userID
- / user / delete /: userID
Como criar rotas dinâmicas
Vamos dar uma olhada em nossas rotas atuais, para criar um novo usuário, usamos a rota / usuário.
- Para consultar os usuários / usuário / lista
- Para editá-lo / user /: userID
- Para excluir / usuário / excluir /: ID do usuário.
Podemos criar algumas rotas onde apenas um, dois ou três parâmetros sejam usados e estes os captem, use-os ao nosso gosto. Ficaria assim:
Devemos deixar algo claro, para que as rotas dinâmicas funcionem corretamente precisamos seguir as seguintes regras, para explicá-las usaremos o mesmo exemplo de usuário:
1. O nome do usuário deve ser usado como modelo e prefixo do controlador.
2. Para as consultas como segundo prefixo no tutorial usamos a lista de palavras, da mesma forma que você pode alterá-la para o que quiser, mas a palavra que você usar deve ter tanto no nome do modelo quanto no nome do controlador. Ex: user-list.html e UserListController; para excluir: user-delete.html e UserDeleteController
3. Para identificar os prefixos nos controladores, use letras maiúsculas.
4. Os nomes dos controladores devem sempre terminar com a palavra Controlador.
var route = {controlador: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'undefined')? '-' + uri.param2: ''; return 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when ('/: param1', route) .when ('/: param1 /: param2', route) .when ('/: param1 /: param2 /: param3', route) .otherwise ({redirectTo: '/casa'}); Código em app.js
Nós criamos três padrões de caminho, então quando você tem apenas um único parâmetro ele funcionaria para / user e / home. Para dois parâmetros / user /: userID e / user / list. Para três parâmetros / user / delete /: userID
Também precisamos criar um novo controlador que se encarregará de guiar os diferentes controladores dependendo do URI.
.controller ('RouteController', function ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controlador (prefixo + 'Controlador', {$ escopo: $ escopo});}) Código RouteController
Este controlador, por sua vez, depende de um filtro, criamos um novo arquivo no diretório js chamado filters.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = new RegExp ('[az] + [0-9] *'); var p_int = new RegExp ("[0-9] +"); if (p_int.test (text)) {return '';} else if (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Código Filters.js
Injetamos o filtro em app.js
routeapp.filtersImportamos o script filters.js para index.html colocado antes do app.js
Precisamos mudar um último detalhe em UserController Y UserDeleteController. Como agora estamos usando parâmetros: param1 ,: param2 ,: param3; o parâmetro: userID não estará mais disponível. Que temos que mudar nos controladores. Para UserController use param2 e para UserDeleteController param3
Código UserController:
var userID = $ routeParams.param2;Código UserDeleteController:
var userID = $ routeParams.param3;Finalizamos nosso roteador dinâmico. Agora não temos mais que nos preocupar em criar novas rotas para nosso site, pois tudo é controlado por nosso RouterController e a nova configuração do $ routerProvider, você pode testá-lo criando novos modelos e atribuindo suas rotas e controladores. Finalmente, podemos criar um novo modelo que pode nos ajudar a detectar ao tentar acessar uma url que não se encontra em nosso site. Podemos usar um modelo 404. Vamos criá-lo em tpl com o nome 404.html
Código para 404.html
Controlador controlador 404
.controller ('404Controller', função () {})Para que possamos detectar ao tentar acessar uma rota indisponível, podemos usar um ouvinte angularjs quem cuida disso. Substituímos o código de MainController pelo seguinte:
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Basta executar o aplicativo e colocar uma URL não disponível em nosso site, por exemplo http: // localhost: 300… unknown-url. O aplicativo irá redirecionar imediatamente para / 404
Você pode baixe este tutorial de demonstração aqui:
routeapp.zip 344,9K 259 downloads
