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
angular cli + primeNG的更多相关文章
- PrimeNG01 angular集成PrimeNG
1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...
- angular cli 反向代理实现跨域
版本: 1.后端实现跨域(php) header("Access-Control-Allow-Origin: *"); // // 响应类型 // header('Access-C ...
- Angular环境准备和Angular cli
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- 迈向angularjs2系列(8):angular cli和angular2种子项目
文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
- Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...
- angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法
在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular4---起步----环境配置安装@angular/cli
学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...
- 使用Angular CLI进行单元测试和E2E测试
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
随机推荐
- Delphi - 手把手教你基于D7+Access常用管理系统架构的设计与实现 (更新中)
前言 从事软件开发工作好多年了,学的越深入越觉得自己无知,所以还是要对知识保持敬畏之心,活到老,学到老! 健身和代码一样都不能少,身体是革命的本钱,特别是我们这种高危工种,所以小伙伴们运动起来!有没有 ...
- oracle监听查看、启动和停止
oracle监听查看.启动和停止 查看监听lsnrctl status 停止监听lsnrctl stop 启动监听lsnrctl start
- MongoDB的第二天(更新,删除,查询,索引)
Mongodb的更新方式有三种 update函数,操作符更新,save函数 update: 语法格式:db.COLLECTION_NAME.update({查询条件},{更新内容},{更新参数(可选) ...
- Cookie俩步操作实现n天免登陆
实现这个功能主要思路是:在登录成功的时候去给用户名和密码加上Cookie,将他们的值存在Cookie中,为了下次登录记住用户名和密码,然后在登录界面,获取所有的cookie,然后将值一一遍历出来.和用 ...
- 使用echarts去对数据进行图形分析
首先导入js包:echarts.min.js <script type="text/javascript" src="js/echarts.min.js" ...
- OA思维导图(第一次画)
- [TimLinux] Python __hash__ 可哈希集合
规则: __hash__ 应该返回一个整数,hash()函数计算基础类型的hash值 可哈希集合:set(), forzenset(), dict() 三种数据结构操作要求 key 值唯一,判断唯一的 ...
- 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个牌,输 ...
- jquery (对内容,元素,属性,class的操作)
对内容的操作: 捕获:获得内容 text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值. 设置:设置内容 ...
- C语言每日一练——第3题
一.题目要求 程序功能:计算100以内满足以下条件的所有整数i的个数cnt以及这些i之和sum.条件:i, i+4 ,i+10都是素数,同时i+10小于100.最后电影函数writeDAT()函数把结 ...