この記事は、AngularJでの開発にまだ遭遇しておらず、このフレームワークの基本原則をすばやく学習したい人に役立ちます。 お急ぎの場合は、Google開発者が長い間お世話になり、すばらしいチュートリアルを作成しました 。
作成するものをすぐに確認できるように、このデモをここに残します 。
それでは始めましょう。
Ajaxリクエストを処理するため、プロジェクトをローカルサーバーに配置する必要があることを忘れないでください。 index.htmlを作成し、基本的なマークアップを記述します。これは、アプリケーションのすべてのページに共通になります。 すべてのライブラリーの接続については説明しません（結局、これは誰もが理解できることです）が、単にそれらをリストします。
-角度;
-角ルート;
最終的に、次のようになります。
<html lang="en" ng-app="phonecatApp"> <head> <meta charset="utf-8"> <!-- Template Title --> <title>PhoneCat App</title> <!-- Custom stylesheet --> <link href="style.css" rel="stylesheet"> </head> <body ng-controller="PhoneListCtrl"> <!-- ====== Menu Section ====== --> <section id="menu"> <div class="navbar" role="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="#/home">Home</a></li> <li><a href="#/about">Description</a></li> <li><a href="#/contact">Contact</a></li> </ul> </div> </section> <!-- ====== End Menu Section ====== --> <!-- ====== Ng-veiw Section ====== --> <section ng-view id="search"></section> <!-- ====== End Ng-veiw Section ====== --> <!-- Angular JS --> <script src="libs/angular.min.js"></script> <script src="libs/angular-route.min.js"></script> <!-- Custom JS --> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/main.js"></script> </body> </html>
上記のコードでは、 ng-app 、 ng-controller 、 ng-viewなど、馴染みのない属性に遭遇する場合があります 。 これらはすべてAngularJsディレクティブであり、それぞれに独自の特性があります。 したがって、たとえば、 ng-appはAngularにアプリケーションのルート要素を伝え、 ng-controllerはスコープの動作を割り当てます。 ng-viewディレクティブを使用すると、現在のアドレスでテンプレートを表示できます。 必要なテンプレートを作成しましょう：home.html、about.html、contact.html、phone-detail.html。
ここで、何らかの方法でページデータをindex.htmlに接続する必要があります。ここで、AngularJsの魔法が始まります。 controllers.jsファイルを開き、その中に以下を記述します。
var phonecatApp= angular.module('phonecatApp', ['ngRoute','ngAnimate']); phonecatApp.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/',{ templateUrl:"template/home.html", controller:"PhoneListCtrl" }) .when('/about',{ templateUrl:"template/about.html", controller:"AboutCtrl" }) .when('/contact',{ templateUrl:"template/contact.html", controller:"ContactCtrl" }) .when('/phones/:phoneId',{ templateUrl:"template/phone-detail.html", controller:"PhoneDetailCtrl" }) .otherwise({ redirectTo: '/' }); }]); phonecatApp.controller('PhoneListCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]); phonecatApp.controller('AboutCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]); phonecatApp.controller('ContactCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]); phonecatApp.controller('PhoneDetailCtrl',['$scope','$http','$location','$routeParams', function($scope,$http, $location, $routeParams){ }]);
行ごとに解析を行いましょう。 まず、「phonecatApp」と呼ばれる新しい角度モジュールを発表し、その依存関係を登録しました。 次に、アプリケーションの構成を構成します。ここで、テンプレートと各テンプレートに対応するコントローラーへのルート（リンク）を示すために$ routeProviderを使用します。 その後、上記のコントローラーを初期化します。 アクションの結果、ページでナビゲーションが開始されました。
先に進むと、電話に関する簡単な情報を含む配列を含むウェイクアップするphones.jsonファイルを作成する必要があります。 これは非常に時間がかかるタスクであるため、対応する配列と画像を含むすべてのファイルをこのリポジトリ （電話およびimgフォルダー）からダウンロードできます。これは、GoogleのAngularJsに関するチュートリアルの作成者によって提供されます。
そして、home.htmlを編集します。 このテンプレートには、入力フォーム（ページ要素の検索を実装するため）と、phones.jsonファイルから電話に関する情報を出力するループ（ng-repeatを使用して実装）が含まれている必要があります。
<div class="search-input"> <input type="text" placeholder="Search" ng-model="query"> </div> <div class="phone-wrap animation" ng-repeat="phone in phones | filter: query"> <div class="phone_img-wrap"> <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}"> </div> <h3>{{phone.name}}</h3> <div class="phone_text-wrap"> <p class="phone-text">{{phone.snippet}}</p> </div> <a class="btn-see" href="#/phones/{{phone.id}}"> <p>VIEW</p> </a> </div>
ng-modelディレクティブは、入力した文字をリアルタイムでクエリ変数に割り当てます。これにより、後でAngularJsのボックスに組み込まれたフィルターがループで表示される要素を比較し、不要な要素をすべて削除します（ng-repeat = "phone in Phone | filter：query"）。
しかし、これがすべて機能するためには、このhttp-requestを 'PhoneListCtrl'コントローラーに登録する必要があります。
$http.get('phones/phones.json').success(function(data,status,headers,config) { $scope.phones=data; });
アプリケーションはほぼ準備ができており、各電話の個別のページを作成するだけです。 これを行うには、次のhtttpリクエストを 'PhoneDetailCtrl'コントローラーに書き込みましょう。
$http.get('phones/'+$scope.phoneId+'.json').success(function(data){ $scope.phone=data; })
完全に準備するために、アプリケーションには電話の一意のページに関する情報のみが不足しているため、修正は非常に簡単です。 選択した位置の名前を表示しましょう：
<h1>{{phone.name}}</h1>
以上です！ あなたと私は、AngularJsで最初の単一ページアプリケーションを作成しました。