接下來一系列的文章都是學習https://docs.angularjs.org/tutorial的筆記,主要學習的angular-phonecat項目的實現,來介紹angularjs的使用.
1.下載angular-phonecat
使用git clone phonecat:
git clone --depth=14 https://github.com/angular/angular-phonecat.git
可以把--depth=14去掉,這里是拉最新的14個commit.
The --depth=14 option just tells Git to pull down only the last 14 commits. This makes the download much smaller and faster.
2.安裝所需工具
Bower - client-side code package manager Http-Server - simple local static web server Karma - unit test runner Protractor - end 2 end test runner
nodejs,npm,karma的安裝可以參考前面的文章:Angularjs學習---ubuntu12.04中karma安裝配置中常見的問題總結
1).ubuntu中安裝bower命令為:
sudo npm install -g bower
2).安裝驅動:
npm run update-webdriver
這里好像安裝的是selenium驅動.
3).啟動項目:npm start
amosli@amosli-pc:~/develop/angular-phonecat$ npm start > angular-phonecat@0.0.0 prestart /home/amosli/develop/angular-phonecat > npm install > angular-phonecat@0.0.0 postinstall /home/amosli/develop/angular-phonecat > bower install > angular-phonecat@0.0.0 start /home/amosli/develop/angular-phonecat > http-server -p 8000 Starting up http-server, serving ./ on port: 8000 Hit CTRL-C to stop the server
4).端到端的測試:
npm run protractor
- open up a Chrome browser and connect it to the application
- execute all the End to End tests in this browser
- report the results of these tests in the terminal/command line window
- close down the browser and exit
自動化測試步驟是打開chrome瀏覽器,連接到應用程序這里是angular-phonecat---->執行所有的端到端的測試---->在命令行中報告測試結果---->關閉瀏覽器並退出.
3.phonecat項目教程概述
教程分為13步,每一步可以切換到相應的分支上直接運行其步驟,比如要學習第0步的內容,那么執行如下命令:
amosli@amosli-pc:~/develop/angular-phonecat$ git checkout step-0 Previous HEAD position was b1e657a... step-4 phone ordering HEAD is now at c5495a2... step-0 bootstrap angular app
同樣,可以看到的切換的步驟有step-0到12.
4.phonecat項目step-0
1).切換到第0步,啟動項目:
amosli@amosli-pc:~/develop/angular-phonecat$ git checkout step-0 Previous HEAD position was b1e657a... step-4 phone ordering HEAD is now at c5495a2... step-0 bootstrap angular app amosli@amosli-pc:~/develop/angular-phonecat$ npm start
2).在瀏覽器輸入http://localhost:8000/app/index.html
效果:
index.html的源碼
<!doctype html> <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="css/app.css"> <script src="../bower_components/angular/angular.js"></script> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> </body> </html>
其數據渲染順序:
-
injector that will be used for dependency injection is created.
-
The injector will then create the root scope that will become the context for the model of our application.
-
Angular will then "compile" the DOM starting at the
ngApproot element, processing any directives and bindings found along the way.
5.phonecat項目step-1
請編輯app/index.html文件，將下面的代碼添加到index.html文件中，然后運行該應用查看效果。
<ul> <li> <span>Nexus S</span> <p> Fast just got faster with Nexus S. </p> </li> <li> <span>Motorola XOOM™ with Wi-Fi</span> <p> The Next, Next Generation tablet. </p> li> </ul>
效果:
