Angularjs學習—angularjs環境搭建,ubuntu 12.04下安裝nodejs、npm和karma

HelloWorld !

 

新建一個helloworld.html

 

復制代碼

<!doctype html>

<html ng-app>

    <head>

        <script src="angular.js"></script>

    </head>

    <body>

        Hello {{'World'}}!

    </body>

</html>

復制代碼

然後將下載的angular.js拷到與helloworld.html的同一目錄

 

效果如下所示:

 

 

 

 

 

3.helloworld.html代碼說明

標記ng-app告訴AngularJS處理整個HTML頁並引導應用:

 

<htmlng-app>

註意,使用雙大括號標記{{}}的內容是問候語中綁定的表達式,這個表達式是一個簡單的字符串‘World’。

 

Hello {{'World'}}!

4.示例2

本示例演示AngularJS的雙向數據綁定(bi-directional data binding):

 

編輯前面創建的helloworld.html文檔。

將下面的源代碼復制到您的HTML文件。

刷新瀏覽器窗口。

源代碼

 

復制代碼

<!doctype html>

<html ng-app>

    <head>

        <script src="angular.js"></script>

    </head>

    <body>

        Your name: <input type="text" ng-model="yourname" placeholder="World"><hr>

        Hello {{yourname || 'World'}}!

    </body>

</html>

復制代碼

效果:

 

 

 

該示例有一下幾點重要的註意事項:

 

文本輸入指令<input ng-model="yourname" />綁定到一個叫yourname的模型變量。

雙大括號標記將yourname模型變量添加到問候語文本。

你不需要為該應用另外註冊一個事件偵聽器或添加事件處理程序!

現在試著在輸入框中鍵入您的名稱,您鍵入的名稱將立即更新顯示在問候語中。 這就是AngularJS雙向數據綁定的概念。 輸入框的任何更改會立即反映到模型變量(一個方向),模型變量的任何更改都會立即反映到問候語文本中(另一方向)。

 

5.angularjs框架簡介

模板(Templates)

模板是您用HTML和CSS編寫的文件,展現應用的視圖。 您可給HTML添加新的元素、屬性標記,作為AngularJS編譯器的指令。 AngularJS編譯器是完全可擴展的,這意味著通過AngularJS您可以在HTML中構建您自己的HTML標記!

 

應用程序邏輯(Logic)和行為(Behavior)

應用程序邏輯和行為是您用JavaScript定義的控制器。AngularJS與標準AJAX應用程序不同,您不需要另外編寫偵聽器或DOM控制器,因為它們已經內置到AngularJS中瞭。這些功能使您的應用程序邏輯很容易編寫、測試、維護和理解。

 

模型數據(Data)

模型是從AngularJS作用域對象的屬性引申的。模型中的數據可能是Javascript對象、數組或基本類型,這都不重要,重要的是,他們都屬於AngularJS作用域對象。

 

AngularJS通過作用域來保持數據模型與視圖界面UI的雙向同步。一旦模型狀態發生改變,AngularJS會立即刷新反映在視圖界面中,反之亦然。

 

 

 

6.ubuntu 12.04下安裝nodejs、npm和karma

1)安裝nodejs

直接輸入命令sudo apt-get install nodejs 安裝的是0.6版本的,這個會出現問題,導致接下來安裝js測試工具karma,出現問題.

 

所以用下載安裝自己編譯的方式,https://nodejs.org/download/,我這裡下載的是https://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz

 

然後,執行命令 

 

tar zxvf node-v0.10.26.tar.gz 

cd node-v0.10.26

./configure

make

sudo make install

這樣直接編譯會出錯!!

 

必須先把其依賴環境搭建好,必須先執行如下命令:

 

sudo apt-get install g++ curl libssl-dev apache2-utils

sudo apt-get install git-core

git如果已經安裝則不需要再安裝瞭.

 

當然也可從github上直接clone瞭,即使用如下命令:

 

git clone git://github.com/ry/node.git

cd node

./configure

make

sudo make install

測試是否成功???

 

amosli@amosli-pc:~$ node –version

v0.10.26

查看版本是否正確,這裡是正確的.

 

2)安裝npm

sudo apt-get install npm

3)安裝karma

sudo npm install -g karma

隻要安裝nodejs正確,那麼後兩步將會十分順利.

 

否則安裝karma時將會報如下的錯誤:

 

復制代碼

amosli@amosli-pc:~$ sudo npm install -g karma

npm http GET https://registry.npmjs.org/karma

 

npm ERR! Error: failed to fetch from registry: karma

npm ERR!     at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12

npm ERR!     at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9)

…..

復制代碼

karma以前叫testacular,是js的測試框架.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *