官方案例-angular-phonecat

angularJS官方提供了一个官方案例给大家进行循序渐进的学习,但是如果之前没有接触过node.js以及git的同学这个案例拿着也无从下手…这里就介绍一下怎么打开这个案例吧 准备工作: 1.Git 2.nodejs 3.npm 4.bower 5.http-server

如果需要成功的一步一步的学习这个案例至少需要安装上面的5个东西,当然2-5都是nodejs以及他的附属品

1.安装Git

git这个东西不用多说,稍微有点公司开发经验的应该都用过,如果没用过也不用紧张,可以查看我的Git简单教程…几乎是傻瓜式的教程,没有什么命令行的操作,完全是使用Github自己新出的工具直接进行Git操作。当然我们这里安装Git主要是为了看angular-phonecat,所以大家不懂Git只需要知道Git是什么就行了,不需要纠结,我们需要做的最重要的第一步是通过Git clone angular-phonecat,注意angular-phonecat最好从github上clone,不然是创建不了git 分支的,也就不能一步一步的学习这个项目了

a.首先进入angular-phonecat b.点击右上角的Fork(当然之前你必须还要先有自己的github账户并登录才行)  c.打开本机已经安装的Git工具,登录你的账号,就能找到你刚刚Fork的程序  d.最后将这个程序Clone到你的电脑上就行 

2.安装nodejs

nodejs这里说也说不完,直接到nodejs官方网站下载nodejs安装就ok 现在安装好nodejs之后,会自动安装nodejs包管理器npm,以后在nodejs平台安装东西都需要npm.

首先通过npm安装bower:

bower现在这里大家也不需要纠结到底是什么,其实无非就是随着前端工程越来越多,引入的js,jquery,jquery插件,css,less,sass等越来越多,需要简单化地管理这些引入文件就是bower的作用,类似于java的maven,所以这里使用bower就是下载angular-phonecat程序所需要的引入文件

a.安装bower

npm install bower -g

注意这里加上-g表示要将bower安装在本机的全局环境中,在本机调用起来很方便。如果程序需要经常移植,也可以直接将bower安装在局部环境中,在相应的文件夹下执行npm install bower就行了

安装好之后,就需要通过bower下载相应的文件了,这里又涉及到bower的相关使用,不是太清楚的,这篇文章可以为你解惑——–bower解决js的依赖管理,如果不想花精力现在看的话也无所谓,按照下面的步骤执行就ok

进入angular-phonecat文件夹所在路径,按照图片代码执行就行了,唯一注意的一点是bower很多安装文件都依赖于git,如果机器上没有安装git的话,会报出下面的错误:

如果安装了github提供的window版本的git shell,需要将git shell打开,在里面执行bower相关代码(注意我这里图片上由于是演示已经执行过一次bower命令,已经保存了安装缓存速度较快):

b.安装http-server

npm install http-server -g

http-server是一个简单的前台应用服务器,使用相当简单,进入http-server安装目录,(注意window系统是npm全局-g安装在C:\Users\yourComputerName\AppData\Roaming\npm\node_modules\http-server)输入命令

node bin/http-server

我们就能启动一个应用服务,在浏览器地址栏输入:127.0.0.1:8080,就能看到欢迎界面

但是这并不能干任何事情,因为我们的工程还没有挂载到应用服务器上。 因此如果我们的工程放在angular-phonecat文件夹中,通过下面的命令,将angular-phonecat文件夹所在路径指定为工程路径

http-server G:\angular-phonecat

上面的代码就是指定文件夹为应用服务器默认访问路径,现在在浏览器输入:http://127.0.0.1:8080/app就能直接访问到最终用angualrjs写出的页面了。

但是这并不是我们一步一步的通过这个代码去学习的目的,angular-phonecat已经通过git帮我们把代码分成了12个步骤去学习,如果想进入第一步,需要执行git代码

git checkout -f step-0

以后要学习没一步,改变step-*后面的数字就好,当然这里只是教大家怎么样去打开这个教程,如果想要一步一步的学习,可以看这里

通过angularJS官方案例快速入门的更多相关文章

  1. 02_Spring控制反转案例快速入门

    Spring控制反转案例快速入门 1.下载Spring最新开发包 http://www.springsource.org/download/community 下载spring3.2 的开发包 目录结 ...

  2. AngularJS 30分钟快速入门【译】

    引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...

  3. AngularJS快速入门指南01:导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. 大数据技术之_09_Flume学习_Flume概述+Flume快速入门+Flume企业开发案例+Flume监控之Ganglia+Flume高级之自定义MySQLSource+Flume企业真实面试题(重点)

    第1章 Flume概述1.1 Flume定义1.2 Flume组成架构1.2.1 Agent1.2.2 Source1.2.3 Channel1.2.4 Sink1.2.5 Event1.3 Flum ...

  5. AngularJS快速入门指南20:快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  6. AngularJS快速入门指南19:示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  7. AngularJS快速入门指南18:Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  8. AngularJS快速入门指南17:Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  9. AngularJS快速入门指南16:Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

随机推荐

  1. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  2. PHP 基础

    var_dump(empty($a));    判断变量是否为空 var_dump(isset($a));      判断变量是否定义 $a=10;unset($a);      删除变量 var_d ...

  3. IOS开发之控件篇UINavigationController第二章 - 标题

    1.什么是标题(Title) NavigationController里面的viewcontroller,每一页都会有一个标题,如图3r就是这个页面的标题 2. 如何设置标题 一般都会在这个Navig ...

  4. Ztree行政地区树状展示

    Ztree行政地区树状展示(点击加载) 效果如下: 开始贴代码: 实体类 Item,用于对Ztree的节点展示 public class Item { private String id; priva ...

  5. HashSet源码详解

    序言 在写了HashMap文章后,隔了几天才继续这一系列的文章,因为要学的东西实在是太多了,写一篇要花费的时间很多,所以导致隔了几天才来写.不过希望自己坚持下去.终有一天会拨开云雾见青天的.学Hash ...

  6. 处于同一个域中的两台Sql server 实例无法连接

    处于同一个域中的两台Sql server 实例无法连接,报的错误信息如下: A network-related or instance-specific error occurred while es ...

  7. TSQL HASHBYTES 用法

    HashBytes 使用Hash 算法,能够产生高质量的Hash值,大幅度提高识别数据相异的准确性,但是HashBytes函数无法提供100%的准确度,如果业务逻辑要求不允许有误差,那么不要使用任何H ...

  8. 数据访问模式:数据并发控制(Data Concurrency Control)

    1.数据并发控制(Data Concurrency Control)简介 数据并发控制(Data Concurrency Control)是用来处理在同一时刻对被持久化的业务对象进行多次修改的系统.当 ...

  9. 【WP 8.1开发】手机客户端应用接收推送通知

    上一篇文章中,已经完成了用于发送通知的服务器端,接下来我们就用这个服务端来测试一下. 在开始测试之前,我们要做一个接收通知的WP应用. 1.启动VS Express for Windows,新建项目, ...

  10. word-wrap: break-word; break-word: break-all;区别

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...