MEAN.JS - Xây dựng Trang Đơn với Angular

Trong ngăn xếp MEAN, Angular được gọi là khung JavaScript thứ hai, cho phép tạo các ứng dụng trang đơn theo cách gọn gàng của Model View Controller (MVC).

AngularJS như một front-end Framework sử dụng những thứ sau:

Sử dụng Bower để cài đặt tệp và thư viện
Sử dụng bộ điều khiển và dịch vụ cho cấu trúc ứng dụng Angular
Tạo các trang HTML khác nhau
Sử dụng mô-đun ngRoute để xử lý định tuyến và các dịch vụ cho ứng dụng AngularJS
Sử dụng Bootstrap để làm cho một ứng dụng trở nên hấp dẫn

Thiết lập ứng dụng Angular của chúng tôi

Hãy để chúng tôi xây dựng một ứng dụng đơn giản có phụ trợ Node.js và giao diện người dùng AngularJS. Đối với ứng dụng Angular của chúng tôi, chúng tôi sẽ muốn -

Hai trang khác nhau (Trang chủ, Sinh viên)
Một bộ điều khiển góc khác nhau cho mỗi
Không làm mới trang khi chuyển trang

Bower và Pulling trong các thành phần

Chúng tôi sẽ cần một số tệp nhất định cho ứng dụng của mình như bootstrap và angle. Chúng tôi sẽ yêu cầu bower tìm nạp các thành phần đó cho chúng tôi.

Đầu tiên, cài đặt bower trên máy của bạn bằng cách thực hiện lệnh dưới đây trên thiết bị đầu cuối lệnh của bạn -

npm install -g bower

Điều này sẽ cài đặt bower và làm cho nó có thể truy cập toàn cầu trên hệ thống của bạn. Bây giờ đặt các tệp .bowerrc và bower.json trong thư mục gốc của bạn. Trong trường hợp của chúng tôi, nó làmean-demo. Nội dung của cả hai tệp như dưới đây:

.bowerrc - Điều này sẽ cho Bower biết nơi đặt các tệp của chúng tôi -

{
   "directory": "public/libs"
}

bower.json - Điều này tương tự như package.json và sẽ cho Bower biết gói nào là cần thiết.

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

Tiếp theo, cài đặt các thành phần Bower bằng cách sử dụng lệnh dưới đây. Bạn có thể thấy bower pull trong tất cả các tệp trong public / libs .

$ bower install

Cấu trúc thư mục của chúng tôi sẽ như sau:

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

Bộ điều khiển góc

Bộ điều khiển của chúng tôi (public / js / controllers / MainCtrl.js) như sau:

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

Bộ điều khiển public / js / controllers / StudentCtrl.js như sau:

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

Các tuyến đường góc

Tệp định tuyến của chúng tôi (public / js / appRoutes.js) như sau:

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

Bây giờ chúng ta đã có bộ điều khiển và các tuyến, chúng ta sẽ kết hợp tất cả chúng lại và đưa các mô-đun này vào public / js / app.js chính của chúng ta như sau:

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

Xem tài liệu

Angular sử dụng tệp mẫu, tệp này có thể được đưa vào <div ng-view> </div> trong tệp index.html. Lệnh ng-view tạo ra một giá đỡ, nơi có thể đặt một dạng xem tương ứng (dạng xem HTML hoặc ng-template) dựa trên cấu hình. Để biết thêm thông tin về chế độ xem góc, hãy truy cập liên kết này .

Khi bạn đã sẵn sàng với việc định tuyến, hãy tạo các tệp mẫu nhỏ hơn và đưa chúng vào tệp index.html . Tệp index.html sẽ có đoạn mã sau:

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

Ứng dụng đang chạy

Chấp hành

Bạn có thể tải xuống mã nguồn cho ứng dụng này trong liên kết này . Tải xuống tệp zip; giải nén nó trong hệ thống của bạn. Mở thiết bị đầu cuối và chạy lệnh dưới đây để cài đặt các phụ thuộc mô-đun npm.

$ cd mean-demo
$ npm install

Tiếp theo chạy lệnh dưới đây -

$ node start

Bạn sẽ nhận được xác nhận như trong hình dưới đây -

Bây giờ, hãy truy cập trình duyệt và nhập http://localhost:3000. Bạn sẽ nhận được trang như trong hình dưới đây -

Nhấp vào liên kết Sinh viên , bạn sẽ thấy màn hình như bên dưới -

Giao diện người dùng Angular của chúng tôi sẽ sử dụng tệp mẫu và đưa nó vào <div ng-view> </div> trong tệp index.html của chúng tôi . Nó sẽ làm điều này mà không cần làm mới trang.