Angular Cli

ng serve –proxy-config proxy.conf.json

创建新项目:ng new projectName[options]

创建组件: ng g component componentName

创建服务 : ng generate service hero

创建路由: ng generate module app-routing –flat –module=app

启动serve:ng serve ,默认端口4200

打包:ng build –prod,默认生成/dist目录,并将打包后的结果放在此

测试:ng test,使用karma运行单元测试。

cli版本:ng version

错误检测:ng lint,运行codelyzer linter检测

angular-cli下使用jQuery

npm install jquery –save-dev

angular-cli下使用bootstrap
下载 ng-bootstrap
ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式:
npm install bootstrap@4.0.0-alpha.2 –save

接着下载 ng-bootstrap , 同样使用 npm 包的形式:
npm install @ng-bootstrap/ng-bootstrap –save

这里写图片描述

配置package.json文件,然后更新。npm install

这里写图片描述

2.命令参考

2.1创建项目

参数:
-dry-run -d 只输出要创建的文件和执行的操作,实际上并没有创建项目

-verbose -v输出详细信息

-skip-npm 在项目第一次创建时,不执行任何的npm命令

-name 指定创建项目的名称

2.2初始化项目

在当前所在目录下初始化一个新的Angular项目

命令:ng init proName[options]

参数同创建项目

2.3创建类

在项目中创建模块,组件,指令等代码

命令:ng generate [options]

简写:ng g [options]

类型 用法
Component ng g component my-new-component

Directive ng g directive my-new-directive

Pipe ng g pipe my-new-pipe

Service ng g service my-new-service

Class ng g class my-new-class

Interface ng g interface my-new-interface

Enum ng g enum my-new-enum

Module ng g module my-module

Route ng g route my-route 当前已禁用

Route 配合Module一起创建。ng g module myModule – routing

参数:

-flat 不在自用目录内创建代码

-route = 指定父路由,仅用于生成组件和路由默认为指定的路径

-skip-route-generation 跳过生成父路由配置,只能用于路由命令

-defult 指定路由应为默认路由

-lazy 指定路由是延迟的。默认为true

在指定目录下创建组件等

src目录下默认在app文件夹下创建组件。
若想在子目录下创建,则需要先cd到这个目录,再执行ng g

使用sass
在cli创建的ng2项目中使用sass很方便,只需要将你的样式文件的css后缀改成sass,并且在component.ts中引用就可以了,cli内部已经配置了sass-loader。

项目中的angular.json中有一个配置
“defults”:{
“styleExt”:”sass”
}

文件模块使用

import { Directive, HostBinding, Input, HostListener } from ‘@angular/core’;
import { ElementRef, Renderer } from ‘@angular/core’;
import { Component, OnInit } from ‘@angular/core’;
import { Http } from ‘@angular/http’;

应用模块

declaration:包装组件或指令等
providers:依赖注入(服务)
imports:导入其他模块
bootstrap:设置根组件
export:到处组件或指令等

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值