Code Copied

AngularJS教程01 - 环境准备

1. Angular JS介绍

Angular JS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

Angular JS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

Angular JS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。Angular JS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:

  • 使用双大括号{{}}语法进行数据绑定;
  • 使用DOM控制结构来实现迭代或者隐藏DOM片段;
  • 支持表单和表单的验证;
  • 能将逻辑代码关联到相关的DOM元素上;
  • 能将HTML分组成可重用的组件。

2. 安装Git

访问http://git-scm.com/download下载git

image

image

image

3. 安装Node.js

3.1 Node.js简介

Node.js官方首页对于Node.js介绍简明又精髓

image

Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。
Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的实时应用。

3.2 Node.js的下载和安装

访问https://nodejs.org/download/,根据个人电脑的OS选择安装包。
笔者的OS是Win 8 Pro x64的,所以选择64bit的.msi安装包,目前的版本是V4.1.0 (该版本的前一个版本是V0.12.7)。

image

V4.1.0版本已经包含了NPM(Node.js的包管理器),早期的一些Node.js不包含NPM,NPM需要单独安装。

image

安装完成后,使用node -v命令检测Node.js是否安装成功。

image

3.3 NPM介绍

来自官网的说明:https://www.npmjs.com/about

image

NPM是Node.js的一个扩展模块,Node.js自身提供了基本的模块,但是在这些模块上进行开发实际应用需要很多的工作。
所幸的是NPM提供了很多Node.js的扩展包,这些包可以帮助web开发者完成一些复杂的应用。

image

熟悉Visual Studio的人对Nuget Package Manager不会陌生,Nuget上发布了很多类库和框架,通过安装命令能够将这些类库和框架引用到VS工程中。
虽然Visual Studio的Nuget Package Manager的缩写也是NPM,但不要把它和Node.js的NPM混淆了。

3.4 运行Node.js

Node.js安装完后,按照官网的介绍,编写一个Hello World程序example.js。

image

打开Node.js command prompt工具,运行命令node example.js

image

然后在网页中打开网址http://127.0.0.1:1337

image

4. 安装Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。
Bower依赖于node, npm和git。

在Git Bash下执行npm install –g bower命令安装bower。

image

bower将安装在C:\Users\%UserName%\AppData\Roaming\npm\node_modules\目录下。

image

5. 安装Http-Server

Http-Server是基于Node.js的一个轻量级Web服务器,它的安装方法和bower类似。
Http-Server有两种安装方式,一种是作为Node app的方式安装,另外一种是全局安装。

在Git Bash下执行命令npm install http-server -g以全局方式装Http-Server。

image

启动Http-Server

在Git Bash下执行命令bin/http-server运行Http-Server

image

image

然后在网页中打开网址http://127.0.0.1:8080

image

6. 参考链接

Node.js和NPM安装教程: http://www.infoq.com/cn/articles/nodejs-npm-install-config
Node.js: https://nodejs.org/
NPM: https://www.npmjs.com/
Bower: http://bower.io/
Http-Server: https://github.com/indexzero/http-server
Angular JS介绍:http://baike.baidu.com/view/9604951.htm