JavaScriptフレームワーク

技術系
  • JQuery
    ※JQueryなどはUIライブラリといわれることもあります。
  • Angular JS
  • React
  • Backbone.js
  • Vue.js

フレームワークを動かす

Angular JSを使って、HTMLの表示を動的に変えてみましょう。
Angular JSはGoogleが開発したJavaScriptフレームワークです。

どうやって使う①

フレームワークをダウンロードして、コードを追加する

どうやって使う②

ネット上に公開されているURLを使う方法もあります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

このサイトにあるファイルを読み込んで、フレームワークを使う。

リファレンス:
https://angularjs.org
https://angularjs.org/tutorial
https://docs.angularjs.org/api

サンプルangular.html

テキストフィールドに文字を入力すると、ページの中にその文字が表示されていくプログラムを作ってみましょう。

<!DOCTYPE html>
<html ng-app>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!- ❷どうやって持ってくる? -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
	<body>
		<!- ❸どうやって使う? -->
		<input type="text" ng-model="yourName" placeholder="名前を入力してください">
		<h1>こんにちは、{{yourName}}さん!</h1>
	</body>
</html>

出力結果:

コメント

タイトルとURLをコピーしました