MEAN.JS - Создание одной страницы с помощью Angular

В стеке MEAN Angular известен как вторая среда JavaScript, которая позволяет создавать одностраничные приложения с использованием чистого контроллера представления модели (MVC).

AngularJS в качестве интерфейсной структуры использует следующие вещи:

Использует Bower для установки файлов и библиотек
Использует контроллеры и сервисы для структуры приложения Angular
Создает разные HTML-страницы
Использует модуль ngRoute для обработки маршрутизации и сервисов для приложения AngularJS
Использует Bootstrap, чтобы сделать приложение привлекательным

Настройка нашего приложения Angular

Давайте создадим простое приложение с серверной частью Node.js и интерфейсом AngularJS. Для нашего приложения Angular нам понадобится -

Две разные страницы (Домашняя, Студенческая)
Разный угловой контроллер для каждого
Нет обновления страницы при переключении страниц

Бауэр и втягивание компонентов

Нам понадобятся определенные файлы для нашего приложения, такие как bootstrap и angular. Мы попросим беседку принести нам эти компоненты.

Сначала установите bower на свой компьютер, выполнив следующую команду на своем командном терминале -

npm install -g bower

Это установит bower и сделает его доступным глобально в вашей системе. Теперь поместите файлы .bowerrc и bower.json в корневую папку. В нашем случае этоmean-demo. Содержание обоих файлов показано ниже -

.bowerrc - Это скажет Бауэру, где разместить наши файлы -

{
   "directory": "public/libs"
}

bower.json - Это похоже на package.json и сообщает Bower, какие пакеты необходимы.

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

Затем установите компоненты Bower с помощью следующей команды. Вы можете увидеть, как bower вытягивает все файлы в папке public / libs .

$ bower install

Наша структура каталогов будет следующей -

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

Угловые контроллеры

Наш контроллер (public / js / controllers / MainCtrl.js) выглядит следующим образом:

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

Контроллер public / js / controllers / StudentCtrl.js выглядит следующим образом:

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

Угловые маршруты

Наш файл маршрутов (public / js / appRoutes.js) выглядит следующим образом:

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);
}]);

Теперь, когда у нас есть контроллеры и маршруты, мы объединим их все и внедрим эти модули в наш основной общедоступный / js / app.js следующим образом:

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

Посмотреть файл

Angular использует файл шаблона, который можно вставить в <div ng-view> </div> в файле index.html. Директива ng-view создает заполнитель, в который может быть помещено соответствующее представление (представление HTML или ng-template) в зависимости от конфигурации. Для получения дополнительной информации об угловых представлениях перейдите по этой ссылке .

Когда вы будете готовы к маршрутизации, создайте файлы шаблонов меньшего размера и вставьте их в файл index.html . Index.html файл будет иметь следующий фрагмент кода -

<!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>

Запуск приложения

Исполнение

Вы можете скачать исходный код этого приложения по этой ссылке . Загрузите zip-файл; извлеките его в свою систему. Откройте терминал и запустите приведенную ниже команду, чтобы установить зависимости модуля npm.

$ cd mean-demo
$ npm install

Затем запустите следующую команду -

$ node start

Вы получите подтверждение, как показано на изображении ниже -

Теперь перейдите в браузер и введите http://localhost:3000. Вы получите страницу, как показано на изображении ниже -

Щелкните ссылку Студенты , вы увидите экран, как показано ниже -

Наш интерфейс Angular будет использовать файл шаблона и вставлять его в <div ng-view> </div> в нашем файле index.html . Это будет сделано без обновления страницы.