不得不说现在很流行前端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的可以忽略这一步。

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

  1. 新建项目目录(你可以暂时为其取名quickstart,以后再重命名)。

  2. 克隆或者下载《快速起步》种子到你的项目目录。

    git clone https://github.com/angular/quickstart.git quickstart
  3. cd quickstart
  4. 安装 npm 包。

    npm install
  5. 运行npm start来启动例子应用。

    npm start
Bash for Windowsnpm 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 环境搭建的更多相关文章

  1. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  2. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

  3. rnandroid环境搭建

    react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...

  4. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  5. springMVC初探--环境搭建和第一个HelloWorld简单项目

    注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...

  6. 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~

    一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...

  7. Nexus(一)环境搭建

    昨天,成功搭建了自己的 Maven 环境(详见:Maven(一)环境搭建),今天就来研究和探讨下 Nexus 的搭建! 使用背景: 安装环境:Windows 10 -64位 JDK版本:1.7 Mav ...

  8. 「译」JUnit 5 系列:环境搭建

    原文地址:http://blog.codefx.org/libraries/junit-5-setup/ 原文日期:15, Feb, 2016 译文首发:Linesh 的博客:环境搭建 我的 Gith ...

  9. appium+robotframework环境搭建

    appium+robotframework环境搭建步骤(Windows系统的appium自动化测试,只适用于测试安卓机:ios机需要在mac搭建appium环境后测试) 搭建步骤,共分为3部分: 一. ...

随机推荐

  1. GIT学习笔记(3):分支管理

    GIT学习笔记(3):分支管理 何谓分支 GIT是如何存储数据的 GIT不是存储文件差异或者变化量,而是一系列文件的快照.在Git提交时,会保存一个提交(commit)对象,该对象包含一个指向暂存内容 ...

  2. PAT 天梯赛 L1-016. 查验身份证 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-016 AC代码 #include <iostream> #include <cstdio&g ...

  3. Matlab 使用的一些常用技巧

    主要是编程过程中遇到的一些问题和解决,大多数都是来自于Matlab文档.随时总结: Vectorization 向量化是Matlab作为一种专注数值.矩阵计算的语言,和其他语言的一个差别.这也是Mat ...

  4. $python虚拟化运行环境——virtualenv

    介绍 virtualenv是一种虚拟化环境,可以理解为创建了一个虚拟化的pyhon运行空间,可以从新安装各种库,而与本机环境互不影响,互相隔离. 安装及使用 首先要安装包管理工具pip(pip的使用详 ...

  5. jQuery带缩略图的宽屏焦点图插件

    在线演示 本地下载

  6. awk分割列-【AWK学习之旅】

    ---===AWK学习之旅===--- awk 内置分割函数:split,将列按照指定分割符,分割成数组 用法:split(str1,array,"分隔符") 文件内容: [roo ...

  7. adplayer移植【转】

    本文转载自:https://blog.csdn.net/qq361294382/article/details/50525412 这两天做madplayer移植,由于是刚装的ubuntu14.04,所 ...

  8. cocoa应用程序中NSStatusItem的使用

    mac上的应用程序除了左上方会有菜单之外,在屏幕的右上方也会有一个图标样的菜单,这个类似于windows上右下角的system tray. 本文讲述如何给自己的应用程序添加一个system tray( ...

  9. idea绿色版+谷歌浏览器绿色版——设置打开jsp文件

    首先我们的工具有 1.idea绿色版 2.Chrome绿色版 3.JavaJDK 4.Tomcat绿色版 文件放在那里都可以 1.idea设置默认打开Chrome 2.idea设置选择Tomcat和J ...

  10. 多线程-模拟阻塞queue队列

    前阵子学习了多线程,现在进行总结一下,模拟队列. 分析问题: (1)首先需要一个容器存放元素,这里用linkedList队列. (2)每次像容器中添加或删除元素的时候需要计数,所以这里需要一个计数器, ...