接下来一系列的文章都是学习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. python 小程序大文件的拆分合并

    1. 将大文件拆分为小文件 I 通过二进制的方式将大文件读取出来,将其拆分存,以不同的文件方式存放在一个目录下面 II 提供两种操作方式交互式和命令行模式 #! usr/bin/python # -* ...

  2. wpf,能够复制文字 及自动识别URL超链接的TextBlock

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  3. PD PDM模型中关系设置为概念模型样式

      来自为知笔记(Wiz)

  4. js 逻辑或

    逻辑或操作符由两个竖线来表示||,属于短路操作符,也就是说,如果第一个操作数的求职结果为true,就不会对第二个操作数进行求值 var found = true; var result = found ...

  5. 解决vsftpd的refusing to run with writable root inside chroot错误

    参考 http://www.cnblogs.com/CSGrandeur/p/3754126.html 在Ubuntu下用 vsftpd 配置FTP服务器,配置 “ sudo chmod a-w /h ...

  6. Visual Studio 2015 Update 2正式版下载地址

     转载自:王彬的博客 地址:http://blog.sina.com.cn/s/blog_55f899fb0102wcwg.html Visual Studio Professional 2015(带 ...

  7. (RMQ版)LCA注意要点

    inline int lca(int x,int y){ if(x>y) swap(x,y); ]][x]]<h[rmq[log[y-x+]][y-near[y-x+]+]])? rmq[ ...

  8. C语言中函数声明实现的位置

    在学习C语言的时候我遇到了这么个事情,因为之前先学习的C#,在C#编译器中,函数的声明位置不会影响编译的结果,但是在C语言中却发生了错误 先看一段代码: #include <stdio.h> ...

  9. 用SQL Server(T-SQL)获取连接字符串

    一般情况下,C# 连接SQL Server的字符串可以直接按照说明文档直接手动写出来,或者也可以参考大名鼎鼎的connectionstrings手动拼写 但是如果你已经连接到SQL Server也可以 ...

  10. 为什么我如此热爱这样一个比赛(转自vici)

    为什么我如此的热爱这样一个比赛呢?因为它总能带给我一个目标,让我去努力实现它.因为可以看到胜利的希望,于是不断的去追逐.虽然其中的过程可能是比较艰辛的.   对于天才选手,作为天生的冠军,大概凭借天赋 ...