ウェブサイトの再構成——軽量化のウェブサイトアーキテクチャ設計三、angglar retify

2273 ワード

ブラウザアーキテクチャ設計アングラーサイト再構築ゼロからプログラミングを学びます。

興味深いことに、angglarjsは先端の開発を簡単にすることができますが、サーバーではなく計算をデスクトップに置くことができます.ある意味、システムの負担を減らすことができます.
注意すべきなのは、ここで私達が使うのはテンプレートだけです.
アングラーJS
AnglarJSはJavaScriptライブラリで、Googleによってメンテナンスされ、単一ページアプリケーションの実行に協力します.MVCモード(MVC)機能を通してブラウザベースのアプリケーションを強化し、開発とテストを容易にすることを目的としています.ライブラリは、カスタマイズ(ラベルの属性)を付加したHTMLを読み込み、これらのカスタム属性における命令に従い、ページ中の入力または出力をJavaScript変数によって表されるモデルと結合します.これらのJavaScript変数の値は、手動で設定したり、静的または動的JSONリソースから取得したりすることができる.
Anglarjsをインストールします.ここはまだnodejsに統合されていませんので、これを使います.

     <script src="js/angular.min.js"></script>

ng-apは、AnglarがDOMのどの部分を管理するべきかを、ng-apを使用してAnglarの境界を説明するために、ng-ap命令を使用する.
DOMContentLoadedイベントのトリガ時にangglar.jsスクリプトを実行し、実行後にng-apコマンドを含むラベルを探します.このラベルはAnglarJSアプリケーションの作用領域を定義しています.htmlにng-ap属性を追加すると、これまでのところAnglarJSスクリプトのスコープです.開発者はまた、divにng-apを追加するなど、局所的にng-apコマンドを使用することができ、AnglarJSスクリプトはこのdivのみで実行される.
ng-controllerはコントローラを説明し、オブジェクトまたは基本データを$scopeオブジェクトに設定します.
アングラーJson

   <!doctype html>
    <html lang="en" ng-app="blogposts">
    <head>
      <meta charset="utf-8">
      <title>Phodal's New Homepage</title>
      <script src="js/angular.min.js"></script>
      <script src="js/app.js"></script>
    </head>
    <body ng-controller="postlistCtrl">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="span10">
            <ul class="posts">
              {{lengths}}
              <article ng-repeat="post in posts">
                <h1>{{post.title}}</h1>
                <p>{{post.description}}</p>
              </article>
            </ul>
          </div>
        </div>
      </div>
    </body>
    </html>

ここで使っているのは公式サイトの例で、必要な機能が加えられています.

	var blogposts = angular.module('blogposts', []);
	blogposts.controller('postlistCtrl', function($scope, $http) {
	    $http.get('data/posts.json').success(function(data) {
	        $scope.posts = data;
	    });
	});

chrome consoneで自動化操作ホームページを実現します.