记录-傻瓜式学习-AngularJS入门教程00:引导程序

最近想找个项目练练手,选择了angularjs官方引导教程。这个教程分16节,最后写出来一个phonecat的web应用。
因为我是那种按标准答案照抄的小孩,所以描述基本为傻瓜式,不喜请右上点×。

首先附上地址https://docs.angularjs.org/tutorial
英文的看不太懂,也没那个耐心,于是找了Angular中文社区的翻译文档对比着看,地址:http://angularjs.cn/A003
开始吧!

Environment Setup-环境搭建

从这部分往下是环境搭建以及常用命令,包括开启服务器啊、自动化测试什么的。要是不想看,直接跳转到 Step 0 - Bootstrapping(这个还没写,留坑) 。

工作必备的工具:

  1. 安装Git (这个自己百度),在这个项目里边开始需要用到两个命令:
    git clone   将GitHub上的远程仓库克隆到你本地机器。
    git checkout   查看特定分支或代码的标记版本以进行代码管理。

  2. 安装node.js (这个自己百度),自带安装npm,安装的时候注意要选择Add path,将环境变量添加到路径中,否则要自己手动添加。

----- 重点 来了-----

Clone the angular-phonecat repository located at GitHub by running the following command :

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

上边这句话的意思是:
下载好git以后,随便找一个目录(例如:E:\FontEngage\AngularJS),右键鼠标,会有一个git bash的东西,打开它。在打开的命令行窗口中输入上边git clone...那个代码,就可以将angular-phonecat这个项目的初始状态下载到你本地那个文件夹下了。
打开git bash
git clone

clone结束后自动出现angular-phonecat文件夹
depth用于指定克隆深度,为16即表示只克隆最近16次commit.

-----重点 结束-----

建议学习一下git常用的几个命令:
mkdir filename   新建文件夹【filename】指你要取的名字
touch name          新建文件 【name】文件名,可包含后缀

打开 angular-phonecat文件夹,含有package.json文件,打开git bash,运行命令npm install,将 package.json文件中的依赖和组件安装上,

然后 启动服务器

启动服务器
命令 npm start,回车。
git bash中提示 http://localhost:8000字样表示服务器开启了,输入地址http://localhost:8000/index.html,回车,可看到你的第一个web页面了。

Install Helper Tools (optional)-安装辅助工具(可选择项)

bower,一个管理包依赖的工具,用法请移步百度。

未完待续。。。。。。

posted @ 2018-03-19 23:09  xyJen  阅读(143)  评论(0)    收藏  举报