随笔分类 - AngularJS
摘要：有时候，自定义的Directive中需要调用controller中的方法，即Directive与controller有一定的耦合度。比如有如下的一个controller：app.controller('MyCtrl',function($scope){ $scope.load = functio...
阅读全文
摘要：AngularJS中，当需要自定义Directive时，通常返回一个对象，就像如下的写法：angular.module('modulename') .directive('myDirective', function(){ return { restrict...
阅读全文
摘要：如何让controller之间共享数据呢？大致是让不同controller中的变量指向同一个实例。通过service创建一个存放共享数据的对象。.service("greeting", function Greeting(){ var greeting = this; greeting....
阅读全文
摘要：AngularJS中为我们提供了一些内置的过滤器，这里列举一些自定义过滤器的场景。自定义过滤器，不带参赛//过滤 不带参赛app.filter('ordinal', function () { return function (number) { if (isNaN(number...
阅读全文
摘要：当验证表单中有很多字段时，这时候可能希望把html的生成以及验证逻辑放到controller中，在页面，也许是这样的：然后，在controller中定义各个字段以及验证。angular-formly就是为这个需求而存在。在controller中，把各个字段定义在数组中：vm.rentalFields...
阅读全文
摘要：名称为"ngMessages"的module，通过npm install angular-messages进行安装。在没有使用ngMessages之前，我们可能这样写验证： Username is too short. Username is too long. Your ...
阅读全文
摘要：本篇使用AngularJS实现订阅某个API服务。首页大致是：其中，what's on显示首页内容，Search通过输入关键词调用API服务显示到页面，MyShows显示订阅的内容。Sarch页界面如下：通过在搜索框中输入关键词，把查询到信息显示在当前页面，并且可以点击订阅和取消订阅按钮。My Sh...
阅读全文
摘要：关于AngularJS中module的导入导出，在Bob告诉我之前还没写过，谢谢Bob在这方面的指导，给到我案例代码。在AngularJS实际项目中，我们可能需要把针对某个领域的各个方面放在不同的module中，然后把各个module汇总到该领域的一个文件中，再由主module调用。就是这样：以上，...
阅读全文
摘要：本篇记录一些AngularJS结合使用ES6的各种写法。ES6中module的导出导入class MainController { constructor(searchService){ this.searchService = searchService; } ...
阅读全文
摘要：本篇主要整理使用AngularJS进行过滤排序的思路。在controller中,$scope的persons字段存储数组。$scope.persons = [ { "name": "aa", "email": "aaemail", "birthdate...
阅读全文
摘要：AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证。手动验证所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件：1、给form元素加上novalidate="novalidate"；2、给form元素加上name="theForm"...
阅读全文
摘要：本篇实践一个案例，大致是：左边有导航菜单，右边显示列表，并可对列表项编辑或删除，也可添加新的列表项。借此，可体会到：如何组织可扩展的AngualrJS文件结构，如何点击左侧菜单项右侧显示相应内容，angular-ui-router的使用以及嵌套state，增删改查，等等。大致如下：当点击添加按钮：当...
阅读全文
摘要：在上一篇中实现了增删改查，本篇实现分页和过滤。本系列包括：1、前端使用AngularJS的$resource,后端ASP.NET Web API，实现增删改查2、前端使用AngularJS的$resource,后端ASP.NET Web API，实现分页、过滤后端添加分页、排序逻辑首先要在后端API...
阅读全文
摘要：AngularJS中的$resource服务相比$http服务更适合与RESTful服务进行交互。本篇后端使用ASP.NET Web API, 前端使用$resource，实现增删改查。本系列包括：1、前端使用AngularJS的$resource,后端ASP.NET Web API，实现增删改查2...
阅读全文
摘要：本系列探寻AngularJS的路由机制，在WebStorm下开发。本篇主要涉及UI-Route的嵌套State。假设一个主视图上有两个部分视图，部分视图1和部分视图2，主视图对应着一个state，两个部分视图分别对应state1和state2，那state与state1和state2形成了嵌套关系。...
阅读全文
摘要：本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI-Router的onEnter和onExit事件AngularJS路由系列包括：1、AngularJS路...
阅读全文
摘要：本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数AngularJS路由系列包括：1、AngularJS路由系列(1)--基本路由配置2、AngularJS路由系列(2...
阅读全文
摘要：本系列探寻AngularJS的路由机制，在WebStorm下开发。AngularJS路由系列包括：1、AngularJS路由系列(1)--基本路由配置2、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve3、AngularJS路由系列(3)-...
阅读全文
摘要：本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数● 路由的resolve属性● 路由URL格式AngularJS路由系列包括：1、AngularJS路由系列(1)--基本路由配置2、AngularJS...
阅读全文
摘要：本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：● 路由的Big Picture●$routeProvider配置路由●使用template属性●使用templateUrl属性●redirectTo属性，接受字符串●redirectTo属性，接受函数●使用caseInse...
阅读全文
