前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要了解AngularJs的HTML编译器,简单地说让浏览器认识你自定义指令或是Angular的指令集,将其行为运用到DOM上(视图),分两个过程编译和链接,编译阶段是遍历DOM并且收集所有的相关指令,生成一个链接函数:链接阶段是给通过编译阶段调用所说的链接函数来将模板与作用域链接起来,绑定一个作用域,…

到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以学习一下,怎么在AngularJs下来实现叼酷炫的动画操作,主要使用的命令是ngAnimate. 与之前的ngResource,ngRoute一样,需要注入ngAnimate和引入ng-animate.js才可以使用此服务,想在你的angular应用程序使用ngAnimate来实现动画功能,前提条件…

在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json数据包装成一个服务,然后每个控制器只要直接依赖我们自己写的服务,就可以去获取需要的数据,那么就需要自定义服务,现在我们需要学习一下怎么定义自己的服务,于是我们在js中建了services.js,一不小心插入个链接,http://t.cn/RUbL4rP,忽略,代码如下: var phoneServi…

在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了! angualrJs自带了一些默认的过滤器,如: {{"xiaobin" | uppercase}} {{"XIAOBIN" | lowercase}} {{ | date:"yyyy-MM-dd"}} {{ {"foo":&q…

学习笔记-AngularJs(二)写了个所有程序语言入门时都必须要写的Hello World,那么从现在开始做那个之前说过的互联网大佬介绍的学习例子,当然这里开始会慢慢按照之前说过的目录来搭建这个学习的demo,将控制器.过滤器.指令.服务.基本配置都独立成一个个js文件,直接贴张效果图(http://t.cn/RUbL4rP,一不小心): (有点简陋,之后再把样式写好看些!) 这里实现的功能是这样的,在前台遍历phones的对象数组,然后可以按照年龄和名字排序,也可以通过输入字符串过滤检索.代…

在接下来学习angularjs中,我按照的就是之前 学习笔记-AngularJs(一)所讲的目录来搭建一个学习的项目,做一个互联网大佬人物简介的例子,当然也可以使用angualrjs上面提供的官方例子,phonecat,其实大同小异,都是差不多的,可以用git下载下这个学习环境 git clone https://github.com/angular/angular-phonecat ,然后 cd angular-phonecat node scripts/web-server.js 记住不要关…

AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发Web应用变得非常简单,同时也降低了构建复杂应用的难度.它提供了开发者在现代Web应用中经常要用到的一系列高级功能,例如: 解耦应用逻辑.数据模型和视图: Ajax服务: 依赖注入: 浏览历史(使书签和前进.后退按钮能够像在普通Web应用中一样工作): 测试: 更多功能... 我们可以在A…

在使用form.FormController和ngModel.NgModelController之前,先来学习一下怎么一个ng-model-options指令,觉得怎么这个指令挺好用的,我们知道ng-model是可以实现数据的双向绑定,至于双向数据绑定这个概念时必须要清楚的,都是这样的一个过程,view->scope和scope->view,只要双向绑定的element都是走怎么一个过程的,那么这个ng-model-options,就是可以实现对延迟更新.如何触发更新.时区(timezone针…

之前的页面太丑了,后来我引入了bootstrap.css,把样式进行修了一番,如下图(一不小心,插入个链接,忽略,http://t.cn/RUbL4rP): (链接:http://www.live086.cn/angularjs/#/phones) 是不是觉得好看多了,这里我在原先phone.json里面多加了人物的图片,于是phone.json就变成: [ {"id":1, "name":"xioabin","number"…

之前学习的事视图与模版,我们在控制器文件中直接定义一个数组,让其在模版文件中用ng-repeat指令构造一个迭代器,定义的数组http://t.cn/RUbL4rP如同以下: $scope.phones = [ {'name':'xioabin','number':'18824863682','age':'12'}, {'name':'xioalong','number':'18824863683','age':'19'}, {'name':'xiaohua','number':'1882486…