AngularJS_AngularJS を使用してシングルページアプリケーションを作成するためのプログラミングガイドライン-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJS_AngularJS を使用してシングルページアプリケーションを作成するためのプログラミングガイドライン

May 16, 2016 pm 03:53 PM

angularjs

概要

最近、単一ページのアプリの人気が高まっています。シングルページアプリケーションの動作をエミュレートする Web サイトは、モバイル/タブレットアプリケーションのような感覚を提供できます。 Angular を使用すると、このようなアプリケーションを簡単に作成できます
簡単なアプリケーション

ホーム、概要、お問い合わせのページを含む簡単なアプリを作成します。 Angular はこれよりも複雑なアプリケーションを作成するように設計されていますが、このチュートリアルでは、大規模なプロジェクトで必要となる多くの概念を示します。
目標

シングルページアプリケーション
更新ページの変更はありません
各ページには異なるデータが含まれています

上記の機能は Javascript と Ajax を使用して実現できますが、このアプリケーションでは Angular を使用すると扱いやすくなります。
ドキュメントの構造

- script.js
- ページ
----- home.html
-----about.html
----- contact.html

HTML ページ
この部分は比較的単純です。 Bootstrap と Font Awesome を使用します。 Index.html ファイルを開き、ナビゲーションバーを使用して単純なレイアウトを追加します。

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

ログイン後にコピー

ページのハイパーリンクでは「#」を使用します。実際に about.html と contact.html にリンクしているとブラウザに思われたくないのです。

Angular アプリケーション
モデルとコントローラー
この時点で、アプリケーションをセットアップする準備が整いました。最初に Angular モデルとコントローラーを作成しましょう。モデルとコントローラーの詳細については、ドキュメントを参照してください。

まず、JavaScript でモデルとコントローラーを作成する必要があります。この操作を script.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!';
});

ログイン後にコピー

次に、モデルとコントローラーを HTML ページに追加して、Angular がアプリケーションをブートストラップする方法を認識できるようにします。機能が動作することをテストするために、作成した $scope.message という変数の値も表示します。

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

ログイン後にコピー

メインの div レイヤーで、作成したメッセージが表示されます。モデルとコントローラーがセットアップされ、Angular が適切に実行されるようになったので、このレイヤーを使用してさまざまなページを表示し始めます。

ページをメインレイアウトに挿入します

ng-view は、現在のルート (/home、/about、または /contact) のテンプレートを含めるために使用される角度ディレクティブです。特定のルートに基づいてファイルを取得し、それをメインレイアウト (インデックス) に配置します。 .html ).

サイトの div#main に ng-view コードを追加して、レンダリングするページを配置する場所を Angular に指示します。

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

ログイン後にコピー

ルートとビューを構成する

単一ページのアプリケーションを作成しており、ページを更新したくないため、Angular ルーティング機能を使用します。

Angular ファイルを見てアプリに追加してみましょう。 Angular で $routeProvider を使用してルーティングを処理します。このように、Angular は新しいファイルを取得してレイアウトに挿入することで、すべてのマジックリクエストを処理します。

AngularJS 1.2 とルーティング

バージョン 1.1.6 以降、ngRoute モデルは Angular に含まれなくなりました。ドキュメントの先頭でモデルを宣言してモデルを使用する必要があります。このチュートリアルは 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.';
});

ログイン後にコピー

これで、$routeProvider を通じてルートを定義しました。設定を通じて、指定したルート、テンプレートファイル、さらにはコントローラーを使用できることがわかります。このアプローチでは、アプリケーションの各部分で Angular コントローラーと独自のビューが使用されます。

クリーン URL: Angular はデフォルトで URL にシャープ記号を挿入します。これを回避するには、$locationProvider を使用して HTML History API を有効にする必要があります。これにより、ハッシュが削除され、美しい URL が作成されます。ホームページは home.html ファイルをプルします。About ページと contact ページは関連ファイルをプルします。アプリを表示してナビゲーションをクリックすると、コンテンツが希望どおりに変更されます。

このチュートリアルを完了するには、挿入されるページを定義するだけで済みます。また、各ページに、関連付けられたコントローラーからのメッセージが表示されるようにします。

ローカルで実行: Angular ルーティングは、設定した環境でのみ機能します。 http://localhost または何らかの種類の環境を使用していることを確認する必要があります。そうでない場合、angular はクロスドメインリクエストが HTTP をサポートしていると表示します。

Angular アプリケーションのアニメーション

すべてのルーティングが完了したら、サイトでの操作を開始してアニメーションを追加できます。これを行うには、後で CSS を使用できる ngAnimate モジュールを使用する必要があります。アニメーションでビューを切り替える
シングルページアプリでの SEO

理想的には、この手法はユーザーがログインしているアプリケーションで使用できます。たとえば、読者アカウント、Facebook ログインページ、ブログの CMS ページなど、特定のユーザーにプライベートなページがインデックスに登録されることは絶対に望ましくありません。

アプリの SEO を実行したい場合、JS を使用してページを構築するアプリやサイトで SEO を効果的にするにはどうすればよいでしょうか。コンテンツはブラウザーによって動的に構築されるため、検索エンジンはこれらのアプリの処理に苦労します。、クローラーには見えません。

アプリを SEO フレンドリーにしましょう

JS のシングルページアプリケーションを SEO に適したものにするテクニックには定期的なメンテナンスが必要です。Google の推奨事項によると、その仕組みの概要は次のとおりです。