ホームページ > 記事 > ウェブフロントエンド > AngularJs を使用してフロントエンド フレームワークを構築するにはどうすればよいですか? angularjsでのフロントエンドフレームワーク構築の詳しい説明
AngularJs を使用してフロントエンド フレームワークを構築するにはどうすればよいですか? angularjsでのフロントエンドフレームワーク構築の詳しい説明
- 寻∝梦オリジナル
- 2018-09-08 15:38:182665ブラウズ
この記事では、angularjsのフロントエンドフレームワークの構築の概要と、プロジェクトの開始方法について、ステップごとに説明しながら説明していますので、一緒に読みましょう
。
angularjs についての序文:
前に書きましたが、私はインターンシップから卒業まで、現在の会社で半年以上働いており、会社のプロジェクトに触れ始めたときは慣れていました。バックエンドについては知識がありますが、フロントエンドは angularjs を使用していますが、最初から今に至るまで、私は内部のコンテンツを書くのに熟練していると考えられます。しかし、全体としてはまだ非常に混乱しています。たまたま最近、スキルを練習するために自分のプロジェクトがあったので、練習するフロントエンドとして angularjs を選択しました。これは、過去に学んだことの要約とみなすこともできます。六ヶ月。私はバックエンドを書いているので、今はフロントエンドのプロジェクトを一から練習しています。手間がかかるかもしれませんが、徐々に進めてください。これは、この会社での私の経験の要約とみなすこともできます。
1. angularjs については
笑、実際には Baidu で入手できるので、ここでは詳しく説明しません。私たちは皆、巨人の肩の上に立っています。
2. AngularJs アプリのシードを取得します
私のような初心者にとって、初めて angularjs を開始するときは、プロジェクトのディレクトリやファイルなどを自分で書く能力がありません。そこで、github で torrent を見つけました。
アドレス: https://github.com/glitchtank/angular-seed-master
git をインストールしてローカルにクローンを作成する必要があります
git clone https://github.com/glitchtank/angular-seed-master
これについて概要については、次の README.md を参照してください。ここでは紹介しません。フロントエンドの知識を持つ学生は、間違いなく私が話していることをナンセンスだと思うでしょう。
3. ノードをインストールしてプロジェクトを開始します
nodejs のダウンロード アドレス: https://nodejs.org/en/download/ ご自身のオペレーティング システムのバージョンに従ってダウンロードしてインストールします
windows cmd を入力し、複製したばかりのプロジェクトを入力します。コマンドノード scripts/web-server.js を実行します。
ブラウザに http://localhost:8000/app/index.html と入力すると、シンプルなページが表示され、プロジェクトが正常に開始されます。 
注:
1. ポート 8000 がすでに他のプログラムによって占有されている場合は、web-server.js のdefault_port を変更して、node scripts/web を実行します。 -server.js コマンドで、スクリプトを入力してからノード web-server.js を実行し、ブラウザに http://localhost:8000/app/index.html と入力すると、404 が報告されます。
img フォルダーには、使用する必要のあるいくつかの画像が保存されます。
controller.js コントローラー
Filter.js 自分たちで作成したいくつかのフィルター
Service.js バックエンド API を呼び出すための接続は、通常ここに配置されます
5. 最初の小さな例
プロジェクトの下に次の内容の新しい HTML ページ shopCart.html を作成します
<!DOCTYPE html><html ng-app="myApp"><head lang="en">
<meta charset="UTF-8">
<title>购物车例子</title></head><body ng-controller="CartController"><h1>your order</h1><p ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.count">
<!--angularjs内置过滤器currency,实现美元格式化-->
<span>{{item.price |currency}}</span>
<span>{{item.price*item.count |currency}}</span></p><script src="lib/angular/angular.js"></script><script src="js/app.js"></script><script src="js/controllers.js"></script><script src="js/services.js"></script><script src="js/filters.js"></script><script src="js/directives.js"></script></body></html>js/controller.js ファイルに
function CartController($scope){
$scope.items=[
{tile:'pea',count:8,price:3.00},{tile:'apple',count:9,price:4.00}
]
} を追加してプロジェクトを開始します
ご覧のとおり、入力ボックスに数量を自由に入力すると、その後の計算結果がそれに応じて変わります。これはangularjsのデータバインディングです。 jQueryよりもずっと便利です。 
AngularJS ユーザー マニュアル
にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。以上がAngularJs を使用してフロントエンド フレームワークを構築するにはどうすればよいですか? angularjsでのフロントエンドフレームワーク構築の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。