接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用.

1.下载angular-phonecat

使用git clone phonecat:

git clone --depth= 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 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. prestart /home/amosli/develop/angular-phonecat
> npm install > angular-phonecat@0.0. postinstall /home/amosli/develop/angular-phonecat
> bower install > angular-phonecat@0.0. start /home/amosli/develop/angular-phonecat
> http-server -p Starting up http-server, serving ./ on port:
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-
Previous HEAD position was b1e657a... step- phone ordering
HEAD is now at c5495a2... step- bootstrap angular app

同样,可以看到的切换的步骤有step-0到12.

4.phonecat项目step-0

1).切换到第0步,启动项目:

amosli@amosli-pc:~/develop/angular-phonecat$ git checkout step-
Previous HEAD position was b1e657a... step- phone ordering
HEAD is now at c5495a2... step- 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>

其数据渲染顺序:

  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>

效果:

Angularjs学习---官方phonecat实例学习angularjs step0 step1的更多相关文章

  1. AngularJs学习笔记-慕课网AngularJS实战

    第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...

  2. AngularJs学习笔记--I18n/L10n

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  7. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

随机推荐

  1. wpf 切换资源字典的2中方式

    var _1200RDUri = new Uri(String.Format(@"/aa;Component/Themes/1200Theme.xaml"), UriKind.Re ...

  2. 根据oracle的主键列生成SQLserver的主键

    根据oracle的主键列生成MsSQLServer的主键列 select 'alter table  ' || cu.table_name ||'  add constraint  '||' PK_' ...

  3. continue语句在for语句和while语句中的区别

    while语句的形式: while( expression ) statement for语句的形式: for( expression1; expression2;expression3 )   // ...

  4. 字典树+博弈 CF 455B A Lot of Games(接龙游戏)

    题目链接 题意: A和B轮流在建造一个字,每次添加一个字符,要求是给定的n个串的某一个的前缀,不能添加字符的人输掉游戏,输掉的人先手下一轮的游戏.问A先手,经过k轮游戏,最后胜利的人是谁. 思路: 很 ...

  5. HDU5456 Matches Puzzle Game(DP)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5456 Description As an exciting puzzle game for ...

  6. 数据库SQL优化大总结之 百万级数据库优化方案

    1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  7. ACM: Gym 101047B Renzo and the palindromic decoration - 手速题

     Gym 101047B  Renzo and the palindromic decoration Time Limit:2000MS     Memory Limit:65536KB     64 ...

  8. NOIP2016普及

    还记得去年局部变量忘记置零coin爆零的事......结果我今年又要考一年普及[趴 最近沉迷分块莫队无法自拔,这几天才想起来我是个普及组选手 几乎没准备普及,周六上午抱抱佛脚好了...... 希望能顺 ...

  9. [ACM训练] 算法初级 之 基本算法 之 枚举(POJ 1753+2965)

    先列出题目: 1.POJ 1753 POJ 1753  Flip Game:http://poj.org/problem?id=1753 Sample Input bwwb bbwb bwwb bww ...

  10. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...