MEAN.JS - Criação de página única com 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.