Angularjs學習---官方phonecat實例學習angularjs step0 step1

時間 2019-11-13

標籤 angularjs 學習官方 phonecat 實例 step0 step step1 欄目 AngularJS 简体版

原文原文鏈接

接下來一系列的文章都是學習https://docs.angularjs.org/tutorial的筆記,主要學習的angular-phonecat項目的實現,來介紹angularjs的使用.css

1.下載angular-phonecat

使用git clone phonecat:html

git clone --depth=14 https://github.com/angular/angular-phonecat.git

能夠把--depth=14去掉,這裏是拉最新的14個commit.node

The --depth=14 option just tells Git to pull down only the last 14 commits. This makes the download much smaller and faster.git

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安裝配置中常見的問題總結angularjs

1).ubuntu中安裝bower命令爲:

sudo npm install -g bower

2).安裝驅動:

npm run update-webdriver

這裏好像安裝的是selenium驅動.github

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---->執行全部的端到端的測試---->在命令行中報告測試結果---->關閉瀏覽器並退出.web

3.phonecat項目教程概述

教程分爲13步,每一步能夠切換到相應的分支上直接運行其步驟,好比要學習第0步的內容,那麼執行以下命令:chrome

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.npm

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

效果:bootstrap

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 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>