angularjs学习笔记2—运行phonecat项目

如果你去angularjs中文网看它的教程,你会发现一开始它提供了一个phonecat的引导项目,这个项目是angular官方给出的一个类似于demo的教程项目,并配有相应文档,按照这个项目并配合文档学习我想可能会取得很好的效果,而且这个项目本身也具有很好的借鉴意义,基本上涵盖了利用angularjs开发SPA的每个方面,运行效果也是非常好的。这里和大家分享下如何下载并运行这个项目:

我的操作系统是win7 64位 SP1,对于其他如Linux及Mac os网上可能有很多教程,而且安装运行相对比较顺利,windows下反而问题更多一些,以下就以windows环境为例来说明这个步骤

安装下载运行步骤如下:

1.需要安装node js及其包管理模块npm,具体安装配置步骤请参考这篇博文:http://www.cnblogs.com/pigtail/archive/2013/01/08/2850486.html

2.安装git for windows,注册github账号,配置sshkey并初始化代码仓库,具体步骤可参考这篇博文:http://blog.csdn.net/wh_19910525/article/details/8128916

3.以上步骤都完成之后,利用你的账号密码进入github中phonecat项目,https://github.com/angular/angular-phonecat,然后点击fork,可以将这个代码拷贝一份到你的仓库,也可以不用fork,直接使用https地址来拷贝代码,但是为了方便管理,最好是能够fork一份在自己的仓库中,这样便于以后follow,这里要说一下github提供了三种获取代码的方式,第一种是通过https协议的,这种方式最简单,在git bash 控制台下直接输入git clone https://xxx.xxxx.xx.git即可拷贝代码及相应git文件,这也是官方推荐的一种方式,第二种方式是通过ssh协议来获取代码,地址为git://github.com/xxxx.git这种形式,在这种方式下需要配置sshkey并注册到你的账户中去,具体方式见步骤2的介绍;第三种方式是通过SVN来获取,这个步骤就不介绍了,本来git就比SVN先进很多,估计没多少人退回去用这个吧。将以上代码地址使用git bash中git clone https://github.com/angular/angular-phonecat.git命令克隆到你本地(最好在你第二步配置好的指定地方,不要随便乱放,这样便于管理);

4.使用webstrom 将其下载到的代码导入项目,(这里利用webstrom8进行开发,因为webstrom8拥有很好的angularjs插件),下载地址为:http://www.33lc.com/soft/33842.html,注意必须用webstrom8.X版本,以前的版本不支持angularjs插件,下载后需要安装angular插件,具体安装步骤可参考这篇博文:http://blog.fens.me/tag/webstorm/

5.初始化导入之后项目结构如下:

其中APP目录是项目代码存放目录,node_modules是项目依赖的node模块目录,script目录是项目外部脚本的目录(似乎和本身开发关系不大),bower.json是包管理需要工具bower获取信息的文件,为了指明我们项目中都需要安装那些文件,如jquery ,bootstrap 等,关于bower的信息可参见:http://blog.fens.me/nodejs-bower-intro/,package.json是告诉node的npm模块我们项目中需要依赖哪些(安装)其他的模块,如bower,jasmine,http-server等,他们都是依赖于node的模块,都有自己的作用,关于这个文件的介绍可参照:https://github.com/ericdum/mujiang.info/issues/6

6.按照Phonecat项目文档中给出的https://github.com/angular/angular-phonecat步骤首先在node cli下切换到你的项目目录,运行npm install,这时npm就会按照package.json中的配置去下载其他的node模块到你的项目中,并且启动bower去下载bower.json里面配置的我们项目中依赖的文件(如jquery,bootstrap等),关于这一步有可能报一个No versions found in git://github.com/components/jquery.git类似的错误,这是由于github默认下载代码方式是通过ssh的,这种情况在国内容易出现问题,可以运行 git config --global url."https://".insteadOf git:// 切换下载代码方式,该问题原帖地址为:

https://github.com/bower/bower/issues/852,这一步完成之后,代码结构如下:

你会发现node_modules中多了一些模块文件夹以及APP下面多了bower_components文件夹,这就是刚才通过npm及bower下载到我们项目中的;

7.按照官方文档https://github.com/angular/angular-phonecat运行npm start,此时它会启动HTTP-server,监听localhost的8000端口,

在浏览器中输入http://localhost:8000/app/index.html,即可查看到这个项目的运行效果,

如下所示:

在左边搜索栏中输入信息,右边会发生飞快的变化,效果很炫,至此一个学习的 demo项目开发环境搭建完毕,你可以配合这个文档http://docs.angularjs.org/tutorial.去一步步学习了。

时间: 2024-11-19 12:50:32

angularjs学习笔记2—运行phonecat项目的相关文章

Cocos2dx 学习笔记整理----第一个项目

接上一节, 进入新建的项目下面的proj.win32下面,找到项目名.sln文件(我的是game001.sln),双击会通过VS2010打开.(当然,你装了VS什么版本就是什么版本) 将你的项目设为启动项目, 切换到解决方案视图, 然后邮件点击解决方案, 选择生成解决方案. 第一次生成根据个人机器性能会消耗大概1-3分钟,呵呵. 但是以后会快很多的. 生成成功的话会在输出窗口显示如下: 一般都会生成成功,但是我生成的时候失败了很多次,后来发现是这个问题:http://www.cnblogs.co

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

quick-cocos2d-x学习笔记【2】——项目结构分析、创建新场景

创建完一个新项目之后,我们可以简单的看一看这个项目的文件组成,有这么一个文件层次结构 几个proj.*文件夹就不用说了,是对应的平台的解决方案,res专门存放我们的游戏资源,scripts存放我们的lua代码,sources中有我们熟悉的AppDelegate类,我们主要常用的就两个文件夹,res和scripts(我这不是废话吗) 好吧,还是再打开scripts文件夹看下, 该文件下有main.lua,它是程序lua脚本的启动文件 function __G__TRACKBACK__(errorM

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

-_-#AngularJS学习笔记

AngularJS学习笔记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .done{display:none} .ignore{color:#999} </style> <ul> <li class="

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

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht