接上一次，这次主要介绍表格分页功能，由于项目需要这个案例是关于前端分页的方式，现在很少会这么用了，但如有需要可以参考其中的思路 html： 1.通过UL来展示页标，其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。上一页下一页当前为第页，总共页js： 1.首先需要设置每页想要显示的条数，通过选取页面元素来确定本次生成的总条数，以及当前所在的页数（为跳转做准备） 2.如果总页数大于生成的当前页数，则继...
一、引言 之前在Angular4使用过百度地图，记录一下踩过的坑 二、实现 1.安装 npm install angular2-baidu-map 2.在app.module.ts配置 ak key在http://lbsyun.baidu.com/apiconsole/key中创建 import { BrowserModule } from @angular/platform-browser import { NgModule } from @angular/core import { AppComponent } from ./app.component import { BaiduMapModule } from angular2-baidu-map @NgModule({declarations: [AppCom...
angular的国际化方案，采用ngx-translate来实现。 安装模块： npm install @ngx-translate/core --save在根模块中导入： // other module import {TranslateModule} from @ngx-translate/core; @NgModule({declarations: [AppComponent,],imports: [// other moduleTranslateModule.forRoot(),],providers: [],bootstrap: [AppComponent] }) export class AppModule { }我们希望可以在一个固定的文件里面配置对应的翻译文件，然后在...
本文实例讲述了Angular4.0动画操作。分享给大家供大家参考，具体如下： 粗略的记录一下angular4的动画 先看一下angular中文网关于这个给的例子。 有两个组件home，about。 路径配置什么的这里就不细说了，之前的博文有说过，我就贴一下代码，很好理解的， 需要import的东西我先说一下，我只贴了使用动画要用的东西，其他的我省略了， app.module.ts import { BrowserModule } from @angular/platform-browser; import {BrowserAnim...
组件 使用命令创建组件?创建组件的命令：ng generate component 组件名 ?生成的组件组成： 组件名.html 、组件名.ts、组件名.less、组件名.spec.ts ?在组件的控制器@Component({selector: app-heroes,templateUrl: ./heroes.component.html,styleUrls: [./heroes.component.less] })手动创建组件1.创建一个组件ts文件2.在组件中设置// 1. 导入包，按需导入 import { Component } from "@angular/core"; import { CoreEdit, NavLayo...
简介关于service worker，网络上已经有了较多的文章。总的来说它依靠缓存资源，拦截http请求，来帮助我们达到离线使用网站的效果。 而angular cli为了让使用service worker更加便利，为开发者提供了一个配置窗口（ngsw-config.json）和一个与service worker通讯的服务（SwUpdate）。 启用1、新建项目后在项目根目录下键入ng add @angular/pwa。 会为你的项目添加一些文件，其中包括上文提到的ngsw-config.json，为了即刻感受离线应...
前言 在实际开发中，会发现我们好多工作都是重复的，在代码层面，发现好多代码是可以被重用的。这样我们就可以建一个库，类似于java的库，来提高工作效率。 下面话不多说了，来一起看看详细的介绍吧 创建Angular项目 打开命令行终端， cd 到用于创建应用的目录下，执行创建Angular项目命令： ng new arsprojects -S此命令将会创建一个新的Angular项目，文件夹名为 arsprojects 。 -S 参数表示不创建测试文件。我们创建的ng库都将依...
Angular 团队 在 angular6 中，使得创建 Angular 第三方库变得更为简单。如果你以前尝试过操作，你会发现其实不是很简单！ 那么流程是什么呢？ 首页我们构建一个搭建一个简单的环境，环境里面包含一些组件和服务以及一些接口。 创建项目 1.按照官方教程，使用 ng new 命令初始化项目： ng new lib-demo --prefix ld 在 angular-cli 第6个之后版本。配置文件的方式发生了相当大变化， angular.json 现在代表 angular 工作空间,你可以...
引言基本上当下的应用都会分为前端与后端，当然这种前端定义不在限于桌面浏览器、手机、APP等设备。一个良好的后端会通过一套所有前端都通用的 RESTful API 序列接口作为前后端之间的通信。 这其中对于身份认证都不可能再依赖传统的Session或Cookie；转而使用诸如OAuth2、JWT等这种更适合API接口的认证方式。当然本文并不讨论如何去构建它们。 一、API 设计首先虽然并不会讨论身份认证的技术，但不管是OAuth2还是JWT本质上身份认证...
Angular 2 已经发布了 2.1.2 版本， 相信很多人已经在使用（试用）了， 相比 AngularJS 1.x ， Angular 2 在性能上有了长足的进步， 同时 Angular 2 也变得非常的庞大， 动辄几兆的脚本， 如何部署到生产环境？ 接下来就介绍如何为生产环境编译 Angular 2 应用， 在本文中， 我们将 Angular 2 官方文档中的 Hello Angular 应用编译到 50K 以下， 以用于生产环境。 未经优化的应用根据 Angular2 官方的 QuickStart 快速创建一个 Hel...
这是我人生的第一篇文章，写得不好，请见谅！ 本人是一个java web开发工程师，对angularjs4小有接触，最近看到一个漂亮的angularjs4的后台模板–angle，于是就在CSDN下载来测试一下，点击这里下载 模板的一些照片 相信有经验的都知道，要运行先安装nodejs，配置nodejs环境等等，这里就不细说了，网上有很多这样的文章，而我参考的文章是，点击这里 所有东西都搞掂了，然后就是打包部署，放在服务器玩玩了， 下面就是我遇到的问题和...
在 Angular 应用中，我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况，但是对于一些特殊的表单控件，例如 input[type=datetime] 、 input[type=file] ，我们需要重写默认的表单绑定方式，让我们绑定的变量不再仅仅只是一个字符串，而是一个 Date 或者 File 对象。为了达成这一目的，我们需要自定义表单控件的 ControlValueAccessor 。 ControlValueAccessor 接口是 ...
人一旦上了年纪，记忆力就变得越来越不好。 最近写了许多的博文，倒不是为了给谁看，而是方便自己来搜索，不然一下子又忘记了。 如果恰巧帮助到了你，也是我的荣幸~~~~~~~~~~~~ 废话不多说，看正题~~~~ 首先打开你的webstorm。这里插一句话，尽量保证你的webstorm是比较新的版本，在webstorm的右下角会有提示你更新的。因为就目前来看,我们的angualr2.0项目是采用typescript来编写的，而最新版本的webstorm都只能支持到typescript2...
写在前面 由于现在网络上Angular 4的相关技术文档不是很充分，我写出这个采坑的记录文档，一方面是想给自己在项目中遇到的各种问题与个人的理解记录下来，另一方面也想着某些坑大家可能也会遇到，也可以给道友做一个参考。文档中的很多地方多有不足，后期我会慢慢完善，也希望道友们能够及时指出文档中不正确的与可以优化的地方。 我计划将该帮助文档分为4个章节: 章节一： 关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问...
因为本地希望开启两个项目,由于@angular/cli 生成项目默认是: 4200; 那么肯定会有端口冲突问题; 修改端口的两种方式： 1 修改 schema.json node_modules\@angular-devkit\build-angular\src\dev-server\schema.json {"title": "Dev Server Target","description": "Dev Server target options for Build Facade.","type": "object","properties": {"browserTarget": {"type": "string","description": "Target to serve."},"port":...