MEAN.JS-Angular로 단일 페이지 만들기

MEAN 스택에서 Angular는 두 번째 JavaScript 프레임 워크로 알려져 있으며,이를 통해 깨끗한 MVC (Model View Controller) 방식으로 단일 페이지 애플리케이션을 만들 수 있습니다.

프론트 엔드 프레임 워크로서 AngularJS는 다음을 사용합니다.

Bower를 사용하여 파일 및 라이브러리 설치
Angular 애플리케이션 구조에 컨트롤러 및 서비스 사용
다른 HTML 페이지를 만듭니다.
ngRoute 모듈을 사용 하여 AngularJS 애플리케이션에 대한 라우팅 및 서비스 처리
Bootstrap을 사용하여 매력적인 애플리케이션 만들기

Angular 애플리케이션 설정

Node.js 백엔드와 AngularJS 프런트 엔드가있는 간단한 애플리케이션을 빌드 해 보겠습니다. Angular 애플리케이션의 경우 다음을 원할 것입니다.

두 개의 다른 페이지 (홈, 학생)
각기 다른 각도 컨트롤러
페이지 전환시 페이지 새로 고침 없음

Bower 및 구성 요소 당기기

부트 스트랩 및 앵귤러와 같은 애플리케이션을위한 특정 파일이 필요합니다. 우리는 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 구성 요소를 설치합니다. public / libs 아래의 모든 파일에서 bower pull을 볼 수 있습니다 .

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

이제 컨트롤러와 라우트가 생겼으니 , 모두 결합하고 다음과 같이이 모듈을 기본 public / js / app.js 에 삽입합니다.

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

파일보기

Angular는 index.html 파일의 <div ng-view> </ div>에 삽입 할 수있는 템플릿 파일을 사용합니다. 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>