angular的坑永远都是那么多，当然了，主要还是我太菜~基于ngx-translate实现多语言切换这个功能，我又是折腾了很久，下面是我实现的过程： 1、安装ngx-translate需要安装@ngx-translate/core和@ngx-translate/http-loader，我的问题主要出在这个，angular的版本不同，要安装对应组件的版本也不同。可以到官网查看对应版本的说明：https://github.com/ngx-translate/core我本地用的是angular5，使用最新的版本，会报错。。针对angul...
angular本身自带访问组件http和httpclient，组件本身都是异步模式访问。本文只列举了对http组件的封装同时也一同处理会话超时监控。 实现思路概述：1、将请求入参和出参统一约定2、封装方法将请求参数、数据处理方法、数据呈现方法、访问错误处理方法封装在一起，业务调用通过服务调用该封装方法，同时把请求参数、数据处理方法、数据呈现方法、访问错误处理方法传过来即可3、在每次请求交互时，都会记录当前请求时间。系统工作台...
angualrjs处于安全的考虑，插值 指令会对相应字符串进行过滤，避免出现html攻击。但是在一些时候，我们需要渲染html，比如实现一个分级的下拉框，代码如下： 1 <body ng-app="app" ng-controller="controller">2 <select ng-model="value" ng-options="t.text for t in testList"></select>3 <script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>4 <script type="text/javascript">5var app= angular....
数据库是用EF操作，数据表都很简单中，从代码中也能猜出表的结构，所以关于数据库表就不列出了投票系统实现还是比较简单，投票部分使用ajax实现，评论部分是使用angularjs实现，并且页面每隔几秒（可以自己间隔时间)就从服务器异步获取评论数据，并通过angularjs的双向绑定功能自动更新数据（这部分其实完全可以使用websocket - singarlR完成，将更加简洁).评论是按分页显示，所以还使用到了pagedList组件，具体可以看我以前部分。...
最近在搞AngularJs,需要实现一个自动检索的效果。因初次接触AngularJs大费周折，百度了N多种方法.代码从几十行到几百行的都有，杂乱不堪。最后发现其实简简单单的一句代码就可以很棒的实现这个效果，为了避免有太多的人跟我入一样的坑。分享在这里，哪里有什么不好的，欢迎大家留言。代码如下<script src="js/angular.js"></script><div ng-app="test"><div ng-controller="testController"><div class="user_inleft"><input type=...
本插件的开发目的主要给前端同学使用，本人是专注于后台开发的，对css样式不熟悉，但逼于前端要求做一个共公组件方便日常开发，所以这个插件在样式上可能不适合大部分人，喜欢的拿走吧，不喜欢的也请别喷。 一、使用环境 1.Angularjs 1.x 2.Bootstrap 3 在自己的环境里请自行配置js和css，本文不作这方面的介绍。二、效果图 效果逻辑： 1.当前页码默认选中高亮状态 2.页码少于等于1，则“上一页”为不可...
一. 单向绑定（ng-bind）和双向绑定（ng-model）的区别：1.ng-bind 单向数据绑定（$scope->view），用于数据显示，简写形式，{{}}。<span ng-bind="val"></span><span>{{val}}</span>而这两者的区别，在于页面没有加载完毕时，{{val}}会直接显示到页面，直到angular渲染该绑定数据，这种写法可能将{{val}}让用户看到；而ng-bind则在angular渲染完毕后将数据显示。2.ng-model是双向数据绑定（$scope->view , view->$scope），用于绑...
首先安装 swiper npm install --save swiper 或者 bower install --save swiper<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" /> <script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script>指令文件代码(function() {‘use strict‘;angular.module(‘campus.core‘).directive(‘swiperSlide‘,swiperSlide).directive(‘goToTop‘,goToTop);swiperSlide.$injec...
看了下angular 的route，用它做个非常简单的单页面应用，记录一下。 顺便说下，好处是，页面改变时不需要刷新，而每个页面都展现不同的数据。尤其在使用模板页的时候，非常方便。快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App，并销售到苹果应用商店中。 《HTML开发Mac OS App 视频教程》土豆网同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/百度网盘同步：http://pan.baidu.com/s/1jG1Q58M分享 [中文纪录片...
1 <div class="form-group form-group-sm" *ngFor="let i of login"> 2 <label class="col-form-label">用户名</label> 3 <input class="form-control" [(ngModel)]="i.username" value="{{i.username}}"> 4 <label class="col-form-label">密码</label> 5 <input class="form-control" [(ngModel)]="i.password" value="{{i.password}}"> 6 <button class="btn btn-link" (click)="removeInput(i)">删除</but...
在我们项目中要实现不同组件之间通讯，Angular的@Input和@Output只能实现有父子组件的限制，如果是复杂跨组件实现不同组件可以通过共享变量的方式实现，比如这个博客的思路：https://www.cnblogs.com/hlkawa/p/6815023.html，或者是基于h5的 localStorage + 轮询机制实现，不过现在以发布订阅的模式来实现不同组件之间的通讯会更加简洁，直接贴代码：Service服务创建主题#注意angular5和angular6以上的版本可能Subject和Observable...
最近花了近半个多月的时间， 自己纯手工写了一个很小型的类angularjs/vue的mvvm 库. 目前已经用于公司一个项目。 项目托管在github https://github.com/leonwgc/link 也许有许多人觉得如今angularjs , react , vue , knockout ,avalon 等框架/库层出不穷， 为什么还要自己造一个相同（类似）的轮子？ 原因如下： 1 . 从最初knockoutjs 到现在用angularjs ，写了不少项目， 一直想自己写一个mvvm练练手,顺便熟悉巩固下最基础的html,...
tag页面实现<div class="b_gray" style="padding-left:24px;border-bottom:1px solid #ccc"> <label class="label-tab" ng-model="list.displayModel" uib-btn-radio="‘all‘" ng-click="changeModel(‘all‘)">全部订单 </label><span class="c_light_gray">|</span> <label class="label-tab" ng-model="list.displayModel" uib-btn-radio="‘receiving‘" ng-click="changeModel(‘receiving‘)" style="position: relative"...
模态框是项目中经常会用到的一个公共功能，通常会被用左提示框或者扩展选项框。下面，我用一个小例子来简单展示实现模态框功能的过程：1、为项目加包：ng add ngx-bootstrap 2、在xxx.module.ts(模块.ts文件)中引入：... import { ModalModule } from "ngx-bootstrap/modal"; ...@NgModule({imports: [...ModalModule.forRoot(),...] }) ... 3、创建一个模块框公共组件：//.ts部分import { Component } from ‘@angular/core‘; i...
ng实现简单的select<div ng-controller="ngSelect"><select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData"><option value="">请选择</option></select></div>var app = angular.module("app",[]); app.controller("ngSelect",function($scope){var vm = $scope.vm = {};//数组对象用来给ng-options遍历vm.optionsData = [{title : "angularJs"},{title : "emberJs"},{title : "backboneJs"},{title : "kn...