Getting Started - AngularJS

参考リンク

• hiravgandhi/angularjs-rails
• AngularJS: API Reference
• 今、AngularJSというフレームワークがヤバい - (ﾟ∀ﾟ)o彡 sasata299's blog

セットアップ

Gemfile

gem 'angularjs-rails'

bundle install

app/assets/javascripts/application.js

//= require angular

app/views/layouts/application.html.haml

%html{ 'ng-app' => true }

app/views/posts/_form.html.haml

• Angular.jsでvalue=初期値を使いたいときは、ng-initを使いましょう - コロタエンヂニアリング

%div
  %label Name:
  %input{ "ng-model" => "yourName", "ng-init" => "yourName='You'", placeholder: "Enter a name here", type: "text" }
  %h1 Hello {{yourName}}!

• AngularJS: ngInit

The only appropriate use of ngInit for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

---

コントローラ

• 文字列をクリックする度、末尾に「Hello」を追加する

function firstCtrl($scope){
  $scope.hello = "Hello Angular!";

  $scope.like_countup = function() {
    $scope.hello = $scope.hello + " Hello";
  };
};

%div{ "ng-controller" => "firstCtrl" }
  %p{ "ng-click" => "like_countup()" } {{hello}}

• カウントアップ

function likeCtrl($scope){
  $scope.like_count = 1;

  $scope.like_countup = function() {
    $scope.like_count += 1;
  };
};

%p{ "ng-controller" => "likeCtrl" }
  %button{ type: 'button', "ng-click" => "like_countup()" } いいね
  %span x{{like_count}}
  %br