読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

angular - Yeoman Advent Calendar 2015

Angular Yeoman

既に定番のangular を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月5日の記事です。

www.npmjs.com

インストール

$ npm install -g  generator-karma generator-angular
$ mkdir mydir && cd $_
$ yo angular

実行

$ grunt serve

ブラウザが立ち上がりアプリが表示される

コマンド

  • angular (aka angular:app)
  • angular:controller
  • angular:directive
  • angular:filter
  • angular:route
  • angular:service
  • angular:provider
  • angular:factory
  • angular:value
  • angular:constant
  • angular:decorator
  • angular:view

Angular1.5から追加されたcomponentはまだ定義されていない(使われているAngularのバージョンは1.4)。

新たに

GruntとGulpのどちらでも利用可能でTypeScriptのサポートも。

/// <reference path="../app.ts" />

'use strict';

module sampleAppApp {
  export interface IAboutScope extends ng.IScope {
    awesomeThings: any[];
  }

  export class AboutCtrl {

    constructor (private $scope: IAboutScope) {
      $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma'
      ];
    }
  }
}

angular.module('sampleAppApp')
  .controller('AboutCtrl', sampleAppApp.AboutCtrl);

最後に

TypeScriptの勉強にも最適!