目录:

  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

angular cli + primeNG的更多相关文章

  1. PrimeNG01 angular集成PrimeNG

    1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...

  2. angular cli 反向代理实现跨域

    版本: 1.后端实现跨域(php) header("Access-Control-Allow-Origin: *"); // // 响应类型 // header('Access-C ...

  3. Angular环境准备和Angular cli

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  4. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

  5. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  6. angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法

    在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...

  7. 使用Angular CLI生成 Angular 5项目

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...

  8. Angular4---起步----环境配置安装@angular/cli

    学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...

  9. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

随机推荐

  1. KETTLE教程实战

    kettle初探 Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定.Kettle 中文名称叫水壶,该项目的主程 ...

  2. react-native布局中的层级问题(zIndex,elevation)

    目录 关于层级的zIndex/elevation 1.zIndex是rn在0.30开始支持的属性,是可以生效的: 2.shadow和elevation 结论 关于层级的zIndex/elevation ...

  3. [TimLinux] myblog 首页创建

    1. 设计 2. 结构 3. 实现 templates/common/layout.html: <!DOCTYPE html> <html lang="zh"&g ...

  4. openlayers6结合geoserver实现地图空间查询(附源码下载)

    前言 之前写过一篇 openlayers4 版本的地图空间查询文章,但是由于是封装一层 js 代码写的,很多初学者看起来比较有点吃力,所以本篇文章重新写一篇地图空间查询文章,直接基于最新版本 open ...

  5. Coderfocers-616c

    You are given a rectangular field of n × m cells. Each cell is either empty or impassable (contains ...

  6. ZOJ2770-Burn The Linked Camp(火烧连营Orz 差分约束-线性约束+最长路(OR反向最短路))

    It is well known that, in the period of The Three Empires, Liu Bei, the emperor of the Shu Empire, w ...

  7. Vue - 组件通信之$attrs、$listeners

    前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...

  8. 了解一下Mysql分布式事务及优缺点、使用案例(php+mysql)

    在开发中,为了降低单点压力,通常会根据业务情况进行分表分库,将表分布在不同的库中(库可能分布在不同的机器上),但是一个业务场景可能会同时处理两个表的操作.在这种场景下,事务的提交会变得相对复杂,因为多 ...

  9. Element UI 源码—— Carousel 走马灯学习

    参考博客:https://segmentfault.com/a/1190000014384638?utm_source=tag-newest

  10. 10分钟理解BFC原理

    10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...