muzigram

山椒は小粒でもピリリと辛い

2013/12/15

angularjsをはじめる。

Angularjsをとりあえずはじめる。

  • なぜAngular.jsなのか
  • 利点は何か?
  • どういう場面でつかうか
などは詳しい解説をしてる方がたくさんいらっしゃるので省略。
ここでは0からAngularjsをはじめるまでを記述することにします。 http://angularjs.org/

素で始めてもいいけど、せっかくだから周辺環境も一緒に整えてしまおう。

node.jsのインストール

http://nodejs.org/
Node js 後のyo bower gruntの為にnodeをインストールします。
そのままインストールもしくは
brew install node
自分はBOXENで入れました。
あとは.bash_profileに記述なり、Windowsの環境変数なりにパスを通してnodeを叩けるようにする。

Yeoman bower grunt のインストール

Cursor と Yeoman Modern workflows for modern webapps npm(nodeのパッケージマネージャ)が叩けるようになっていればコマンドは以下で一発。
npm install -g yo grunt-cli bower

generator-angulor(テンプレート)のインストール

yoが使用するangularjsのテンプレをインストール。下記2つ yeoman推奨なのはgenerator-angularの方。scripts/以下に機能毎にディレクトリ切る形。
angular-seedの方にもテストで使えるshell scriptなどがあったりするので気になる人は。
npm install -g generator-angular
npm install -g angular-seed
とりあえず、generator-angularをインストールしたことにして下に続く

yo angular

適当なディレクトリで以下のコマンドを実行
yo angular
ずかずかとテンプレートをインストールしていきます…。
twitter-bootstrap入れる?
とかコンポーネント入れる?
とか聞いてくるので適当にYES

Run!!!

grunt server
を実行すると127.0.0.1:9000にサーバーが立ち上がり、allo,alloいってるおっさんが表示される。
Cursor と 127 0 0 1 9000

[error]compassないと怒られる。

muzi:angular_sandbox mogetta$ grunt server
Running "server" task
>> The `server` task has been deprecated. Use `grunt serve` to start a server.

Running "serve" task

Running "clean:server" (clean) task

Running "concurrent:server" (concurrent) task
    Warning: Running "compass:server" (compass) task
    Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue.
    
    Aborted due to warnings. Use --force to continue.
        
        Aborted due to warnings.


gruntfilekからタスクを消すか、rubyとcompassを導入します。
gem install compass

「おまけ」モバイル対応はじめの一歩

などを参考にしつつ
ngtouchモジュールをインストール
bower install angular-touch --save

index.htmlに以下を記述
<script src="/bower_components/angular-touch/angular-touch.js"></script>

app/scripts/app.jsに記述
angular.module('angularSandboxApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute'
])
にngTouchを追加。

2013/12/02

Dartをインストールしなければ何も始まらない!Dart Advent Calendar 2013 #dartlangjp

http://www.adventar.org/calendars/85
雑な記事で隙間を埋めていくスタイル
Dartがお好き?では結構。このインストール方法もきっと気に入りますよ。

素直な貴方は

https://www.dartlang.org/
から素直にダウンロードする方法がひとつ

貴方がもしMacを使っているなら

http://brew.sh/
を使うのが賢い方法の一つでしょう
brew install dart
で終了です。ただし、DartEditorは入らないので自分で環境構築してね


え、brewでdart editorを入れたいって?

わがままな貴方に海外のナイスガイが応えてくれているようです。
http://work.j832.com/2013/11/if-you-do-any-open-source-development.html
 brew tap kevmoo/kevmoo
 brew install dart-editor --with-content-shell
 brew linkapps
アプリケーション 2

これでインストール完了です!素晴らしいですね。
自分で入れてたdartも残っているのはご愛嬌。


本当はBOXENでインストールもやりたかったけど今日が残り30分なので別の機会に回します!