自我记录-0-引导程序

In this step of the tutorial, you will become familiar with the most important source code files of the AngularJS Phonecat App. You will also learn how to start the development servers bundled with angular-seed, and run the application in the browser.

在这一步引导页中，你将熟悉这个AngularJS Phonecat App最重要的源码文件。你也将学习到怎么用angular-seed一起开启服务器，怎么在浏览器中运行应用程序。

Before you continue, make sure you have set up your development environment and installed all necessary dependencies, as described in the Environment Setup section.

在你继续之前，首先保证你已经把开发环境和所需要的所有以来都已经安装好了（所要求开发环境和依赖这些在上一篇中提到）。

In the angular-phonecat directory, run this command:

在 angular-phonecat目录下，运行下边命令：

git checkout -f step-0

-----重点-----

在运行 git checkout命令时，可能会遇到如下报错

git-checkout-fault

原因：
直接clone下来的项目，需要重新初始化仓库，建立新的仓库。

**解决方法： **
git init一下，重复运行 git checkout -f step-0，发现又报错如下。

我是猪吗……

报错已经很明显了：

pathspec 'step-0' did not match any file(s) known to git.

意思是 step-0 在git工作目录里边找不到，因为我根本没建立这个分支， 切换个屁啊。

解决方法：

  1. git init 新建仓库
  2. git checkout -b step-0   新建分支 step-0 并转到该分支上去
  3. git checkout -f step-0   该命令将重置phonecat项目的工作目录，建议在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。
  4. 最终显示如下：

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

If you haven't already done so, you need to install the dependencies by running:

如果你还没准备好，你先运行下边的命令安装依赖吧：

npm install

To see the app running in a browser, open a separate terminal/command line tab or window, then run npm start to start the web server. Now, open a browser window for the app and navigate to http://localhost:8000/index.html.

为了在浏览器中能看到程序云心，打开一个暂时命令行窗口（例如：git bash），然后运行 npm start 命令，输入地址，回车，看到页面。

Note that if you already ran the master branch app prior to checking out step-0, you may see the cached master version of the app in your browser window at this point. Just hit refresh to re-load the page.

请注意，如果在切换第0步之前已经运行了主分支应用程序，则此时可能会在浏览器窗口中看到该应用程序的缓存主版本。 只需点击刷新重新加载页面。

意思是：

之前不是有个git checkout -f step-0么，在运行这个命令之前，你运行了npm start，那么就是默认在主分支上打开了app，这个时候再浏览器中看到是缓存的主版本（前提是你在分支 step-0那儿进行更改了，如果没更改，其实显示的是一样的XD），要想看到更改的版本，点击刷新完事，F5不顶事的时候，按Ctrl + F5，要是还不顶事，换浏览器，要是还不行，找bug吧。(●￣(ｴ)￣●)

You can now see the page in your browser. It's not very exciting, but that's OK.

现在可以在浏览器看到你的页面了，淡定点，不过走到这一步，还算不错。

The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below. The code contains some key AngularJS elements that we will need as we progress.

浏览器中的页面显示出 Nothing here yet!

由下边这段HTML代码构成的，代码里边包含一些在以后的引导过程中我们需要的重要的AngularJS元素。

app/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" />

<script src="bower_components/angular/angular.js"></script>

</head>

<body>


</span><span class="tag">&lt;p&gt;</span><span class="pln">Nothing here {{'yet' + '!'}}</span><span class="tag">&lt;/p&gt;</span><span class="pln">



</body>

</html>
`

What is the code doing?-代码干了些什么事呢？

`



ng-app attribute:

<html ng-app>

The ng-app attribute represents an AngularJS directive, named ngApp (AngularJS uses kebab-case for its custom attributes and camelCase for the corresponding directives which implement them). This directive is used to flag the HTML element that AngularJS should consider to be the root element of our application. This gives application developers the freedom to tell AngularJS if the entire HTML page or only a portion of it should be treated as the AngularJS application.

`

ng-app属性代表是AngularJS指令，指令名叫做ngApp（AngularJS为其自定义属性使用kebab-case，使用camelCase驼峰式命名实现相应的指令）

ng-app指令标记了AngularJS脚本的作用域，在中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。

后半截参考AngularJS中文社区 AngularJS入门教程00：引导程序

操作步骤

  1. git clone下来空白项目以后（指的是还没实现页面但是有骨架的那种空白），在 angular-phonecat 目录下，打开git bash
  2. 运行 npm install，安装依赖，运行npm start，启动服务器。
  3. 启动服务器需要时间，看到http://localhost:8000字样，可以打开浏览器了。
  4. 在浏览器地址栏，输入http://localhost:8000/index.html，回车，可以看到 angular-phonecat\app\index.html内容。

现在进行下一步操作。

posted @ 2018-03-20 14:29  xyJen  阅读(110)  评论(0)    收藏  举报