不得不说现在很流行前端MVC框架，angularjs算是一种。以前也用过angularjs感觉还不错，刷新了我对前端的认知。特别是因为我本身是个java开发。但是感觉还是有很多缺点的，直到angularjs2x发布之后，我也没去看。这次听说4发布了一段时间了就准备去研究一下，看了官网发现1跟4完全不一样。建议没有学过angular的可以直接去看4。据说1跟4最大的区别在于。1的话叫做angularjs 1 而4的话叫做angular。注意4是没有js的。好了废话不多说了，现在来讲解一下Angular 4的环境搭建。

安装过Nodejs和NPM的可以忽略这一步。

1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到首页的“INSTALL”按钮，直接点击就会自动下载安装了。

2、安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）。

3、安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。

4、npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装。如下图，出现版本提示便OK了。

安装quickstart

我们先找到node.js的安装目录

点进去之后。打开CMD密令窗口安装quickstart

新建项目目录（你可以暂时为其取名quickstart，以后再重命名）。
克隆或者下载《快速起步》种子到你的项目目录。
```
git clone https://github.com/angular/quickstart.git quickstart
```
```
cd quickstart
```
安装 npm 包。
```
npm install
```
运行npm start来启动例子应用。
```
npm start
```

在Bash for Windows中npm start可能会失败，因为到2017-01为止它还不支持访问网络上的服务器。

启动成功之后可以看到

一定要注意自己的3000端口没有被占用过。

然后我们找到app.component.js文件

打开之后可以看到

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var core_1 = require("@angular/core");
var AppComponent = (function () {
    function AppComponent() {
        this.name = 'Angular';
    }
    return AppComponent;
}());
AppComponent = __decorate([
    core_1.Component({
        selector: 'my-app',
        template: "<h1>Hello {{name}}</h1>",
    })
], AppComponent);
exports.AppComponent = AppComponent;
//# sourceMappingURL=app.component.js.map

随便修改一个东西，看看页面会不会变化。

OK，整个搭建环境到此结束

巴特西

angualr4 环境搭建

安装quickstart

最新文章

热门文章