angualr4 环境搭建

你的名字 2022-06-15 07:58 134阅读 0赞

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

[NodeJS、NPM安装配置步骤(windows版本)][NodeJS_NPM_windows]

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

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

![Center][]

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

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

![Center 1][]

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

![Center 2][]

# 安装quickstart #

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

![Center 3][]

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

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

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

启动成功之后可以看到

![Center 4][]

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

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

![Center 5][]

打开之后可以看到

"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

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

![Center 6][]

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

[NodeJS_NPM_windows]: http://blog.csdn.net/cjagkp/article/details/52160823
[http_nodejs.org]: http://nodejs.org/
[Center]: /images/20220615/e1ac78c7819344aea3d2e1c83ab0189c.png
[Center 1]: /images/20220615/d9d2d2d1bb8c4e33b00b25bb7ef893d4.png
[Center 2]: /images/20220615/295d8a18091742c3a6c06719d90f3130.png
[Center 3]: /images/20220615/de87b3af50844842b66a4d98ebd3d84c.png
[Link 1]: https://www.angular.cn/docs/ts/latest/guide/setup.html#clone
[Link 2]: https://www.angular.cn/docs/ts/latest/guide/setup.html#download
[npm]: https://www.angular.cn/docs/ts/latest/guide/setup.html#install-prerequisites
[Center 4]: /images/20220615/d0ac6774bdd94fa5ac2b519f62468fa8.png
[Center 5]: /images/20220615/7fa66bc7e8f94047b979f37763136a90.png
[Center 6]: /images/20220615/399fb307cbdd4217bc6404a99407a0da.png