angularjsをはじめる。

javascript

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

  • なぜAngular.jsなのか
  • 利点は何か？
  • どういう場面でつかうか
などは詳しい解説をしてる方がたくさんいらっしゃるので省略。
ここでは０から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のテンプレをインストール。下記２つ 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を追加。

0 件のコメント :

コメントを投稿