angular cli + primeNG
目录:
1、安装 angular cli
2、创建项目
3、构建路由
4、新建组件
5、组件之间的通信
6、引入primeNG
7、修改primeNG组件样式
8、问题
------------------------------------------------------------------------------------------
1、安装 angular cli
命令 --cnpm install -g @angular/cli
安装完成后可以查看版本是否ok --ng version
官网地址: https://angular.io/start/data 查看语法这些 *ngIf *ngFor
2、创建项目
-- ng init - 在当前目录创建新的应用程序
-- ng new - 创建新的目录,然后在新建的目录中运行 ng init 命令
-- ng new web 创建web
项目创建完成之后开始运行
-- cd web
-- ng serve
运行成功默认为4200,网页上可以访问
3、构建路由
web目录下,先生成components
-- cd web
-- ng g c home // 简写 ng generate component home
创建完成后
app.module.ts web/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; 引入@NgModule({declarations: [AppComponent, HomeComponent //使用 ],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }
在app-routing.module.ts 创建路由 web/src/app/app-routing.module.ts
import { HomeComponent } from './home/home.component'; 引入const routes: Routes = [{path: '', pathMatch: 'full', redirectTo:'home'}, // redirect{path: 'home', component:HomeComponent} ];
打开主页页面就会自动进入home页面
4、新建组件
上面已经用到了,使用 -- ng generate component header / -- ng g c header
创建好的组件我移动到了components目录下
里面的selector 就是调用的名称 <app-header></app-header> 这样调用
在app.module.ts 里面引入
调用app-header
5、组件之间的通信
父组件-> 子组件 通过@Input
home -> header
上面我们顶一个title对象传递给header组件,接下来header组件要接收
接收完之后,就可以使用
子组件-> 父组件 通过@Output
添加点击按钮
子组件上面点击按钮出发checkedCallback时间,将id值存到checkedBack里面传给父组件
父组件接收,通过backMsg
<app-header [title]='title' (backMsg)='checkBackMsg($event)'></app-header>
6、引入primeNG
-- npm install primeng --save
-- npm install primeicons --save
-- npm install @angular/animations --save
使用模块
import {BrowserModule} from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';@NgModule({imports: [BrowserModule,BrowserAnimationsModule,//... ],//... }) export class YourAppModule { }
引入样式
angular.json 修改styles web/src/angular.json
"styles": ["node_modules/primeicons/primeicons.css","node_modules/primeng/resources/themes/nova-light/theme.css","node_modules/primeng/resources/primeng.min.css",//... ],
针对每个组件看官网文档, 官网: https://www.primefaces.org
7、修改primeNG组件样式
/*修改.ui-panelmenu a的css*/ :host ::ng-deep .ui-panelmenu a{background:gray;color: white;font-size: 14px; }
8、问题
a、Can't resolve '@angular/cdk/scrolling
-- npm install --save @angular/material
-- npm install --save @angular/cdk
b、ngModel问题
import { FormsModule } from '@angular/forms';
c、语法问题
angular cli语法 改变 ng-if ----> *ngIF ng-for ----> *ngFOr
转载于:https://www.cnblogs.com/shuangzikun/p/taotao_angular_cli.html
angular cli + primeNG相关推荐
- PrimeNG01 angular集成PrimeNG
1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...
- angular JS + PrimeNG 初学使用
angular Js 初学习 首先需要下载安装node js, 如果太老版本可以选择更新到最新版本.命令; npm install -g n, 如果有error 使用 npm install -g n ...
- ng命令汇总:Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...
- Angular CLI在线安装和离线安装
Angular CLI 安装方式 默认已经安装了 Node.js 和 npm 包管理器. 1. 在线安装 可以使用外网的情况下,可以使用在线安装的方式. 要使用 npm 命令全局安装 CLI,请打开终 ...
- angular cli全局版本大于本地版本 把本地版本升级方式
查看 angular 版本 ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...
- 使用Angular CLI从蓝本生成代码
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 这篇文章主要是讲生 ...
- Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...
- Angular cli 发布自定义组件
建立工作空间 ng new Test --style=scss //Angular6.x及以下可以使用这个命令指定使用.scss样式表 ng new Test ...
- Linux安装指定版本Angular Cli
环境准备: 1.安装nodejs 不同版本Angular Cli需要安装不同版本的nodejs,本文安装v10.16.0版本的nodejs,可以支持7.x版本的Angular Cli.由于开发需要使用 ...
最新文章
- GAN与力学系统的海森伯图像
- 【Python进阶】Python进阶专栏、编程与开源框架知识星球上线,等你来follow
- VTK修炼之道29:图像统计_彩色直方图计算
- java批量导入数据到excel
- android 开发art,Android应用开发之Android 系统启动原理(art 虚拟机)
- updatePanle总结
- UVa-227-谜题
- 按键精灵手机助手之实战篇(四)项目源码
- 目录_网易微专业C++系统工程师
- 基于Java Web社区医院远程挂号
- 最全前端面试问题及答案总结
- 4G模块-EM05驱动调试分享-02(Android上层更改)
- Mac 卸载/安装 maven
- [hihocoder]1238 : Total Highway Distance
- Java中数组的写法
- JAVA——微博热搜爬虫
- 苹果云服务icloud_苹果手机icloud手动备份和还原个人用户资料
- 快速打造一款新款爆品可以这么做
- 数据库系统概论(第十章数据库恢复技术)
- 什么是老生代的标记算法