構造
アプリケーションが成長するにつれて、コントローラーは、その中で一度ナビゲートすることが非常に難しくなるほど成長する傾向があります。 Classyは、クラスベースのアプローチを取り、 AngularDartからいくつかのアイデアを継承して、コードをよりクリーンで構造化しています。
依存関係を詳述する必要はありません
Angularコードを縮小しようとした人は、Angularコードを正しく機能させるには依存関係アノテーションが必要であることを知っています。 この場合、繰り返しのあるネイティブコードは次のようになります。
app.controller('AppCtrl', ['$scope', '$location', '$http', function($scope, $location, $http) { // ... }]);
この種の注釈は退屈であるという事実に加えて、どういうわけかあまり見えません... Classyでは、物事は異なります：
app.classy.controller({ name: 'AppCtrl', inject: ['$scope', '$location', '$http'], //... });
便利な$スコープ
ほとんどの場合、コントローラーで関数を作成するとき、たとえばテンプレートからアクセスできるようにするために、$スコープで使用できることが重要です。 知っている：オブジェクトのすべての機能は自動的に$スコープに追加されます。 つまり、Classyを使用しないネイティブコードは次のようになります。
$scope.editTodo = function(todo) { //... }
Classyでは、次のようになります。
editTodo: function(todo) { //... }
また、この関数またはその関数を$スコープに追加したくない場合は、名前のプレフィックスとして「_」記号を使用します。
短いレコード$スコープ
$スコーププロパティにアクセスするには、単純に
this.$.foo = 'bar';
アクセスできます
this.$.foo = 'bar';
これの代わりに
this.$scope.foo = 'bar';
。 ただし、これの使用
this.$scope
も禁止されていません。
$ watchのリスナー用の特別なオブジェクト
initメソッドを
$scope.$watch
の呼び出しで散乱させる代わりに、Classyはそれらを特別なオブジェクトに折り畳むことをお勧めします。
watch: { 'location.path()': function(newValue, oldValue) { // ... }, '{object}todos': function (newValue, oldValue) { // ... } }
2番目のリスナーの名前にある
{object}
に注意してください。 このようなレコードにより、リスナーのタイプを指定できます。 したがって、
{collection}
または
{shallow}
の存在は、
$watchCollection()
がオブジェクトに適用されることを示します。 可能な値の完全なリストは、Classy Webサイトにあります。
そして、それがClassyが持っているすべてのアメニティではありません！
興味のある方は読んでください 。