angular
易兒善
坚持终身学习,遇见更好的自己
展开
-
Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)
写在前面 在angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/#/docs/start本来是写在后面的回顾,感觉放在前面比较好。 1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据原创 2017-09-19 17:47:08 · 6249 阅读 · 8 评论 -
使用.net core ABP和Angular模板构建博客管理系统(实现编辑页面功能)
返回目录初步实现编辑更新功能 新建一个edit-note模块如下: 我们看看作者的新建页面用到了什么, 用到了ngx-bootstrap的弹出层。官网地址: https://valor-software.com/ngx-bootstrap/#/modals#modal-directive 然后是一个基类AppComponentBase 在我们页面引入相关组件import { C原创 2017-12-05 09:13:05 · 1318 阅读 · 0 评论 -
angular使用NG ZORRO来构建博客展示项目(项目结构及路由)
返回目录创建项目 使用angular脚手架搭建项目。 如何使用angular脚手架搭建项目参看这篇文章ng new blog-angular安装NG ZORRO 我们界面UI选用NG ZORRO。 可以参考官网,https://ng.ant.design/#/docs/angular/getting-startedcd blog-angularnpm install ng-原创 2017-12-05 09:13:51 · 2938 阅读 · 2 评论 -
angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
返回目录使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入。编辑layout模块中的header组件 在layout.module.ts中引入NG ZORROimport { NgZorroAntdModule } from 'ng-zorro-antd'; imports: [ CommonModule,原创 2017-12-05 09:14:21 · 4434 阅读 · 0 评论 -
Angular练习之animations动画
返回目录前言 文章基于angular的练手项目。文章目录Angular 动画让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定义一系列状态和变换属性。我们也可以用CSS样式来改写实现我们想要的效果 主要的原则是开始和结尾的动画样式由我们自定义,中间变换的计算过程交给工具本身 当然,原创 2017-12-07 09:06:36 · 1082 阅读 · 0 评论 -
Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)
Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目) Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI) Angular4记账webApp练手项目之三(在angular4项目中使用路由router) Angular4记账webApp练手项目之四(在Angular4项目中用echart原创 2017-09-21 10:23:02 · 2570 阅读 · 3 评论 -
Angular练习之animations动画三
返回目录前言 文章基于angular的练手项目。文章目录 上一篇文章《Angular练习之animations动画二》中练习了入场和出场动画、 Keyframes实现串联动画、Group实现并行动画。今天练习动画回调函数、query选择器、路由中使用动画。开始练习回调函数 回调用法也是很简单,如下: <div *ngIf="Group" style="height: 100px;原创 2017-12-18 10:00:39 · 432 阅读 · 0 评论 -
使用typescript开发angular模块(发布npm包)
创建模块初始化package.json文件执行命名npm init -y会自动生成package.json文件如下,name默认为文件夹名称{ "name": "MZC-Ng-Api", "version": "1.0.0", "description": "", "main": "index.js",原创 2018-04-19 08:58:50 · 2609 阅读 · 3 评论 -
Angular中关于时间的操作总结
创建时间 使用new Date(),可以看见有5种构造函数 console.log(new Date()); // 当前时间 console.log(new Date('2015-08-12 12:30'));// 字符串 console.log(new Date(12345679));//时间戳 console.log(new Date(201...原创 2018-04-19 09:00:26 · 7663 阅读 · 0 评论 -
使用.net core ABP和Angular模板构建博客管理系统(完善前台服务)
返回目录 上一篇写到 使用.net core ABP和Angular模板构建博客管理系统(创建前端菜单及页面):http://www.jianshu.com/p/4ff4ddeae917实现添加方法 在note-service.service.ts中添加Create方法 Create(input: CreateNoteDto): Observable<NoteDto> {原创 2017-12-05 09:12:30 · 1032 阅读 · 0 评论 -
使用.net core ABP和Angular模板构建博客管理系统(实现博客列表页面)
返回目录创建服务 新建一个服务文件ng g service blog/note-service 我们可以参考shared\service-proxies\service-proxies.ts文件来写我们的服务文件,这是模板提供的,看最上面的介绍,说的好像是用NSwag自动生成的,博主现在是用不了这个工具,有办法用的请指教。 先把后台Api地址拷过来吧// api域名const Api原创 2017-12-05 09:11:50 · 977 阅读 · 0 评论 -
Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
前提 1、已经安装了node.js环境 2、已经安装了npm环境 windows可以通过cmd输入以下指令查看node -v // node版本npm -v // npm版本安装angular-cli 脚手架npm install -g @angular/cli安装失败可以尝试下面方法,先卸载清楚缓存,再安装npm uninstall -g @angular/clinpm原创 2017-09-19 11:14:06 · 7295 阅读 · 2 评论 -
Angular4记账webApp练手项目之三(在angular4项目中使用路由router)
前言 1、本项目是基于之前文章续写的。用到了哪些 1、路由,子路由的使用,引入——定义Routes——router-outlet——routerLink——routerLinkActive 2、(click)指令,绑定事件 3、[ngClass]指令,绑定样式安装npm i --save @angular/router官方网址:https://a原创 2017-09-20 17:55:04 · 1375 阅读 · 2 评论 -
Angular4记账webApp练手项目之四(在Angular4项目中用echarts绘制图表)
前言 例子基于之前文章开发。 用angular的思想之一,数据驱动,页面上的一切变化我们都用数据变化来控制,页面只需要绑定数据,然后我们操作数据。 echarts的更多用例可以参考官网。 echarts-ng2官网:https://twp0217.github.io/echarts-ng2/#/documentation安装npm install echarts --save原创 2017-09-20 19:44:14 · 1909 阅读 · 1 评论 -
对angular4的认识
1、angularjs 数据驱动,模块化和vuejs的思想很像,都是数据驱动页面,数据变化,页面就跟着变化,我们不需要再去操作页面元素,只需要页面元素的属性绑定数据或者页面元素的事件绑定方法。我们需要改变页面就直接改变数据即可。这让我们抛弃了jquery。 同时也让我们可以把任意多个html元素组合在一起构成一个模块,来扩展属于我们自己的html元素。2、typeScirp(ts) 面向原创 2017-09-25 14:51:40 · 3147 阅读 · 2 评论 -
使用.net core ABP和Angular模板构建博客管理系统(创建后端服务)
如何创建.net core ABP和Angular模板可以参考我的这篇文章:http://blog.csdn.net/yiershan1314/article/details/78219322创建实体如下所示项目下创建blog/notes文件夹,并加入我们的实体文件/// <summary> /// 文章信息 /// </summary> public class Note原创 2017-10-18 18:08:49 · 4732 阅读 · 0 评论 -
开始使用ABP.CORE模板 (ASP.NET Core with Angular)
前言 本文是翻译文章,如有翻译不正确的地方请指正。 其中内容大部分是官方原文,加上自己根据操作实现的心得。 官方 原文https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular#source-code简介(Introduction) The easiest way of starting翻译 2017-10-12 20:24:30 · 9364 阅读 · 5 评论 -
使用.net core ABP和Angular模板构建博客管理系统(实现自己的业务逻辑)
之前写到使用.net core ABP 和Angular模板构建项目,创建后端服务。文章地址:http://www.jianshu.com/p/fde1ea20331f 创建完成后的api基本是不能用的,现在根据我们自己的业务逻辑来实现后端服务。部分业务逻辑流程图创建Dto并添加数据校验 关于ABP的数据校验可以参考我这篇文章:http://www.jianshu.com/p/144f5原创 2017-10-25 12:52:06 · 1786 阅读 · 2 评论 -
Angular练习之animations动画二
返回目录回顾 文章基于angular的练手项目。文章目录 前一篇文章《Angular练习之animations动画》介绍了在angular中使用动画的基本方法。引入动画模块>创建动画对象>在动画载体上使用。我觉得其核心的内容在创建动画对象上,今天我们就来练习创建不同的动画对象trigger开始练习创建例子2ng g component my-animations/exp2布局<h1>动画原创 2017-12-08 10:44:31 · 690 阅读 · 0 评论 -
使用typescript开发angular模块(编写模块)
前言之前在使用typescript开发angular模块(发布npm包)一文中基本掌握了怎么发布一个typescript写的npm包。但是离目标还有段距离。开始开发模块开发过程不是自己想了那么顺利,但是还是有点可取的地方。安装依赖项目 "dependencies": { "@angular/common": "^5.0.2", "@angular/...原创 2018-04-25 08:50:41 · 1097 阅读 · 0 评论