Angular CLI简介2
来源:互联网 发布:centos系统安装教程 编辑:程序博客网 时间:2024/06/07 19:18
本文整理 Angular CLI的常用命令
我们在使用Angular2项目时,直接使用官网提供的基础配置文件,在NodeJS下面就可以生成一个新的ng2项目,但是这样非常不便利,每次都要新建目录,复制配置文件,使用Node命令安装支持库,最后才是写代码。Angular-cli就是用来简化这一操作的,而且官方配置文件不包含打包命令,对于新手来说,对System打包和webpack打包都不熟悉的情况下,使用Angular-cli能够非常方便的生存一样ng2项目,打包ng2项目,集中在编写项目代码上,省略繁琐的配置过程。
1、 安装Angular Cli
npm install -g angular-cli
-g命令表示安装在全局。
2、使用Angular cli初始化ng2项目
ng new my-ng2-app
这样就创建一个名为my-ng2-app的项目
如果在要把现有目录转成ng2项目,只需要运行下面命令:
mkdir ng2-testcd ng2-testng init
3、运行ng项目
ng serve
或者
npm start
两个都可以,默认端口为:4200
http://localhost:4200
4、修改默认端口 -> 修改为(3000)
ng serve -p 3000
5、打包发布
ng build
目录中就会出现dist文件夹,可以看到里面就是打包后的文件,包含一些html、js等文件,上传服务器就可以运行代码了。
6、修改文件
修改目录中的src文件夹,里面就是TypeScript书写的组件,服务,管道,指令等文件。
二、使用ng g / ng generate 命令创建文件
ng generate component my-new-componentng g component my-new-component # using the alias# components support relative path generation# if in the directory src/app/feature/ and you runng g component new-cmp# your component will be generated in src/app/feature/new-cmp# but if you were to runng g component ../newer-cmp# your component will be generated in src/app/newer-cmp# if in the directory src/app you can also runng g component feature/new-cmp# and your component will be generated in src/app/feature/new-cmp
You can find all possible blueprints in the table below:
ng g component my-new-component
Directiveng g directive my-new-directive
Pipeng g pipe my-new-pipe
Serviceng g service my-new-service
Classng g class my-new-class
Guardng g guard my-new-guard
Interfaceng g interface my-new-interface
Enumng g enum my-new-enum
Moduleng g module my-module
angular-cli will add reference to components
, directives
and pipes
automatically in the app.module.ts
. If you need to add this references to another custom module, follow this steps:
ng g module new-module
to create a new module- call
ng g component new-module/new-component
This should add the new component
, directive
or pipe
reference to the new-module
you've created.
更多:
Angular CLI简介
Ionic2 相关文档整理
Visual Studio Code v1.18发布
- Angular CLI简介2
- Angular CLI简介
- Angular-cli
- angular-cli
- angular-cli
- angular-cli
- Angular CLI is here for AngularJS 2
- 如何在 WebStorm 使用 Angular CLI 建立 Angular 2
- 使用Angular-cli搭建Angular Material 2应用示例
- angular-cli(material.angular.io)
- angualar angular-cli angular命令
- 【Angular】安装Angular—cli
- angular-cli 安装问题
- angular cli安装
- 安装Angular-Cli
- npm 安装angular-cli
- angular-cli安装步骤
- angular2-angular-cli
- java学习
- Oracle中跨服务器访问数据
- 第一次使用LoadRunner时遇到的问题
- 【开发笔记】C# MVC 后端执行Js并保留用户数据
- Makefile --使用变量
- Angular CLI简介2
- 移动硬盘位置不可用参数错误的解决方法
- 运维实战案例之“Too many open files”错误与解决方法
- Java并发编程:Lock
- Spring Boot 集成mybatis的分页拦截器:PageHelper
- C++中string.find()函数与string::npos
- 17.11.28日报
- tp5自动加载创建admin和index文件夹,内含MVC文件夹
- [BZOJ] 3668