Angular 的组件与模块看似好像与现有各种第三方类库（例如：lodash、moment 等）使用上有点格格不入，这很大的原因是 TypeScript 造成的假象。三足鼎立的前端其实都是雷同的，不管是哪种前端框架都可以使用到这些第三方类库。 以下我将从另一个视角解释 Angular 如何使用第三方类库的一种经验做法。 一、写在前面 在开始之前，需要先了解一下 TypeScript 模块系统 ——模块是指在其自身作用域里执行，而不是在全局作用域里；模块间...
一、封装组件 作为入门，这是一个非常简单的demo，但核心的接收使用者的输入@Input()，以及返回数据给使用者@Output()都实现了，所以有一定的借鉴意义。 目录结构：（部分目录不是框架中自动生成，二是后期添加，按照步骤进行即可。）具体代码： html：(search.component.html) <input type="text" class="form-control" #info placeholder="{{information}}" > <button type="button" class="btn btn-default" (click)="query(inf...
前言 本文主要介绍了关于angular实现页面打印局部功能的相关内容，分享出来供大家参考，下面话不多说了，来一起看看详细的介绍吧。 场景在页面显示的时候是分页现实的，当前页面只有10条数据，但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题，菜单等其他元素。 后天api请求都需要带上token信息 前台页面跳转到打印页面后再跳回1、通过缓存传递数据，2、路由跳转到打印页面，3、页面获取缓存数据，4、调用浏...
很多人反应很难访问 Github Page，所以 ng-alain.com 转移到阿里云服务器上，因此做了一次完整的 Angular 容器部署。 以下我会阐述 ng-alain 整个过程，其中包括 Docker、Nginx、Lets Sencrypt 证书等范涛，我无法保证新手可以很好的阅读她，不过你可以通过一些文章关键字在搜索引擎获得更多资料。 我们知道Docker有两个很重要的概念：镜像、容器。而Anguar容器部署只需要把Angular构建的生产环境（例如：ng build -prod）产生的目...
前言 RxJS是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。可是最近在升级中遇到了一些问题，下面就来给大家介绍下，给同样遇到这个问题发朋友们一些参考，下面话不多说了，来一起看看详细的介绍吧。 Angular 5.0.5升级RxJS到5.5.3报错： ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence EmptyError: no eleme...
最近一个同事在使用Angular的时候，希望能像VUE那样，修改代码后浏览器不刷新，页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。稍微研究了一下，发现在angular/cli创建的项目中，实现这个不算太难，步骤如下： 1、首先创建一个src/environments/environment.hmr.ts文件，内容如下export const environment = {production: false,hmr: true };当然，对应的environment.prod.ts和environment.ts需要增...
理解组件 组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构 这样他能简单地写app，通过类似的web Component 或者angular2的样式。 web Component 是一个规范。马上就要成为标准。 应用组件的优点： 比普通指令配置还简单提供更好的默认设置和最好的实践对基于组建的应用架构更优化。对angular2的升级更平滑。不用组建的情况: 对那些在 compile或者pre-link阶段要执行操作的指令，组件不能用，因为无法到达那...
better-scroll的使用由于需要在一个固定的的高度做无限滚动，本来css的overflow-y也可以完成的，奈何安卓不是很流畅，还很生硬，就是用了第三方库better-scroll，配合angular的ng-content。angular的ng-content和vue的插槽很像，里面一些不确定的内容可以通过ng-content投影进去。 安装better-scroll 1: npm install better-scroll --save 2: 安装types npm install better-scroll @types/better-scroll --save 3：在angular-cli里...
第一篇文章是: "使用angular cli生成angular5项目" ://www.gxlcms.com/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" ://www.gxlcms.com/article/137031.htm 我们知道使用 ng g module admin 将会生成admin module. 而使用 ng g m sales --routing 则将会生成sales和 sales-routing 两个module. sales-routing里面就是路由的信息, 并且它被import到了sales module 里面. 为应用生成路由. 先创建一个项目: ng ...
第一篇文章是: "使用angular cli生成angular5项目" ://www.gxlcms.com/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" ://www.gxlcms.com/article/137031.htm 第三篇文章是: "使用Angular CLI生成路由" ://www.gxlcms.com/article/137033.htm 第四篇文章时: “使用Angular CLI进行Build (构建) 和 Serve”://www.gxlcms.com/article/137034.htm 本文是该系列的最后一篇文章. 单元测试. angular cli使用karma进...
某个项目，我的网页中有一个列表<ul>元素，样式如下：实际上它是通过Angular的ng-repeat形成的，html中的代码是： <li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>图中下方的新建清单button，点击之后就往lists数组中push了一个新的list对象，此时页面会自动渲染，也对应增加一个<li>，如下：注意MyList1一直是active状态的(class="active")，我的需求是新增list后，把新增的list设置为active，即在...
这个问题同样困扰我很久，网上的回答五花八门，全都不能解决；终于在网上找很久，看到某大神的解决办法，整理作此分享；使用ui-router重新加载当前页面的问题。(ui-router版本需要是0.2.14以上的) 用angular做项目，会碰到需要点击菜单刷新当前页面，加载当前页面，但是同一个路由页面点击没反应； 假设我们的路由页面 app.toMenu ; <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ui-sref...
现在，我们写一个组件puppiesListCmp，用于显示小狗狗的列表： //puppies-list.component.ts @Component({selector: puppies-list,template: `<div *ngFor="let puppy of puppies"><span>{{puppy.name}}</span><span>{{puppy.age}}</span><span>{{puppy.color}}</span></div> ` }) export class puppiesListCmp{@Input() puppies: Puppy[]; } interface Puppy {name: string,age: number,color: string }然后这样使用： //app.comp...
问题描述： 在我们开发项目过程中，避免不了会用到select下拉框，那么在angular中如何使用select呢？ 解决方案： 可以用ng-options来动态加载option,然后在用ng-model来匹配。代码如下： //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id":2,"name":"终端代表"},{"id":3,"name":"片区管理员"},{"id":4,"name":"系统管理员"},{"id":5,"name":"销售市场经理"}]这样出现了...
数组方式 数据是数组 $scope.years = [2014, 2015, 2016];页面元素<select ng-model="item" ng-options="item as y for y in years"></select>设置默认值 如果需要设置默认的选项，可以先设置一个参数： $scope.item = 2016; $scope.years = [2014, 2015, 2016];对象数组方式 数据是对象数组 $scope.sites = [{site : "#8;#8;baidu", url : "https://www.baidu.com"},{site : "163", url : "http://www.163.com"},{site : "sina", ...