More than 5 years have passed since last update.

CodePenでangularJS

Last updated at 2015-01-08Posted at 2015-01-08

CodePenとは

web上でhtmlとかcssとかjsを書けるサービス。
jsの外部ライブラリを使えたり、Sassが使えたりで結構便利。
http://codepen.io/

jsのフレームワークです。詳細は割愛。

jsの設定画面で「External JS File or Another Pen」に
angularのパスを指定する。
パスが分からない場合は、cdnjs.comのリンクから検索できるので便利。
今回はcdnjs.comで検索してangular.min.jsの1.3.8を設定。

html

<html ng-app="myApp">
  <body>
    <div ng-controller="myCtrl">
      {{hoge}}
    </div>
  </body>
</html>

javascript

myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope){
  $scope.hoge = "hello World!!";
});

こんな感じに画面下部の真っ白領域に「hello World!!」と出れば成功です。
おめでとう。