1.安装 nodejs(最新稳定版)https://nodejs.org/en/

安装 typescript

npm install -g typescript

安装 angular-cli(关于CLI的使用方法可以看这里 https://cli.angular.io/

npm install -g angular-cli

(此处安装失败的话,可尝试将 nodejs 升级到 LTS 版)

2.安装好 angular-cli,就可以使用 ng 命令创建项目了

ng new [Project Name]

3.进入项目并启动

cd [Project Name]
ng serve
尝试运行 http://localhost:4200 (默认是端口 4200)
 
自定义端口:
ng serve --port 4201

自定义IP:

ng serve --host 192.168.1.151

4.创建新组件

ng generate component simple-form --inline-template --inline-style

可缩写为:

ng g c simple-form -it -is
5.了解项目结构
看一下,app.module.ts,自动关联组件文件 simple-form ,新建的组件位置在 src/app/simple-form
看一下,app.component.ts 引用结构,在 app.component.html 中 加入
<app-simple-form></app-simple-form>

Angular2 起步(1)的更多相关文章

  1. Angular2快速起步——构建一个简单的应用

    构建此应用,分为如下几步: 1.环境准备:安装Node.js和npm: 2.创建并配置此项目: 3.创建应用: 4.创建组件并添加到应用程序中: 5.启动应用程序: 6.定义作为该应用的宿主页面: 7 ...

  2. angular2新建的项目上传github

    前提1.git配置好,参见博文 git常用操作 2.angular2安装配置好,这个网上有很多教程,就不多说了,参见angular2快速起步 需要注意的是,大部分问题都是网络问题. 3.新建一个ng项 ...

  3. 记一次Angular2环境搭建及My First Angular App小demo呈现

    参考连接?不如说是照搬链接.AngularJs官网地址快速起步地址. 对于一个一直只是用jq,偶尔学习点Knockout js,了解一点mvvm结构的前端来说,学习Angular2还是有点困难的.好了 ...

  4. Angular2 中的依赖包详解

    转自:http://blog.csdn.net/feiying008/article/details/53033704 目录 dependencies 和 devDependencies depend ...

  5. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  6. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  7. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  8. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  9. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

随机推荐

  1. java2

    1:关键字(掌握) (1)被Java语言赋予特定含义的单词 (2)特点: 全部小写. (3)注意事项: A:goto和const作为保留字存在. B:类似于Notepad++这样的高级记事本会对关键字 ...

  2. Shell 编程 : 数值,字符,字符串

    数值运算命令     expr 命令     expr expression     expression 是由字符串 以及 运算符所组成的,每一个字符串或说运算符之间必须用空格隔开,   运算符的优 ...

  3. Delphi 控件大全

    delphi 控件大全(确实很全)   delphi 控件查询:http://www.torry.net/ http://www.jrsoftware.org Tb97 最有名的工具条(ToolBar ...

  4. VR系统的组成

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 一个典型的虚拟现实系统主要由计算机.输入/输出设备.应用软件和数据库等部分组成. 1.计算机 在虚拟现实 ...

  5. 配置https

    引子: 最近在一篇文章中了解到EFF(电子前哨基金会)为了推广https协议,成立了一个let'sencrypt项目,可以发放免费的证书,此证书可以被大多数主流浏览器所信任,这个邪恶的念头一爆发,就让 ...

  6. HTML表单提交

    <!DOCTYPE html> <!--当前文档为html5--> <html> <head> <!--设置文档编码--> <meta ...

  7. 剪短的python数据结构和算法的书《Data Structures and Algorithms Using Python》

    按书上练习完,就可以知道日常的用处啦 #!/usr/bin/env python # -*- coding: utf-8 -*- # learn <<Problem Solving wit ...

  8. Cycles渲染研究测试效果图

    从左到右:.贴图镂空透明  2.纹理半透明  3.纹理  4.材质半透明  5.材质 输入输出节点信息如下: ############################################# ...

  9. WPF使用IDataErrorInfo进行数据校验

    这篇博客将介绍如何使用IDataErrorInfo进行数据校验.下面直接看例子.一个Customer类,两个属性(FirstName, Age) class Customer { public str ...

  10. C# Winform TreeView 的一些基本用法

    下面是treeview的用法TreeView组件是由多个类来定义的,TreeView组件是由命名空间"System.Windows .Forms"中的"TreeView& ...