AngularJS導入+phpでプレビュー機能付きエディタ

f:id:tsumayouzi:20150312142740j:plain

導入 DLしなくてもjQueryみたいにCDNからひっぱってこれる

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



フォーム部分 ng-がangularJS的なネームルールっぽい。 input部分にng-model="名前" 

をつけると、
2重かっこで出力してくれる。便利。
<span style="color: #62c7c9">{{名前}}</span>
<div ng-app>
<p class="editor"><input ng-model="campName" type="text" /></p>
<p class="preview">{{campName}}</p>
</div>

ベースとなるようなHTMLまとめ

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p class="editor"><input ng-model="campName" type="text" /></p>
<p class="preview">{{campName}}</p>
</div>
</body>