MEAN.JS - Guia rápido

O que é MEAN.js?

O termo MEAN.jsé uma solução de código aberto JavaScript full stack, usada para construir sites dinâmicos e aplicativos da web. MEAN é uma sigla que significaMongoDB, Express, Node.js e AngularJS, que são os principais componentes da pilha MEAN.

Ele foi basicamente desenvolvido para resolver os problemas comuns de conexão dessas estruturas (Mongo, Express Nodejs, AngularJS), construir uma estrutura robusta para suportar as necessidades diárias de desenvolvimento e ajudar os desenvolvedores a usar melhores práticas enquanto trabalham com componentes JavaScript populares.

Stack significa usar banco de dados e servidor web no back end, no meio você terá lógica e controle para a aplicação e interação do usuário no front end.

• MongoDB - Sistema de Banco de Dados

• Express - Back-end Web Framework

• Node.js - Plataforma de servidor web

• AngularJS - Estrutura de front-end

História

O nome MEAN foi cunhado por Valeri Karpov , um desenvolvedor MongoDB.

Por que usar MEAN.js?

• É uma estrutura de código aberto de uso gratuito.

• Ele pode ser usado como solução independente em um aplicativo completo.

• Ele fornece menor custo de desenvolvimento e aumenta a flexibilidade e eficiência do desenvolvedor.

• Ele suporta o padrão MVC e usa o JSON para transferência de dados.

• Ele fornece estruturas adicionais, bibliotecas e módulos reutilizáveis ​​para aumentar a velocidade de desenvolvimento.

Antes de começarmos com outros conceitos, veremos os blocos de construção básicos do aplicativo MEAN.JS.

Introdução ao MongoDB

Na sigla MEAN ,Msignifica MongoDB, que é um banco de dados NoSQL de código aberto que salva os dados no formato JSON. Ele usa o modelo de dados orientado a documento para armazenar os dados em vez de usar tabelas e linhas como usamos nos bancos de dados relacionais. Ele armazena dados em formato JSON (JavaScript Serialized Object Notation) binário para passar os dados facilmente entre o cliente e o servidor. O MongoDB trabalha no conceito de coleção e documento. Para obter mais informações, consulte este link MongoDB .

Introdução ao Express

Na sigla MEAN ,Esignifica Express , que é uma estrutura de aplicativo da web Node.js flexível usada para tornar o processo de desenvolvimento mais fácil. É fácil de configurar e personalizar, o que permite construir aplicações seguras, modulares e rápidas. Ele especifica as rotas de um aplicativo dependendo dos métodos HTTP e URLs. Você pode se conectar a bancos de dados como MongoDB, MySQL, Redis facilmente. Para mais informações, consulte este link Express .

Introdução ao AngularJS

Na sigla MEAN ,Asignifica AngularJS , que é uma estrutura JavaScript de front-end da web. Ele permite a criação de aplicativos dinâmicos de página única de uma maneira limpa do Model View Controller (MVC). O AngularJS lida automaticamente com o código JavaScript adequado para cada navegador. Para obter mais informações, consulte este link AngularJS .

Introdução ao Node.js

Na sigla MEAN ,Nsignifica Node.js , que é uma plataforma do lado do servidor usada para desenvolvimento de aplicativos da web como sites de streaming de vídeo, aplicativos de página única e outros aplicativos da web. Ele fornece uma rica biblioteca de vários módulos JavaScript que simplifica muito o desenvolvimento de aplicativos da web usando Node.js. É construído no motor JavaScript V8 do Google Chrome, por isso é muito rápido na execução do código. Para mais informações, consulte este link Node.js .

MEAN é uma estrutura JavaScript de código aberto, usada para construir sites dinâmicos e aplicativos da web. Inclui os seguintes quatro blocos de construção para construir um aplicativo.

• MongoDB - É um banco de dados de documentos, que armazena dados em documentos flexíveis do tipo JSON.

• Express - É um framework de aplicação web para Nodejs.

• Node.js- É uma plataforma de servidor web. Ele fornece uma rica biblioteca de vários módulos JavaScript que simplifica o desenvolvimento de aplicativos da web.

• AngularJS- É um framework JavaScript de frontend da web. Ele permite a criação de aplicativos dinâmicos de página única de uma maneira limpa do Model View Controller (MVC).

Para obter mais informações sobre isso, você pode consultar o capítulo de visão geral . O diagrama a seguir descreve a arquitetura do aplicativo MEAN stack.

Conforme mostrado na imagem acima, temos AngularJS como linguagem do lado do cliente que processa a solicitação de um cliente.

• Sempre que um usuário faz uma solicitação, ela é primeiro processada pelo AngularJS.

• Em seguida, a solicitação entra no segundo estágio, onde temos Node.js como linguagem do lado do servidor e ExpressJS como estrutura da web de backend.

• O Node.js lida com as solicitações do cliente / servidor e o ExpressJS faz a solicitação ao banco de dados.

• No último estágio, o MongoDB (banco de dados) recupera os dados e envia a resposta ao ExpressJS.

• ExpressJS retorna a resposta para Nodejs e por sua vez para AngularJS e, em seguida, exibe a resposta para o usuário.

Este capítulo inclui a criação e configuração de um aplicativo MEAN. Estamos usando NodeJS e ExpressJS juntos para criar o projeto.

Pré-requisitos

Antes de começarmos a criar um aplicativo MEAN, precisamos instalar os pré-requisitos necessários.

Você pode instalar a versão mais recente do Node.js visitando o site do Node.js em Node.js (isto é para usuários do Windows). Quando você baixa o Node.js, o npm é instalado automaticamente em seu sistema. Os usuários do Linux podem instalar o Node e o npm usando este link .

Verifique a versão do Node e npm usando os comandos abaixo -

$ node --version
$ npm --version

Os comandos exibirão as versões conforme mostrado na imagem abaixo -

Criando Projeto Express

Crie um diretório de projeto usando o comando mkdir conforme mostrado abaixo -

$ mkdir mean-demo //this is name of repository

O diretório acima é a raiz do aplicativo do nó. Agora, para criar o arquivo package.json, execute o comando abaixo -

$ cd webapp-demo
$ npm init

O comando init o orientará na criação de um arquivo package.json -

Este utilitário o orientará na criação de um arquivo package.json. Ele cobre apenas os itens mais comuns e tenta adivinhar padrões razoáveis.

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

Clique em sim e uma estrutura de pastas conforme abaixo será gerada -

-mean-demo
   -package.json

O arquivo package.json terá as seguintes informações -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Agora, para configurar o projeto Express na pasta atual e instalar as opções de configuração para o framework, use o comando abaixo -

npm install express --save

Vá para o diretório do seu projeto e abra o arquivo package.json, você verá as informações abaixo -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

Aqui você pode ver que a dependência expressa foi adicionada ao arquivo. Agora, a estrutura do projeto é a seguinte -

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

Aplicação em execução

Navegue até o diretório do projeto recém-criado e crie um arquivo server.js com o conteúdo abaixo.

// modules =================================================
const express = require('express');
const app = express();
// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Em seguida, execute o aplicativo com o comando abaixo -

$ npm start

Você receberá uma confirmação conforme mostrado na imagem abaixo -

Informa que o aplicativo Express está em execução. Abra qualquer navegador e acesse o aplicativo usandohttp://localhost:3000. Você verá Bem-vindo ao Tutorialspoint! texto conforme mostrado abaixo -

Este capítulo demonstra a construção de rota para uma aplicação com Node e Express.

No capítulo anterior, criamos um aplicativo node-express. Navegue até o diretório do projeto chamado mean-demo . Vá para o diretório usando o comando abaixo -

$ cd mean-demo

Configurando Rotas

As rotas são usadas como serviço de mapeamento usando URL de uma solicitação de entrada. Abra oserver.js arquivo e configure o roteamento conforme mostrado abaixo -

// modules =================================================
const express = require('express');
const app = express();

// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Aplicação em execução

Em seguida, execute o aplicativo com o comando abaixo -

$ npm start

Você receberá uma confirmação conforme mostrado na imagem abaixo -

Agora, vá para o navegador e digite http://localhost:3000/myroute. Você obterá a página conforme mostrado na imagem abaixo -

Neste capítulo, demonstraremos como usar o modelo de dados em nosso aplicativo Node-express.

MongoDB é um banco de dados NoSQL de código aberto que salva os dados no formato JSON. Ele usa o modelo de dados orientado a documentos para armazenar os dados em vez de usar tabelas e linhas como usamos nos bancos de dados relacionais. Neste capítulo, estamos usando Mongodb para construir modelo de dados.

O modelo de dados especifica quais dados estão presentes em um documento e quais dados devem estar em um documento. Consulte a instalação oficial do MongoDB para instalar o MongoDB.

Devemos usar nosso código do capítulo anterior. Você pode baixar o código-fonte neste link . Baixe o arquivo zip; extraia-o em seu sistema. Abra o terminal e execute o comando abaixo para instalar as dependências do módulo npm.

$ cd mean-demo
$ npm install

Adicionando Mongoose ao aplicativo

Mongoose é uma biblioteca de modelagem de dados que especifica o ambiente e a estrutura dos dados, tornando o MongoDB poderoso. Você pode instalar o Mongoose como um módulo npm por meio da linha de comando. Vá para a pasta raiz e execute o comando abaixo -

$ npm install --save mongoose

O comando acima irá baixar o novo pacote e instalá-lo na pasta node_modules . O sinalizador --save adicionará este pacote ao arquivo package.json .

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1",
      "mongoose": "^5.5.13"
   }
}

Configurando Arquivo de Conexão

Para trabalhar com modelo de dados, usaremos a pasta app / models . Vamos criar o modelo students.js como abaixo -

var mongoose = require('mongoose');

// define our students model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('Student', {
   name : {type : String, default: ''}
});

Você pode configurar o arquivo de conexão criando o arquivo e usando-o no aplicativo. Crie um arquivo chamado db.js em config / db.js . O conteúdo do arquivo é o seguinte -

module.exports = {
   url : 'mongodb://localhost:27017/test'
}

Aqui, teste é o nome do banco de dados.

Aqui, presume-se que você instalou o MongoDB localmente. Depois de instalado, inicie o Mongo e crie um banco de dados por teste de nome. Este banco de dados terá uma coleção por nome de alunos. Insira alguns dados nesta coleção. Em nosso caso, inserimos um registro usando db.students.insertOne ({nome: 'Manisha', local: 'Pune', país: 'Índia'});

Traga o arquivo db.js para o aplicativo, ou seja, server.js . O conteúdo do arquivo é mostrado abaixo -

// modules =================================================
const express = require('express');
const app = express();
var mongoose = require('mongoose');
// set our port
const port = 3000;
// configuration ===========================================

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// frontend routes =========================================================
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// sample api route
// grab the student model we just created
var Student = require('./app/models/student');
app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Em seguida, execute o aplicativo com o comando abaixo -

$ npm start

Você receberá uma confirmação conforme mostrado na imagem abaixo -

Agora, vá para o navegador e digite http://localhost:3000/api/students. Você obterá a página conforme mostrado na imagem abaixo -

Neste capítulo, veremos nosso aplicativo interagindo por meio de uma API REST com nosso banco de dados usando métodos HTTP. O termo REST significa Transferência de Estado Representacional, que é um estilo de arquitetura projetado para se comunicar com serviços da web e API significa Interface de Programa de Aplicativo que permite aplicativos de interação entre si.

Primeiro, criaremos a API RESTful para obter todos os itens, criar o item e excluir um item. Para cada item, _id será gerado automaticamente pelo MongoDB. A tabela abaixo descreve como o aplicativo deve solicitar dados da API -

Método HTTP	Caminho de URL	Descrição
PEGUE	/api/students	Ele é usado para obter todos os alunos da coleção Student.
POSTAR	/api/students/send	É usado para criar um registro do aluno na coleção Aluno.
EXCLUIR	/api/students/student_id	É usado para excluir um registro de aluno da coleção Aluno.

Rotas de API RESTful

Discutiremos primeiro o Post Method em RESTful API Routes.

POSTAR

Primeiro vamos criar um registro na coleção Student por meio de nossa API REST. O código para este caso específico pode ser encontrado no arquivo server.js . Para referência, uma parte do código é colada aqui -

app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         res.json({ message: 'student created!' });
   });
});

Execução

Você pode baixar o código-fonte deste aplicativo neste link . Baixe o arquivo zip; extraia-o em seu sistema. Abra o terminal e execute o comando abaixo para instalar as dependências do módulo npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Para analisar a solicitação, precisaríamos do pacote do analisador de corpo. Portanto, execute o comando abaixo para incluir em seu aplicativo.

npm install --save body-parser

O código-fonte anexado já possui essa dependência, portanto, não há necessidade de executar o comando acima, é apenas para sua informação.

Para executar o aplicativo, navegue até o diretório do projeto recém-criado e execute com o comando fornecido abaixo -

npm start

Você receberá uma confirmação conforme mostrado na imagem abaixo -

Existem muitas ferramentas para testar as chamadas de API, aqui estamos usando uma das extensões de usuário amigável para o Chrome chamada Postman REST Client .

Abra o Postman REST Client, insira o URL como http://localhost:3000/api/students/send, selecione o método POST . Em seguida, insira os dados da solicitação conforme mostrado abaixo -

Observe que estamos enviando os dados de nome como x-www-form-urlencoded . Isso enviará todos os nossos dados para o servidor Node como strings de consulta.

Clique no botão Enviar para criar um registro do aluno. Uma mensagem de sucesso aparecerá conforme mostrado abaixo -

PEGUE

A seguir, vamos obter todos os registros dos alunos do mongodb. A rota a seguir precisa ser escrita. Você pode encontrar o código completo no arquivo server.js .

app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});

Em seguida, abra o Postman REST Client, insira a URL como

http://localhost:3000/api/students, selecione o método GET e clique no botão Enviar para obter todos os alunos.

EXCLUIR

A seguir, vamos ver como excluir um registro de nossa coleção mongo por meio da chamada da API REST.

A rota a seguir precisa ser escrita. Você pode encontrar o código completo no arquivo server.js .

app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
   }, function(err, bear) {
      if (err)
         res.send(err);
      res.json({ message: 'Successfully deleted' });
   });
});

Em seguida, abra o Postman REST Client, insira a URL como

http://localhost:3000/api/students/5d1492fa74f1771faa61146d

(aqui 5d1492fa74f1771faa61146d é o registro que excluiremos da coleção Aluno).

Selecione o método DELETE e clique no botão Enviar para obter todos os alunos.

Você pode verificar o MongoDB para os dados excluídos, fazendo uma chamada GET para http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

Neste capítulo, adicionaremos componentes angulares a um aplicativo. É uma estrutura JavaScript de front-end da web, que permite criar aplicativos dinâmicos de página única usando o padrão Model View Controller (MVC). No capítulo de arquitetura MEAN.JS , você viu como o AngularJS processará a solicitação do cliente e obterá o resultado do banco de dados.

Conhecendo o AngularJS

AngularJS é uma estrutura de aplicativo da Web de código aberto que usa HTML como linguagem de modelo e estende a sintaxe do HTML para expressar claramente os componentes de seu aplicativo. O AngularJS fornece alguns recursos básicos, como vinculação de dados, modelo, visualizações, controladores, serviços, etc. Para obter mais informações sobre o AngularJS, consulte este link .

Você pode tornar a página um aplicativo Angular adicionando Angular à página. Ele pode ser adicionado usando apenas um arquivo JavaScript externo, que pode ser baixado ou pode ser referenciado diretamente com uma versão CDN.

Considere que baixamos o arquivo e o referenciamos localmente, adicionando à página da seguinte forma -

<script src="angular.min.js"></script>

Agora, precisamos informar ao Angular que esta página é um aplicativo Angular. Portanto, podemos fazer isso adicionando um atributo, ng-app à tag <html> ou <body> como mostrado abaixo -

<html ng-app>
or
<body ng-app>

O ng-app pode ser adicionado a qualquer elemento da página, mas geralmente é colocado na tag <html> ou <body> para que o Angular possa funcionar em qualquer lugar da página.

Aplicação Angular como Módulo

Para trabalhar com uma aplicação Angular, precisamos definir um módulo. É um local onde você pode agrupar os componentes, diretivas, serviços, etc., que estão relacionados ao aplicativo. O nome do módulo é referenciado pelo atributo ng-app no ​​HTML. Por exemplo, diremos o nome do módulo de aplicativo angular como myApp e pode ser especificado na tag <html> como mostrado abaixo -

<html ng-app="myApp">

Podemos criar uma definição para o aplicativo usando a instrução abaixo em um arquivo JavaScript externo -

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Definindo o controlador

O aplicativo AngularJS depende de controladores para controlar o fluxo de dados no aplicativo. Um controlador é definido usando a diretiva ng-controller .

Por exemplo, vamos anexar o controlador ao corpo usando a diretiva ng-controller, junto com o nome do controlador que deseja usar. Na linha abaixo, estamos usando o nome do controlador como "myController".

<body ng-controller="myController">

Você pode anexar um controlador (myController) a um módulo Angular (myApp) como mostrado abaixo -

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

É melhor usar a função nomeada em vez de uma função anônima para facilitar a leitura, reutilização e testabilidade. No código a seguir, estamos usando a nova função nomeada "myController" para manter o código do controlador -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Para obter mais informações sobre controladores, consulte este link .

Definindo Escopo

Scope é um objeto JavaScript especial que conecta o controlador às visualizações e contém os dados do modelo. Nos controladores, os dados do modelo são acessados ​​por meio do objeto $ scope. A função do controlador usa o parâmetro $ scope que foi criado pelo Angular e dá acesso direto ao modelo.

O trecho de código a seguir especifica como atualizar a função do controlador para receber o parâmetro $ scope e define o valor padrão -

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Para obter mais informações sobre controladores, consulte este link . No próximo capítulo, começaremos a criar um aplicativo de página única usando o Angular.

Na pilha MEAN, o Angular é conhecido como segundo framework JavaScript, que permite a criação de aplicativos de página única de uma maneira limpa do Model View Controller (MVC).

AngularJS como um Framework front-end usa as seguintes coisas -

• Usa Bower para instalar arquivos e bibliotecas

• Usa controladores e serviços para estrutura de aplicativo Angular

• Cria diferentes páginas HTML

• Usa o módulo ngRoute para lidar com roteamento e serviços para aplicativos AngularJS

• Usa Bootstrap para tornar um aplicativo atraente

Configurando nosso aplicativo angular

Vamos construir um aplicativo simples que tenha um back-end Node.js e um front-end AngularJS. Para a nossa aplicação Angular, queremos -

• Duas páginas diferentes (Home, Student)

• Um controlador angular diferente para cada

• Sem atualização de página ao trocar de página

Bower e puxando em componentes

Precisaremos de certos arquivos para nosso aplicativo, como bootstrap e angular. Diremos ao Bower para buscar esses componentes para nós.

Primeiro, instale o bower em sua máquina executando o comando abaixo em seu terminal de comando -

npm install -g bower

Isso irá instalar o bower e torná-lo acessível globalmente em seu sistema. Agora coloque os arquivos .bowerrc e bower.json na pasta raiz. No nosso caso émean-demo. O conteúdo de ambos os arquivos é o seguinte -

.bowerrc - Isso dirá ao Bower onde colocar nossos arquivos -

{
   "directory": "public/libs"
}

bower.json - Isso é semelhante ao package.json e dirá ao Bower quais pacotes são necessários.

{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

Em seguida, instale os componentes do Bower usando o comando abaixo. Você pode ver o bower puxando todos os arquivos em public / libs .

$ bower install

Nossa estrutura de diretório seria a seguinte -

mean-demo
   -app
   -config
   -node_modules
   -public
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -libs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

Controladores Angulares

Nosso controlador (public / js / controllers / MainCtrl.js) é o seguinte -

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = 'Welcome to tutorials point angular app!';
});

O controlador public / js / controllers / StudentCtrl.js é o seguinte -

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = 'Welcome to Student section!';
});

Rotas Angulares

Nosso arquivo de rotas (public / js / appRoutes.js) é o seguinte -

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when('/', {
         templateUrl: 'views/home.html',
         controller: 'MainController'
      })
      // students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/student.html',
         controller: 'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

Agora que temos nossos controladores e rotas, combinaremos todos eles e injetaremos esses módulos em nosso public / js / app.js principal da seguinte maneira -

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'StudentCtrl']);

Visualizar arquivo

O Angular usa o arquivo de modelo, que pode ser injetado no <div ng-view> </div> no arquivo index.html. A diretiva ng-view cria um espaço reservado, onde uma visualização correspondente (HTML ou visualização do modelo ng) pode ser colocada com base na configuração. Para obter mais informações sobre visualizações angulares, visite este link .

Quando estiver pronto com o roteamento, crie arquivos de modelo menores e injete-os no arquivo index.html . O arquivo index.html terá o seguinte snippet de código -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
      
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Aplicação em execução

Execução

Você pode baixar o código-fonte deste aplicativo neste link . Baixe o arquivo zip; extraia-o em seu sistema. Abra o terminal e execute o comando abaixo para instalar as dependências do módulo npm.

$ cd mean-demo
$ npm install

Em seguida, execute o comando abaixo -

$ node start

Você receberá uma confirmação conforme mostrado na imagem abaixo -

Agora, vá para o navegador e digite http://localhost:3000. Você obterá a página conforme mostrado na imagem abaixo -

Clique no link Alunos e você verá a tela abaixo -

Nosso frontend Angular usará o arquivo de modelo e o injetará no <div ng-view> </div> em nosso arquivo index.html . Ele fará isso sem uma atualização da página.

No capítulo anterior, vimos a criação de um aplicativo meanjs de página única usando Angularjs. Neste capítulo, vamos ver como o aplicativo Angular usa a API para obter os dados do Mongodb.

Você pode baixar o código-fonte deste aplicativo neste link . Baixe o arquivo zip; extraia-o em seu sistema.

A estrutura do diretório do nosso código-fonte é a seguinte -

mean-demo
   -app
      -models
         -student.js
   -config
      -db.js
   -public
      -js
         -controllers
            -MainCtrl.js
            -StudentCtrl.js
         -services
            -StudentService.js
         -app.js
         -appRoutes.js
      -views
         -home.html
         -student.html
      -index.html
   -.bowerrc
   -bower.json
   -package.json
   -server.js

Neste aplicativo, criamos uma visão (home.html), que irá listar todos os alunos da coleção Aluno, nos permite criar um novo studentregistrar e nos permitir excluir o registro do aluno. Todas essas operações são realizadas por meio de chamadas de API REST.

Abra o terminal e execute o comando abaixo para instalar as dependências do módulo npm.

$ npm install

Em seguida, instale os componentes do Bower usando o comando abaixo. Você pode ver o bower puxando todos os arquivos em public / libs.

$ bower install

A configuração do nó para um aplicativo será salva no arquivo server.js. Este é o arquivo principal do aplicativo de nó e configurará todo o aplicativo.

// modules =================================================
const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var methodOverride = require('method-override');
// set our port
const port = 3000;
// configuration ===========================================
// configure body parser
app.use(bodyParser.json()); // parse application/json

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// override with the X-HTTP-Method-Override header in the request.
app.use(methodOverride('X-HTTP-Method-Override')); simulate DELETE/PUT

// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// grab the student model
var Student = require('./app/models/student');
function getStudents(res) {
   Student.find(function (err, students) {
      // if there is an error retrieving, send the error. nothing after res.send(err) will execute
         if (err) {
            res.send(err);
         }
         res.json(students); // return all todos in JSON format
      });
   };
app.get('/api/studentslist', function(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         getStudents(res);
   });
});
app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
      }, function(err, bear) {
         if (err)
            res.send(err);
         getStudents(res);
      });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Definindo Rota Frontend

O arquivo public / index.html terá o seguinte snippet de código -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/services/StudentService.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Escrevemos um serviço para fazer chamadas de API e executar as solicitações de API. Nosso serviço, StudentService , tem a seguinte aparência -

angular.module('StudentService', [])
// super simple service
// each function returns a promise object
.factory('Student', ['$http',function($http) {
   return {
      get : function() {
         return $http.get('/api/students');
      },
      create : function(student) {
         return $http.post('/api/students/send', student);
      },
      delete : function(id) {
         return $http.delete('/api/students/' + id);
      }
   }
}]);

Nosso código de controlador (MainCtrl.js) é o seguinte -

angular.module('MainCtrl', []).controller('MainController',
   ['$scope','$http','Student',function($scope, $http, Student) {
   $scope.formData = {};
   $scope.loading = true;
   $http.get('/api/studentslist').
   then(function(response) {
      $scope.student = response.data;
   });
   // CREATE 
   // when submitting the add form, send the text to the node API
   $scope.createStudent = function() {
      // validate the formData to make sure that something is there
      // if form is empty, nothing will happen
      if ($scope.formData.name != undefined) {
         $scope.loading = true;
         // call the create function from our service (returns a promise object)
         Student.create($scope.formData)
         // if successful creation, call our get function to get all the new Student
         .then(function (response){
            $scope.student = response.data;
            $scope.loading = false;
            $scope.formData = {}
         },    function (error){
         });
      }
   };
   // DELETE
   ==================================================================
   // delete a todo after checking it
   $scope.deleteStudent = function(id) {
      $scope.loading = true;
      Student.delete(id)
      // if successful delete, call our get function to get all the new Student
      .then(function(response) {
         $scope.loading = false;
         new list of Student
      });
   };
}]);

Aplicação em execução

Navegue até o diretório do seu projeto e execute o comando fornecido abaixo -

$ npm start

Agora navegue para http://localhost:3000 e você obterá a página conforme mostrado na imagem abaixo -

Insira algum texto na caixa de texto e clique em Addbotão. Um registro é adicionado e exibido da seguinte forma -

Você pode excluir o registro marcando a caixa de seleção.