Garis panduan pengaturcaraan untuk mencipta aplikasi satu halaman menggunakan AngularJS

Ikhtisar

Apl halaman tunggal semakin popular pada masa kini. Mana-mana tapak web yang meniru gelagat aplikasi satu halaman boleh memberikan rasa aplikasi mudah alih/tablet. Angular boleh membantu kami mencipta aplikasi sedemikian dengan mudah
Aplikasi mudah

Kami akan mencipta apl ringkas yang melibatkan halaman rumah, tentang dan hubungi kami. Walaupun Angular direka untuk mencipta aplikasi yang lebih kompleks daripada ini, tutorial ini menunjukkan banyak konsep yang kami perlukan dalam projek yang lebih besar.
Matlamat

Aplikasi satu halaman
Tiada perubahan muat semula halaman
Setiap halaman mengandungi data yang berbeza

Walaupun fungsi di atas boleh dicapai menggunakan Javascript dan Ajax, dalam aplikasi kami, Angular boleh memudahkan kami mengendalikannya.
Struktur Dokumen

- script.js
- halaman
----- home.html
----- tentang.html
----- contact.html

Halaman HTML
Bahagian ini agak mudah. Kami menggunakan Bootstrap dan Font Awesome. Buka fail index.html anda, dan kemudian kami menggunakan bar navigasi untuk menambah reka letak yang mudah.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 <!-- SCROLLS -->
 <!-- load bootstrap and fontawesome via CDN -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
 
 <!-- SPELLS -->
 <!-- load angular via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 <script src="script.js"></script>
</head>
<body>
 
  <!-- HEADER AND NAVBAR -->
  <header>
    <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Angular Routing Example</a>
      </div>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>
    </div>
    </nav>
  </header>
 
  <!-- MAIN CONTENT AND INJECTED VIEWS -->
  <div id="main">
 
    <!-- angular templating -->
    <!-- this is where content will be injected -->
 
  </div>
 
  <!-- FOOTER -->
  <footer class="text-center">
    View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a>
  </footer>
 
</body>
</html>

Salin selepas log masuk

Dalam hiperpautan halaman, kami menggunakan "#". Kami tidak mahu penyemak imbas berfikir bahawa kami sebenarnya memaut ke about.html dan contact.html.

Aplikasi Sudut
Model dan Pengawal
Pada ketika ini kami bersedia untuk menyediakan aplikasi kami. Mari buat model sudut dan pengawal terlebih dahulu. Mengenai model dan pengawal, lihat dokumentasi untuk mendapatkan maklumat lanjut.

Pertama, kami perlu mencipta model dan pengawal kami dalam javascript, kami meletakkan operasi ini dalam skrip.js:

// script.js
 
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);
 
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
 
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!';
});

Salin selepas log masuk

Seterusnya mari tambah model dan pengawal pada halaman HTML kami supaya Angular tahu cara untuk bootstrap aplikasi kami. Untuk menguji kefungsian berfungsi, kami juga akan memaparkan nilai pembolehubah yang kami cipta dipanggil $scope.message.

<!-- index.html -->
<!DOCTYPE html>
 
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
 <!-- SCROLLS -->
 <!-- load bootstrap and fontawesome via CDN -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
 
 <!-- SPELLS -->
 <!-- load angular via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
 <script src="script.js"></script>
</head>
 
<!-- define angular controller -->
<body ng-controller="mainController">
 
...
 
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
  {{ message }}
 
  <!-- angular templating -->
  <!-- this is where content will be injected -->
</div>

Salin selepas log masuk

Dalam lapisan div utama, kini kita boleh melihat mesej yang kita buat. Sekarang model dan pengawal kami disediakan dan Angular berjalan dengan betul, kami akan mula menggunakan lapisan ini untuk memaparkan halaman yang berbeza.

Suntikan halaman ke dalam reka letak utama

ng-view ialah arahan sudut yang digunakan untuk memasukkan templat laluan semasa (/home, /about, atau /contact) Ia akan mendapatkan fail berdasarkan laluan tertentu dan meletakkannya ke dalam reka letak utama (index .html ).

Kami akan menambah kod ng-view pada tapak dalam div#main untuk memberitahu Angular di mana hendak meletakkan halaman yang kami paparkan.

<!-- index.html -->
...
 
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
 
  <!-- angular templating -->
  <!-- this is where content will be injected -->
  <div ng-view></div>
 
</div>
 
...

Salin selepas log masuk

Konfigurasikan laluan dan pandangan

Memandangkan kami mencipta aplikasi satu halaman dan tidak mahu halaman itu dimuat semula, kami akan menggunakan keupayaan penghalaan sudut.

Mari kita lihat fail Angular kami dan tambahkannya pada apl kami. Kami akan menggunakan $routeProvider dalam Angular untuk mengendalikan penghalaan kami. Dengan cara ini, Angular akan mengendalikan semua permintaan ajaib dengan mengambil fail baharu dan menyuntiknya ke dalam reka letak kami.

AngularJS 1.2 dan Penghalaan

Selepas versi 1.1.6, model ngRoute tidak lagi disertakan dalam Angular. Anda perlu menggunakan model dengan mengisytiharkannya pada permulaan dokumen. Tutorial ini telah dikemas kini untuk AngularJS1.2:

// script.js
 
// create the module and name it scotchApp
  // also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
 
// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider
 
    // route for the home page
    .when('/', {
      templateUrl : 'pages/home.html',
      controller : 'mainController'
    })
 
    // route for the about page
    .when('/about', {
      templateUrl : 'pages/about.html',
      controller : 'aboutController'
    })
 
    // route for the contact page
    .when('/contact', {
      templateUrl : 'pages/contact.html',
      controller : 'contactController'
    });
});
 
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!';
});
 
scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});
 
scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us! JK. This is just a demo.';
});

Salin selepas log masuk

Kini, kami telah menentukan laluan kami melalui $routeProvider. Melalui konfigurasi, anda akan mendapati bahawa anda boleh menggunakan laluan tertentu, fail templat dan juga pengawal. Dengan pendekatan ini, setiap bahagian aplikasi kami menggunakan pengawal Sudut dan pandangannya sendiri.

URL Bersih: Angular akan meletakkan tanda paun ke dalam URL secara lalai. Untuk mengelakkan ini, kami perlu mendayakan API Sejarah HTML menggunakan $locationProvider Ia akan mengalih keluar cincang dan mencipta URL yang cantik. Halaman utama kami akan menarik fail home.html dan halaman kenalan akan menarik fail yang berkaitan Sekarang jika kami melihat apl kami dan mengklik pada navigasi, kandungan kami akan berubah mengikut kehendak kami.

Untuk melengkapkan tutorial ini, kami hanya perlu mentakrifkan halaman yang akan disuntik Kami juga akan membuat setiap daripadanya memaparkan mesej daripada pengawal yang dikaitkan dengannya.

Jalankan secara setempat: Penghalaan sudut hanya akan berfungsi dalam persekitaran yang anda tetapkan untuknya. Anda perlu memastikan anda menggunakan http://localhost atau beberapa jenis persekitaran Jika tidak sudut akan mengatakan bahawa permintaan merentas domain menyokong HTTP.

Animasi untuk aplikasi Sudut

Setelah anda menyelesaikan semua penghalaan, anda boleh mula bermain dengan tapak anda dan menambahkan animasi padanya, anda perlu menggunakan modul ngAnimate yang disediakan oleh angular Kemudian anda boleh Gunakan CSS animasi untuk menukar paparan secara animasi
SEO pada Apl Halaman Tunggal

Sebaik-baiknya, teknik ini mungkin digunakan dalam aplikasi di mana pengguna log masuk. Anda sememangnya tidak mahu halaman yang peribadi kepada pengguna tertentu diindeks oleh enjin carian Contohnya, anda tidak mahu akaun pembaca anda, halaman log masuk Facebook atau halaman CMS blog diindeks.

Jika anda mahu melakukan SEO untuk apl anda, maka bagaimanakah anda menjadikan SEO berkesan pada apl/tapak yang menggunakan js untuk membina halaman Enjin carian sukar memproses apl ini kerana kandungannya dibina secara dinamik oleh penyemak imbas? , dan Tidak kelihatan kepada perangkak.

Jadikan apl anda mesra SEO

Teknik yang menjadikan aplikasi halaman tunggal js mesra SEO memerlukan penyelenggaraan biasa Menurut syor Google rasmi, anda perlu membuat gambar HTML Gambaran keseluruhan cara ia berfungsi adalah seperti berikut:

Perangkak akan menemui URL mesra (http://scotch.io/seofriendly#key=value)
Kemudian perangkak akan meminta pelayan untuk kandungan yang sepadan dengan URL ini (dengan cara yang diubah suai khas)
Pelayan web akan menggunakan petikan HTML untuk mengembalikan kandungan
Syot kilat HTML akan diproses oleh perangkak
Kemudian hasil carian akan menunjukkan URL asal

Untuk mendapatkan maklumat lanjut tentang proses ini, lihat AJAX Crawler Google dan panduan mereka tentang Membuat Syot Kilat HTML.