MEAN.JS - Tworzenie pojedynczej strony za pomocą Angulara

W stosie MEAN, Angular jest znany jako drugi framework JavaScript, który umożliwia tworzenie aplikacji jednostronicowych w czysty sposób kontrolera widoku modelu (MVC).

AngularJS jako front-end Framework wykorzystuje następujące rzeczy -

Używa Bower do instalowania plików i bibliotek
Używa kontrolerów i usług dla struktury aplikacji Angular
Tworzy różne strony HTML
Wykorzystuje moduł ngRoute do obsługi routingu i usług dla aplikacji AngularJS
Używa Bootstrap, aby uatrakcyjnić aplikację

Konfigurowanie naszej aplikacji kątowej

Zbudujmy prostą aplikację, która ma zaplecze Node.js i nakładkę AngularJS. Do naszej aplikacji Angular będziemy chcieli -

Dwie różne strony (domowa, studencka)
Dla każdego inny kontroler kątowy
Brak odświeżania strony podczas przełączania stron

Bower i wciąganie komponentów

Będziemy potrzebować pewnych plików dla naszej aplikacji, takich jak bootstrap i angular. Powiemy Bowerowi, żeby przyniósł nam te komponenty.

Najpierw zainstaluj bower na swoim komputerze, wykonując poniższe polecenie na terminalu poleceń -

npm install -g bower

Spowoduje to zainstalowanie bower i udostępnienie go globalnie w systemie. Teraz umieść pliki .bowerrc i bower.json w swoim katalogu głównym. W naszym przypadku tak jestmean-demo. Zawartość obu plików jest jak poniżej -

.bowerrc - To powie Bowerowi, gdzie umieścić nasze pliki -

{
   "directory": "public/libs"
}

bower.json - Jest to podobne do pliku package.json i powie Bowerowi, które pakiety są potrzebne.

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

Następnie zainstaluj komponenty Bower za pomocą poniższego polecenia. Możesz zobaczyć, jak bower wyciąga wszystkie pliki w public / libs .

$ bower install

Nasza struktura katalogów wyglądałaby następująco -

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

Kontrolery kątowe

Nasz kontroler (public / js / controllers / MainCtrl.js) jest następujący -

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

Kontroler public / js / controllers / StudentCtrl.js wygląda następująco -

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

Trasy kątowe

Nasz plik tras (public / js / appRoutes.js) wygląda następująco -

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

Teraz, gdy mamy nasze kontrolery i trasy, połączymy je wszystkie i wstrzykniemy te moduły do naszego głównego publicznego / js / app.js w następujący sposób -

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

Zobaczyć plik

Angular używa pliku szablonu, który można wstawić do <div ng-view> </div> w pliku index.html. Dyrektywa ng-view tworzy element zastępczy, w którym można umieścić odpowiedni widok (widok HTML lub szablon ng-template) na podstawie konfiguracji. Aby uzyskać więcej informacji na temat widoków kątowych, odwiedź ten link .

Kiedy będziesz gotowy do routingu, utwórz mniejsze pliki szablonów i wstaw je do pliku index.html . Plik index.html będzie zawierał następujący fragment kodu -

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

Uruchomiona aplikacja

Wykonanie

Możesz pobrać kod źródłowy tej aplikacji w tym linku . Pobierz plik zip; wyodrębnij go w swoim systemie. Otwórz terminal i uruchom poniższe polecenie, aby zainstalować zależności modułów npm.