ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJS を使用してシングルページ アプリケーションを作成するためのプログラミング ガイドライン
概要
最近、単一ページのアプリの人気が高まっています。シングルページ アプリケーションの動作をエミュレートする Web サイトは、モバイル/タブレット アプリケーションのような感覚を提供できます。 Angular を使用すると、このようなアプリケーションを簡単に作成できます
簡単なアプリケーション
ホーム、概要、お問い合わせのページを含む簡単なアプリを作成します。 Angular はこれよりも複雑なアプリケーションを作成するように設計されていますが、このチュートリアルでは、大規模なプロジェクトで必要となる多くの概念を示します。
目標
上記の機能は Javascript と Ajax を使用して実現できますが、このアプリケーションでは Angular を使用すると扱いやすくなります。
ドキュメントの構造
HTML ページ
この部分は比較的単純です。 Bootstrap と Font Awesome を使用します。 Index.html ファイルを開き、ナビゲーション バーを使用して単純なレイアウトを追加します。
<!-- 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>ページのハイパーリンクでは「#」を使用します。実際に 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 という変数の値も表示します。
<!-- 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>メインの div レイヤーで、作成したメッセージが表示されます。モデルとコントローラーがセットアップされ、Angular が適切に実行されるようになったので、このレイヤーを使用してさまざまなページを表示し始めます。
ng-view は、現在のルート (/home、/about、または /contact) のテンプレートを含めるために使用される角度ディレクティブです。特定のルートに基づいてファイルを取得し、それをメイン レイアウト (インデックス) に配置します。 .html ).
サイトの div#main に ng-view コードを追加して、レンダリングするページを配置する場所を Angular に指示します。
<!-- index.html --> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> <div ng-view></div> </div> ...
単一ページのアプリケーションを作成しており、ページを更新したくないため、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 コントローラーと独自のビューが使用されます。
このチュートリアルを完了するには、挿入されるページを定義するだけで済みます。また、各ページに、関連付けられたコントローラーからのメッセージが表示されるようにします。
ローカルで実行: Angular ルーティングは、設定した環境でのみ機能します。 http://localhost または何らかの種類の環境を使用していることを確認する必要があります。そうでない場合、angular はクロスドメイン リクエストが HTTP をサポートしていると表示します。
Angular アプリケーションのアニメーション
すべてのルーティングが完了したら、サイトでの操作を開始してアニメーションを追加できます。これを行うには、後で CSS を使用できる ngAnimate モジュールを使用する必要があります。アニメーションでビューを切り替える
シングルページアプリでの SEO
理想的には、この手法はユーザーがログインしているアプリケーションで使用できます。たとえば、読者アカウント、Facebook ログイン ページ、ブログの CMS ページなど、特定のユーザーにプライベートなページがインデックスに登録されることは絶対に望ましくありません。
アプリの SEO を実行したい場合、JS を使用してページを構築するアプリやサイトで SEO を効果的にするにはどうすればよいでしょうか。コンテンツはブラウザーによって動的に構築されるため、検索エンジンはこれらのアプリの処理に苦労します。 、クローラーには見えません。
アプリを SEO フレンドリーにしましょう
JS のシングル ページ アプリケーションを SEO に適したものにするテクニックには定期的なメンテナンスが必要です。Google の推奨事項によると、その仕組みの概要は次のとおりです。
このプロセスの詳細については、Google の AJAX クローラー と HTML スナップショットの作成 に関するガイドを参照してください。