MEAN.JS - Açılı Tek Sayfa Oluşturma

MEAN yığınında, Angular, temiz bir Model Görünüm Denetleyicisi (MVC) yöntemiyle tek sayfalı uygulamaların oluşturulmasına izin veren ikinci JavaScript çerçevesi olarak bilinir.

Bir ön uç Çerçeve olarak AngularJS aşağıdaki şeyleri kullanır -

Dosyaları ve kitaplıkları yüklemek için Bower'ı kullanır
Angular uygulama yapısı için denetleyicileri ve hizmetleri kullanır
Farklı HTML sayfaları oluşturur
AngularJS uygulaması için yönlendirme ve hizmetleri işlemek için ngRoute modülünü kullanır
Bir uygulamayı çekici hale getirmek için Bootstrap kullanır

Açısal Uygulamamızı Kurmak

Node.js arka ucu ve AngularJS ön ucu olan basit bir uygulama oluşturalım. Angular uygulamamız için, isteyeceğiz -

İki farklı sayfa (Ev, Öğrenci)
Her biri için farklı bir açısal denetleyici
Sayfaları değiştirirken sayfa yenileme yok

Bower ve Bileşenleri Çekme

Bootstrap ve angular gibi uygulamamız için belirli dosyalara ihtiyacımız olacak. Bower'a bu bileşenleri bizim için getirmesini söyleyeceğiz.

Öncelikle, komut terminalinizde aşağıdaki komutu uygulayarak makinenize bower kurun -

npm install -g bower

Bu, bower'ı kuracak ve onu sisteminizde küresel olarak erişilebilir kılacaktır. Şimdi .bowerrc ve bower.json dosyalarını kök klasörünüzün altına yerleştirin. Bizim durumumuzdamean-demo. Her iki dosyanın içeriği de aşağıdaki gibidir -

.bowerrc - Bu, Bower'a dosyalarımızı nereye koyacağını söyleyecek -

{
   "directory": "public/libs"
}

bower.json - Bu package.json'a benzer ve Bower'a hangi paketlerin gerekli olduğunu söyleyecektir.

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

Ardından, aşağıdaki komutu kullanarak Bower bileşenlerini kurun. Bower'ın public / libs altındaki tüm dosyaları çektiğini görebilirsiniz .

$ bower install

Dizin yapımız aşağıdaki gibi olacaktır -

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

Açısal Denetleyiciler

Denetleyicimiz (public / js / controllers / MainCtrl.js) aşağıdaki gibidir -

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

Controller public / js / controllers / StudentCtrl.js aşağıdaki gibidir -

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

Açısal Yollar

Rota dosyamız (public / js / appRoutes.js) aşağıdaki gibidir -

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

Artık denetleyicilerimiz ve rotalarımız olduğuna göre, hepsini birleştirip bu modülleri ana public / js / app.js'mize aşağıdaki gibi enjekte edeceğiz -

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

Dosyayı görüntüle

Angular, index.html dosyasındaki <div ng-view> </div> 'e enjekte edilebilen şablon dosyasını kullanır. Ng-view direktifi, konfigürasyona bağlı olarak karşılık gelen bir görünümün (HTML veya ng-şablon görünümü) yerleştirilebileceği bir yer tutucu oluşturur. Açısal görünümler hakkında daha fazla bilgi için bu bağlantıyı ziyaret edin .

Yönlendirmeye hazır olduğunuzda, daha küçük şablon dosyaları oluşturun ve bunları index.html dosyasına enjekte edin . İndex.html dosyasını kod parçacığı aşağıdaki olacak -

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

Çalışan Uygulama

Yürütme

Bu uygulama için kaynak kodunu bu bağlantıdan indirebilirsiniz . Zip dosyasını indirin; sisteminize çıkartın. Terminali açın ve npm modül bağımlılıklarını kurmak için aşağıdaki komutu çalıştırın.

$ cd mean-demo
$ npm install

Sonra aşağıdaki komutu çalıştırın -

$ node start

Aşağıdaki resimde gösterildiği gibi bir onay alacaksınız -

Şimdi tarayıcıya gidin ve yazın http://localhost:3000. Sayfayı aşağıdaki resimde gösterildiği gibi alacaksınız -

Öğrenciler bağlantısına tıklayın, aşağıdaki ekranı göreceksiniz -

Angular ön ucumuz şablon dosyasını kullanacak ve onu index.html dosyamızdaki <div ng-view> </div> içine enjekte edecektir . Bunu bir sayfa yenilemeden yapacaktır.