December 23, 2013

HamlでAngular.js

この記事はAngularJS Startup Advent Calendar 2013の23日目の記事です．

いきなりですが，参加させていただきました．文脈が全然違ったらすいません．とてもシンプルな記事です．

最近，Angular.jsを触っている．ただ，もう今更HTMLを0から打つのはやってられないと思う．Hamlで手軽に書く．

インストール

$ gem install haml

index.haml

!!! 5
%html{"ng-app" => true}
  %head
    %title Sample
    %meta{charset: 'utf-8'}
    %script{src: "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"}

  %body
    %input{type: "text", "ng-model" => "name"}
    %p Hello, {{ name }}

htmlに整形

$ haml index.haml index.html

index.html

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>Sample</title>
    <meta charset='utf-8'>
    <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js'></script>
  </head>
  <body>
    <input ng-model='name' type='text'>
    <p>Hello, {{ name }}</p>
  </body>
</html>

以上．