emberJs tutorial における、angularJs との違い

イシュー

• emberJsのチュートリアルを通して、angularJsとの違いについてみていく

参考

• emadurandal/emberjs-guides-japanese-translation · GitHub
  • チュートリアル
• Ember vs Angular - the best choice for your single page application -
• Angular.js vs Ember.js Star Rating Component Comparison – Wintellect DevCenter

angularJsとの違い

属性の指定方法

angular

<span ng-bind="name"></span>

• AngularJS Directive なんてこわくない（その１） - AngularJS Ninja
• Angularだとディレクティブで属性を定義する。ng-bindはディレクティブで定義されている

ember

<span {{bind-attr class="isCompleted:completed"}}></span>

• bind-attr ヘルパーを使用する

actionの指定方法

angular

<div ng-controller="DoubleCtrl">
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>

• コントローラーについて | AngularJS 1.2 日本語リファレンス | js STUDIO
• Angularのコントローラは、上位DOMのどこかにng-controllerを指定すれば、メソッド（dobule(num))はどこからでも呼べる

ember

<script type="text/x-handlebars" data-template-name="todos">
{{input type="text" id="new-todo" placeholder="What needs to be done?" 
              value=newTitle action="createTodo"}}
</script>

• emberの場合、コントローラの指定はテンプレートのdata-template-name属性に記載する。
• 上記の場合、テンプレート名にtodosを指定しているので、todos_controller.jsをCoCでバインドしてくれる。
• 上記inputヘルパーの場合、読み込んでいるコントローラの action 内で定義している、createTodoというメソッドを呼び出せる

<!--- ... additional lines truncated for brevity ... -->
{{#each itemController="todo"}}
  <li {{bind-attr class="isCompleted:completed"}}>
    {{input type="checkbox" checked=isCompleted class="toggle"}}
    <label>{{title}}</label><button class="destroy"></button>
  </li>
{{/each}}
<!--- ... additional lines truncated for brevity ... -->

• each ヘルパーのitemController 属性を使用した場合

子ルートの追加(Lesson16 Outlet)

ember

• emberjs-guides-japanese-translation/16-adding-child-routes.md at master · emadurandal/emberjs-guides-japanese-translation · GitHub

 {{outlet}}

Angular

<div ng-view ></div>

参考

• Routingの基本 – Ember.js入門(2) ｜ Developers.IO

  • routing 分かりにくい

• until 01-16