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

時間 2019-12-01

標籤 angularjs 學習環境搭建 ubuntu 12.04 安裝 nodejs npm karma 欄目 AngularJS 简体版

原文原文鏈接

1.下載angularjs

進入其官網下載:https://angularjs.org/‎,建議下載最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.jshtml

全部版本:https://code.angularjs.org/node

2.示例1

HelloWorld !git

新建一個helloworld.htmlangularjs

<!doctype html>
<html ng-app>
    <head>
        <script src="angular.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

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

效果以下所示:ajax

3.helloworld.html代碼說明

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

<htmlng-app>

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

Hello {{'World'}}!

4.示例2

本示例演示AngularJS的雙向數據綁定（bi-directional data binding）：ubuntu

編輯前面建立的helloworld.html文檔。
將下面的源代碼複製到您的HTML文件。
刷新瀏覽器窗口。

源代碼api

<!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,出現問題.

因此用下載安裝本身編譯的方式,http://nodejs.org/download/,我這裏下載的是http://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的測試框架.

安裝nodejs時參考了:http://howtonode.org/how-to-install-nodejs

若是還報錯,那麼能夠執行如下命令試試,註冊npm:

npm config set registry http://registry.npmjs.org/

相關標籤/搜索

nodejs+express4+mongodb+angularjs

nodejs+mongodb+angularjs+bootstrap

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。