简介 angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散，好比Vue提供的组件传值一样，虽然提供给你了用法，但是开发过程中逻辑一多用着萌萌的，所以我们抛开ng-router来看ui-router。 引入ui-router 我们可以去bootCDN搜索ui-router,本地创建js文件，将代码copy进去使用，这样就可以打入本地使用了，但是要注意的是，Angular的main.js一定要在ui-router之前引用，注意一下先后顺序问题。 例如： <script src="a...
最近，项目开发正在进行时，心有点燥，许多东西没来得及去研究，今天正想问题呢，同事问到如何获取url中的参数，我一时半会还真没想起来，刚刚特意研究了一下，常用的方法就以下几种： 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值) var url = $location.url(); // /homePage?id=10&a=1003. 获取当前url的子路径(也...
先上网址吧：https://github.com/500tech/angular-tree-component 这是牛逼哄哄的GitHub页面， http://500tech.github.io/angular-tree-component/ 这就是官网啦。 大背景--首先我是在Angular4下面使用的。 1、install from npm : npm install --save angular-tree-component2、导入css 在styles.scss下面导入样式： @import ~angular-tree-component/dist/angular-tree-component.css;3、import the module app.module.tsimport {...
今天在学习angularjs的分页插件时遇到了一个前端的问题，谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求，ajax向后台发送了两次请求，这对于强迫症患者来说是一个比较恶心和感到不舒服的事情。 于是在网上也找到了靠谱的解决方案：http://jqvue.com/tm.pagination/ ，且在此维护者的这个版本中解决了此问题，同时注意 angularjs版本的配合使用。但是不满足于现状，我还是找到了自己的解决方案，不打针...
有关自定义指令的scope参数，网上很多文章都在讲这3种绑定方式实现的效果是什么，但几乎没有人讲到底怎么使用，本篇希望聊聊 到底怎么用 这个话题。 一. 自定义指令自定义指令，是 Angularjs 用来实现组件化的方式，相比于 React 和 Vue 的组件化方式，它真的很复杂，自定义指令太重了，它暴露了太多可供定制的参数，以至于普通的开发者完全不知道要用它来做什么而将其束之高阁，毕竟一般的业务逻辑通过controller和service就已经可...
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。 1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别 ngroute是用AngularJS框架的路由的核心部分。ui-router是一个社区库，它是用来提高完善ngroute路由功能的。实例：使用ng-router：首先引入js文件<script src="js/angular.js"></script><script src="js/angular-route.js"></script> 然后在html中 <h2>示例...
无奈接手了一个旧项目，上一个老哥在Angular项目中大量使用了JQuery来操作DOM，真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢？ 获取元素 1、ElementRef --- A wrapper around a native element inside of a View. 在组件的 constructor中注入ElementRef，可以获取到整个组件元素的包裹。 @Component({selector: app-test-page,templateUrl: ./test-page.component.html,styleUrls: [./test-page.component.sc...
angularUI bootstrap提供的分页插件满足了大部分应用的需求，具体内容如下 在项目需求中，新增了两个需求： 1.自由设定每页显示的条目； 2.可以手动输入页面，跳转到指定的页数。 html代码 <div class="pagination-define p20 mt20" ng-hide="totalItems==0"><select ng-model="perPageSize" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" ><option value=10 ng-selected="perPageSize==10">10</op...
前面的文章我们介绍过angular6.0的数据绑定，也就是前面页面如何调用后台的数据，我们接触到了调用普通数据——如：调用产品详情{{post.content}}。在使用中，我们会发现，如果按原来的方式angular6.0调用的数据是HTML字符串，前台页面显示的依然是html字符串，而没有正常显示，如下图：这显示不是我们想要的结果。那么，angular6.0如何调用HTML字符串数据呢？ angular6.0提供了一个属性绑定来实现html字符串数据的绑定： <ul [inn...
今天写的有点儿多了,前几天一直写js基础.今天想聊聊angular6.0的路由实现.因为有公司已经开始转向angular6.0了.写完赶紧吃饭去了. 声明一下,以下路由的实现是基于angular6.0 脚手架 实现的. 脚手架的安装方法不在此讨论范围内.第一步:创建一个路由文件.通过指令ng g module 模块名称;来创建一个路由模块文件;第二步: 在app.component.html模板文件中,定义路由渲染的位置;第三步: 引入路由模块以及路由规则模块（在app-routing.modu...
前言 对于一个在前端属于纯新手的我来说，Javascript都还是一知半解，要想直接上手angular JS，遇到的阻力还真是不少。不过我相信，只要下功夫，即使是反人类的设计也不是什么大的问题。 今天，我们要聊得是Angularjs中的小明星$apply。当我们数据更新了，但是view层却没反应时，总能听到有人说，用apply吧，然后，懵懂无知的我们，在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢，真的更新了。然而，有些时候，编译器会...
前言 想象一下，您的应用需要一些动态配置信息，这些信息在应用启动之前需要动态获取，并在应用运行中使用。 显然不能直接写道静态配置文件中，但是从客户端发出的请求又是一个异步请求，如何协调这个问题呢？ 这里，我想向您演示，如何在 Angular 应用初始化期间，使用 APP_INITIALIZER 注入器来获取应用的动态配置信息。 什么是 APP_INITIALIZER 注入器APP_INITIALIZER 是允许您在 Angular 初始化七千处理您自己任务的机制。它既...
我们经常听到angular的脏检查机制和数据的双向绑定，这两个词似乎已经是它的代名词了。那么从编程层面，这到底是什么鬼？ 当$scope的一个属性被改变时，界面可能会更新。那么为什么angular里面，修改$scope上的一个属性，可以引起界面的变化呢？这是angular的数据响应机制决定的。在angular里面就是脏检查机制。而脏检查，和双向绑定离不开。 这里插句题外话，JavaScript里面非常有意思的一种接口，当你修改（或新增）一个对象的某...
为什么要封装呢？angular4自身提供的请求方法是用Observable来实现的。用的是观察者模式，个人认为这用来写请求是非常方便的。 一个项目里会有非常多的不同的请求，但是其实每个请求都会有些共性。比如：每个请求都要传Authorization，比如每个请求都要先判断后台返回的status字段为200时才是请求成功，后台正真返回的数据在data字段里，比如对于错误信息的处理都是一样的......等等。 所以我们需要封装出一个请求，去统一处理这些...
考评员综合查询，查询条件有：区域、所在单位、从事专业、资格证名称、有效期至。如果我们的所有数据查询都放在后台的话。依据拼接的查询条件，选择区域、所在单位、从事专业查询的是人员表，而选择资格证名称、有效期至查询的是人员资质表。查询都放到后台，这种以我们固有的思路去设计是可以实现的。 那就写两个接口，一个根据区域、所在单位、从事专业查询人员表，一个根据资格证名称、有效期至、区域、所在单位、从事专业查询人...