2018年08月_gosenkle

原创极客angular知识分享（8）-- 属性指令

属性指令定义能够改变宿主元素行为和外观的类创建简单的属性指令使用ng生成指令 ng g d directive/mydirctive // directive目录下生成指令mydirctive 指令文件 import { Directive } from '@angular/core'; import { ElementRef } ...

2018-08-24 09:31:05 697

原创极客angular知识分享（7）-- 模型表单

基于模型的表单定义在代码中定义表单以及验证细节实现引入相关依赖模块 import { NgModule } from '@angular/core'; import { ModuleformComponent } from './moduleform.component'; import { BrowserModule } from '../../....

2018-08-24 08:55:24 348

原创极客angular知识分享（6）-- 模板表单

基于模板的表单定义在模板中定义表单以及验证细节基本表单<form class="bordered"> <div class="form-group"> <label for="username">姓名：</label> <inp

2018-08-23 14:32:45 481

原创极客angular知识分享（5）-- 数据绑定

数据绑定数据绑定组成部分1.宿主元素将要受到绑定影响的html元素2.方括号告诉angular是单向绑定。当angular看到方括号时，会将表达式的结果传递给目标，以修改宿主元素3.目标数据绑定将进行的操作。分为指令和属性绑定两种。4.表达式一段JavaScript代码，它使用模板的组件提供的上下文进行求值，因此可以访问组件中的属性和方法。...

2018-08-23 14:25:40 299

原创极客angular知识分享（4）--模板引用变量

模板引用变量模板变量的一种形式，可用于引用模板中的元素定义格式:字符#后跟变量名，如示例定义了变量templateVariable 示例(products见动态属性定义中的示例代码) <div class="bg-info"> 当前商品：{{templateVariable.value || '无商品'}} </div> <ta...

2018-08-23 14:14:51 1133

原创极客angular知识分享（3）--事件绑定（附所有支持的事件链接）

事件绑定用于响应宿主元素的事件发送事件绑定组成部分宿主元素绑定的事件源圆括号告诉angular是一个事件绑定，且是一个单向绑定---数据从元素流向应用程序其余部分事件指定要绑定的事件表达式在事件触发时进行求值※ 支持事件参考动态定义属性 <div class="bg-inf...

2018-08-23 14:12:25 428

原创极客angular知识分享（2）--内置指令（下）

内置指令（下） ngFor1. 用法<div *ngFor="let item of expr"></div>2. 意义：将数组中的对象生成同一组元素3. 代码myArr = [1,3 ,4, 'ff'];<div *ngFor="let item of myArr">数据元素值：...

2018-08-23 13:55:52 271

原创极客angular知识分享（1）--内置指令（上）

内置指令（上）ngIf1. 用法<div *ngIf="expr"></div>2. 意义：'表达式为true，则宿主元素以及内容包含在html文档中'3. 代码<div *ngIf="count > 1">ngIf 表达式成立！</div>※

2018-08-23 13:45:39 334

原创极客react之Ant Design Pro系列快速入门（九）-- 使用地图（高德地图）

使用地图（高德地图）主页加入高德地图的引用脚本 <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.8&key=key值'></script>  <script src="https://webapi.amap...

2018-08-20 18:34:56 5227 5

原创极客react之Ant Design Pro系列快速入门（八）-- 使用echarts

使用echarts安装echarts和react的echarts模块 npm install --save echarts 导入echarts // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/bar'; // 引入提示框和...

2018-08-20 17:34:41 2665

原创极客react之Ant Design Pro系列快速入门（七）-- 使用新的布局

定义一个新的布局loayout文件夹定义布局的js文件和less样式文件 /common/router.js中定义使用新布局的路径 '/data': { component: dynamicWrapper(app, [], () => import('../layouts/DataCenterLayout')), } /router.js路由转发时使用加载该...

2018-08-20 14:19:02 1681

原创极客react之Ant Design Pro系列快速入门（六）--绑定model

绑定model 界面加载所使用的model '/user/login': { component: dynamicWrapper(app, ['login'], () => import('../routes/User/LoginNew')),}, ['login']中的login就是所要使用的model的namespace dynamicWrapp...

2018-08-20 13:35:25 3795

原创极客react之Ant Design Pro系列快速入门（五）--更改控件的默认样式

更改控件默认样式对于ant design的控件都有自己的默认样式，如输入框默认背景，checkbox也是一样，可以使用global属性更改找到样式对应的css类，input为.ant-input，CheckBox为.ant-checkbox-inner less文件中重写使用属性global重写类 :global { .ant-input { background-colo...

2018-08-20 12:11:12 5231

原创极客react之Ant Design Pro系列快速入门（四）--界面新增

新增界面src/routes文件下新建目录NewPage，进入该目录添加文件新建界面样式NewPage.less @import "~antd/lib/style/themes/default.less"; 新建页面文件NewPage.js import React, { PureComponent, Fragment } from 'react';import {...

2018-08-13 17:36:12 2515

原创极客react之Ant Design Pro系列快速入门（三）--菜单与权限

菜单与权限文件目录：app/src/common/menu.js 自定义菜单 export const getMenuData = () => formatter(menuData); 可以重定义menuData的获取方式，如：通过rest去获取菜单功能菜单权限（authority代表了功能菜单所需的权限） { name: '详...

2018-08-13 13:49:43 5845

原创极客react之Ant Design Pro系列快速入门（二）--登录与默认路径篇

登录在启动篇中加载全局路由时有一句代码如下，方法返回路径和对应的界面 const routerData = getRouterData(app); 路由配置对象 const routerConfig = { '/': { component: dynamicWrapper(app, ['user', 'login'], () => i...

2018-08-13 12:09:25 14638 3

原创极客react之Ant Design Pro系列快速入门（一）--启动篇

启动启动文件： app/src/index.js 加载全局数据模型./models/global 加载全局路由./router import React from 'react'; import { routerRedux, Route, Switch } from 'dva/router'; import { LocaleProvider } from ...

2018-08-13 10:25:04 5087

gosenkle的专栏