MEAN.JS - การสร้างหน้าเดียวด้วย Angular

ใน MEAN stack Angular เรียกว่าเฟรมเวิร์ก JavaScript ที่สองซึ่งอนุญาตให้สร้างแอ็พพลิเคชันหน้าเดียวด้วยวิธี Model View Controller (MVC)

AngularJS เป็น Front-end Framework ใช้สิ่งต่อไปนี้ -

ใช้ Bower เพื่อติดตั้งไฟล์และไลบรารี
ใช้ตัวควบคุมและบริการสำหรับโครงสร้างแอปพลิเคชันเชิงมุม
สร้างหน้า HTML ที่แตกต่างกัน
ใช้โมดูลngRouteเพื่อจัดการการกำหนดเส้นทางและบริการสำหรับแอปพลิเคชัน AngularJS
ใช้ Bootstrap เพื่อทำให้แอปพลิเคชันน่าสนใจ

การตั้งค่าแอปพลิเคชันเชิงมุมของเรา

ให้เราสร้างแอปพลิเคชันง่ายๆที่มีแบ็กเอนด์ Node.js และส่วนหน้า AngularJS สำหรับแอปพลิเคชัน Angular ของเราเราต้องการ -

สองหน้าที่แตกต่างกัน (บ้านนักเรียน)
ตัวควบคุมเชิงมุมที่แตกต่างกันสำหรับแต่ละตัว
ไม่มีการรีเฟรชหน้าเมื่อสลับหน้า

Bower และการดึงส่วนประกอบ

เราต้องการไฟล์บางอย่างสำหรับแอปพลิเคชันของเราเช่น bootstrap และ angular เราจะบอกให้ bower ดึงส่วนประกอบเหล่านั้นมาให้เรา

ขั้นแรกให้ติดตั้ง bower บนเครื่องของคุณโดยเรียกใช้คำสั่งด้านล่างบนเทอร์มินัลคำสั่งของคุณ -

npm install -g bower

สิ่งนี้จะติดตั้ง bower และทำให้สามารถเข้าถึงได้ทั่วโลกในระบบของคุณ ตอนนี้วางไฟล์. bowerrc และ bower.json ไว้ใต้โฟลเดอร์รูทของคุณ ในกรณีของเราก็คือmean-demo. เนื้อหาของทั้งสองไฟล์มีดังต่อไปนี้ -

.bowerrc - สิ่งนี้จะบอก Bower ว่าจะวางไฟล์ของเราไว้ที่ไหน -

{
   "directory": "public/libs"
}

bower.json - คล้ายกับ package.json และจะบอก Bower ว่าต้องการแพ็คเกจใด

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

จากนั้นติดตั้งส่วนประกอบ Bower โดยใช้คำสั่งด้านล่าง ท่านสามารถเข้าดูดึงซุ้มในไฟล์ทั้งหมดภายใต้รัฐ / 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!';
});

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

ตอนนี้เรามีคอนโทรลเลอร์และเส้นทางแล้วเราจะรวมมันทั้งหมดและฉีดโมดูลเหล่านี้ลงในpublic / 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