Angular2开发环境搭建
来源:互联网 发布:淘宝联盟自己怎么使用 编辑:程序博客网 时间:2024/05/21 12:43
Angular2开发环境搭建
一、环境配置:
CLI:command Line Interface的缩写(命令行界面)
每个框架都会有对应的cli,俗称脚手架
1、安装node
进入node官网,下载node并安装,最好安装6.x以上的版本
2、安装angular-cli脚手架
npm install -g angular-cli
3、用法
ng –help
查看所有用法
二、创建开发环境
1、创建项目
从一个文件中打开node命令行界面(即是在一个文件夹下创建项目),输入命令:
ng new myFirstAngular(项目名)
项目创建成功。
2、运行项目
cd myFirstAngular 进入项目下
ng serve 运行项目
到浏览器下输入http://localhost:4200/,修改项目中的文件后会自动部署。
3、可以配置默认的HTTP端口和一个LiveReload server
ng serve –host 0.0.0.0 –port 4201 –live-load-port 49153
4、生成组件、指令、管道和服务
1)、生成一个名为myFirstComponent的组件:
ng g component myFirstComponent
在src/app文件夹下生成一个myFirstComponent文件夹,包含四个文件
2)、ng g directive myFirstDirective
3)、pipe,service,class,interface,enum,module
5、添加模块Module
执行添加模块命令,注意新添加的文件区别
ng g module my-new-component
三、创建路由
这里 cli 暂时禁用了创建路由,新的路由生成器即将到来,可以在这里阅读新路由器的官方文档:https://angular.io/docs/ts/latest/guide/router.html(英文)
https://angular.cn/docs/ts/latest/guide/router.html#!#base-href(中文)
1、创建一级路由
已经在项目中添加了myNewcomponent和user两个组件,可以认为这两个组件就是两个页面,所以在下面,来实现点击超连接跳转到相应的页面。
打开项目的根模块app.module.ts页面,可以看到,在我们用命令添加组件的时候,已经自动将myNewComponet跟user两个组件添加了依赖。这里,我们假定user这个组件默认没有绑定,需要懒加载,那么就需要把UserComponent依赖去除。下面代码是实现路由的方法。
Routes里面有三个数组,第一个表示系统默路由认指定的页面suibian;第二个表示当路由为/myNewComponent时指定的页面,第三个则表示按需加载user页面。配置根模块,还不能实现页面切换,下面添加UI元素。
2、创建二级路由
配置user.module.ts模块
3、运行结果
导航栏地址中输入localhost:4200/suibian/
四、建立一个build
ng build
会生成到dist/目录下
- Angular2开发环境搭建
- 【Angular2】搭建开发环境
- angular2,angular4开发环境搭建
- Angular2开发环境搭建@WebStorm
- [Angular2]eclipse中angular2开发环境的搭建
- Angular2.0搭建本地开发环境
- Angular2从环境搭建到开发
- Angular2 从搭建环境到开发
- Angular2开发环境搭建之VS Code
- Angular2环境搭建
- angular2 +Polymer 环境搭建
- angular2 国内环境搭建
- angular2基础环境搭建
- 搭建Angular2环境
- Angular2环境搭建
- Angular2搭建环境
- 【Angular2】如何搭建Angular2的环境
- 【Angular2】如何搭建Angular2的环境
- Graph(1)--图的基本概念
- 1015. Letter-moving Game (35)解题报告
- 优先队列之二叉堆(JAVA实现)
- JDBC操作与数据库的链接
- urllib库python2和python3具体区别
- Angular2开发环境搭建
- php开发手机app接口
- windows下mysql 主从同步(单向同步)
- 关于数据库优化1——关于count(1),count(*),和count(列名)的区别,和关于表中字段顺序的问题
- Python3.x和Python2.x的区别
- 使用delete方法接收客户端提交的delete请求
- UE4局域网斗地主(三)
- 文章标题
- i++和++i的区别