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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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 ファイルを開き、ナビゲーションバーを使用して単純なレイアウトを追加します。

<!-- 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 コントローラーと独自のビューが使用されます。

クリーン 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 の推奨事項によると、その仕組みの概要は次のとおりです。

クローラーはフレンドリ URL (http://scotch.io/seofriendly#key=value) を見つけます
その後、クローラーはこの URL に対応するコンテンツをサーバーに要求します (特別に変更された方法で)
Web サーバーは HTML スナップショットを使用してコンテンツを返します
HTML スナップショットはクローラーによって処理されます
その後、検索結果に元の URL が表示されます

このプロセスの詳細については、Google の AJAX クローラーと HTML スナップショットの作成に関するガイドを参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles