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. .NET 程序集与命名空间

    程序集 程序集(assembly)是一个或多个托管模块,以及一些资源文件的逻辑组合. 组成部分 Windows文件首部 CLR文件首部 程序集清单 类型元数据 MSIL(CIL)代码 嵌入资源集 作用 ...

  2. (转)Java中使用Jedis操作Redis

    转自http://www.cnblogs.com/liuling/p/2014-4-19-04.html 使用Java操作Redis需要jedis-2.1.0.jar,下载地址:http://file ...

  3. iOS 设置非ARC类

    用-fno-objc-arc标记来禁用在ARC工程那些不支持ARC的文件的ARC用-fobjc-arc标记启用非ARC工程中支持ARC的文件

  4. hadoop2的思想架构

    mapreduce 2 思想架构 mr2解决了mr1的jobTracker的单点颈瓶问题,这个问题会影响hadoop的扩展性,集群的可靠性,mr1中jobTracker负责集群作业的分发,管理,调度, ...

  5. spring 的IoC的个人理解

    1.ioc IoC的概念介绍 ( a).依赖注入, 分为依赖 和 注入  , 其实依赖是一种耦合方式, 通过spirng在运行时将这种依赖关系完成, 达到解耦目的, 同时达到代码重用, 方便测试,更加 ...

  6. 【leetcode】Max Points on a Line

    Max Points on a Line 题目描述: Given n points on a 2D plane, find the maximum number of points that lie ...

  7. jq点击显示,再点击隐藏

    每次都会遇到的问题: <script> $("button").click(function(){ if($(".div").css("d ...

  8. Go语言 数组

    介绍 Array 是值类型,Slice 和 Map 是引用类型.他们是有很大区别的,尤其是在参数传递的时候. 另外,Slice 和 Map 的变量 仅仅声明是不行的,必须还要分配空间(也就是初始化,i ...

  9. Android Studio 之 no render target selected

    今天第一次使用android studio, 莫名其妙出现 no render target selected的错误,没有设计界面, 各种百度之后在 stackoverflow.com/questio ...

  10. css3 tween

    /* * Tween.js * t: current time(当前时间) * b: beginning value(初始值) * c: change in value(变化量) * d: durat ...