MEAN.JS - Membangun Halaman Tunggal dengan Sudut

Dalam tumpukan MEAN, Angular dikenal sebagai kerangka kerja JavaScript kedua, yang memungkinkan pembuatan aplikasi satu halaman dengan cara Model View Controller (MVC) yang bersih.

AngularJS sebagai Kerangka front-end menggunakan hal-hal berikut -

Menggunakan Bower untuk menginstal file dan perpustakaan
Menggunakan pengontrol dan layanan untuk struktur aplikasi Angular
Membuat halaman HTML yang berbeda
Menggunakan modul ngRoute untuk menangani perutean dan layanan untuk aplikasi AngularJS
Menggunakan Bootstrap untuk membuat aplikasi menjadi menarik

Menyiapkan Aplikasi Sudut Kami

Mari kita membangun aplikasi sederhana yang memiliki backend Node.js dan frontend AngularJS. Untuk aplikasi Angular kami, kami ingin -

Dua halaman berbeda (Home, Student)
Pengontrol sudut yang berbeda untuk masing-masing
Tidak ada halaman yang disegarkan saat berpindah halaman

Bower dan Menarik Komponen

Kami akan membutuhkan file tertentu untuk aplikasi kami seperti bootstrap dan angular. Kami akan memberi tahu Bower untuk mengambil komponen itu untuk kami.

Pertama, instal bower pada mesin Anda dengan menjalankan perintah di bawah ini pada terminal perintah Anda -

npm install -g bower

Ini akan menginstal bower dan membuatnya dapat diakses secara global di sistem Anda. Sekarang tempatkan file .bowerrc dan bower.json di bawah folder root Anda. Dalam kasus kami itumean-demo. Isi dari kedua file tersebut adalah sebagai berikut -

.bowerrc - Ini akan memberi tahu Bower di mana harus meletakkan file kita -

{
   "directory": "public/libs"
}

bower.json - Ini mirip dengan package.json dan akan memberi tahu Bower paket mana yang dibutuhkan.

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

Selanjutnya, instal komponen Bower dengan menggunakan perintah di bawah ini. Anda dapat melihat bower menarik semua file di bawah public / libs .

$ bower install

Struktur direktori kami adalah sebagai berikut -

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

Pengontrol Sudut

Pengontrol kami (publik / js / controllers / MainCtrl.js) adalah sebagai berikut -

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

Controller public / js / controllers / StudentCtrl.js adalah sebagai berikut -

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

Rute Sudut

File rute kami (public / js / appRoutes.js) adalah sebagai berikut -

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

Sekarang setelah kita memiliki pengontrol, dan rute, kita akan menggabungkan semuanya dan menyuntikkan modul ini ke publik utama / js / app.js kita sebagai berikut -

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

Lihat file

Angular menggunakan file template, yang bisa dimasukkan ke dalam <div ng-view> </div> di file index.html. Direktif ng-view membuat placeholder, di mana tampilan terkait (tampilan HTML atau ng-template) dapat ditempatkan berdasarkan konfigurasi. Untuk informasi lebih lanjut tentang tampilan sudut, kunjungi tautan ini .

Saat Anda siap dengan perutean, buat file template yang lebih kecil dan masukkan ke dalam file index.html . File index.html akan memiliki cuplikan kode berikut -

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

Menjalankan Aplikasi

Eksekusi

Anda dapat mengunduh kode sumber untuk aplikasi ini di tautan ini . Unduh file zip; ekstrak di sistem Anda. Buka terminal dan jalankan perintah di bawah ini untuk menginstal dependensi modul npm.

$ cd mean-demo
$ npm install

Selanjutnya jalankan perintah di bawah ini -

$ node start

Anda akan mendapatkan konfirmasi seperti yang ditunjukkan pada gambar di bawah ini -

Sekarang, masuk ke browser dan ketik http://localhost:3000. Anda akan mendapatkan halaman seperti yang ditunjukkan pada gambar di bawah ini -

Klik tautan Siswa , Anda akan melihat layar seperti di bawah ini -

Frontend Angular kita akan menggunakan file template dan memasukkannya ke dalam <div ng-view> </div> di file index.html kita . Ini akan melakukan ini tanpa penyegaran halaman.