首頁 > 開發者 > 網站開發

Angularjs學習---官方phonecat執行個體學習angularjs step0 step1

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   class   code   java   tar   

接下來一系列的文章都是學習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 managerHttp-Server - simple local static web serverKarma - unit test runnerProtractor - 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

 

[email protected]:~/develop/angular-phonecat$ npm start> [email protected]0.0.0 prestart /home/amosli/develop/angular-phonecat> npm install> [email protected]0.0.0 postinstall /home/amosli/develop/angular-phonecat> bower install> [email protected]0.0.0 start /home/amosli/develop/angular-phonecat> http-server -p 8000Starting up http-server, serving ./ on port: 8000Hit 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步的內容,那麼執行如下命令:

[email protected]:~/develop/angular-phonecat$ git checkout step-0Previous HEAD position was b1e657a... step-4 phone orderingHEAD is now at c5495a2... step-0 bootstrap angular app

同樣,可以看到的切換的步驟有step-0到12.

4.phonecat項目step-01).切換到第0步,啟動項目: 
[email protected]:~/develop/angular-phonecat$ git checkout step-0Previous HEAD position was b1e657a... step-4 phone orderingHEAD is now at c5495a2... step-0 bootstrap angular app[email protected]-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>

其資料渲染順序:

  1. injector that will be used for dependency injection is created.

  2. The injector will then create the root scope that will become the context for the model of our application.

  3. Angular will then "compile" the DOM starting at the ngApp root 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>

效果:

 

 

 

 

 

 

 

 

 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More