目录:

  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. Delphi - 手把手教你基于D7+Access常用管理系统架构的设计与实现 (更新中)

    前言 从事软件开发工作好多年了,学的越深入越觉得自己无知,所以还是要对知识保持敬畏之心,活到老,学到老! 健身和代码一样都不能少,身体是革命的本钱,特别是我们这种高危工种,所以小伙伴们运动起来!有没有 ...

  2. oracle监听查看、启动和停止

    oracle监听查看.启动和停止 查看监听lsnrctl status 停止监听lsnrctl stop 启动监听lsnrctl start

  3. MongoDB的第二天(更新,删除,查询,索引)

    Mongodb的更新方式有三种 update函数,操作符更新,save函数 update: 语法格式:db.COLLECTION_NAME.update({查询条件},{更新内容},{更新参数(可选) ...

  4. Cookie俩步操作实现n天免登陆

    实现这个功能主要思路是:在登录成功的时候去给用户名和密码加上Cookie,将他们的值存在Cookie中,为了下次登录记住用户名和密码,然后在登录界面,获取所有的cookie,然后将值一一遍历出来.和用 ...

  5. 使用echarts去对数据进行图形分析

    首先导入js包:echarts.min.js <script type="text/javascript" src="js/echarts.min.js" ...

  6. OA思维导图(第一次画)

  7. [TimLinux] Python __hash__ 可哈希集合

    规则: __hash__ 应该返回一个整数,hash()函数计算基础类型的hash值 可哈希集合:set(), forzenset(), dict() 三种数据结构操作要求 key 值唯一,判断唯一的 ...

  8. 2019沈阳icpc网络赛H德州扑克

    题面:https://nanti.jisuanke.com/t/41408 题意:A,2,3,4,5,6,7,8,9,10,J,Q,K,13张牌,无花色之分,val为1~13. 给n个人名+n个牌,输 ...

  9. jquery (对内容,元素,属性,class的操作)

    对内容的操作: 捕获:获得内容 text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值. 设置:设置内容 ...

  10. C语言每日一练——第3题

    一.题目要求 程序功能:计算100以内满足以下条件的所有整数i的个数cnt以及这些i之和sum.条件:i, i+4 ,i+10都是素数,同时i+10小于100.最后电影函数writeDAT()函数把结 ...