angularjs笔记(一)】的更多相关文章

在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, AngularJS提供了一个可以依赖注入的方法.我们可以将逻辑处理封装到Service中,需要调用只需要引入对应的Service即可. Angular 提供了3种方法来创建并注册我们自己的 service. 1.Factory 2.Service 3.Provider 一. Factory: 1. 下面构建了…
初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化应用程序数据(一般不用) ng-model 把元素值绑定到应用程序(mvvm的双向绑定) ng-bind 将应用程序数据绑定到html视图 表达式 {{}} 功能类似 ng-bind,但更广泛的用途 <!DOCTYPE html> <html lang="zh-cn"&g…
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定义了一个简单的控件,点击后调转到博客园. Note: 1.命名方式:directive必须以小写字母开头,其中如果后面由大写字母,html调用的时候就要用 - 将单词分开. <html> <script src='angular.js'></script> <scri…
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我们会有一个对应的controller和views,还有一个routerconfig. 其实在AngularJS也有类似的东西.下面我会按照Asp.net的MVC框架搭建一个AngularJs的小Demo出来. 一.创建文件目录: A. Controller文件夹放ng-controller的代码 B…
什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面.  一.$rootScope 1.1 $rootScope可以理解成全局变量,一旦赋值对整个module都有效.$rootScpoe不依赖于任何一个controller,  app.run是module被加载时候执行的代码. 可…
首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"><script> JS的位置可以在head标签中,也可以放到</body>前面,这个JS阻塞加载有关. 2,引导,在应用的根标签中添加ng-app,如果只是调用系统的指令和一些简单操作(不需要自己编写指令控制器等等的),只需要这样<html ng-app>:如果有自己编写的…
一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 B.ng-models :  用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面. C.{{ FiledName }}: 双括号也是用于数据的绑定. <!DOCTYPE html> <html> <script src="angul…
AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </hea…
AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>…
简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.angularjs指令 指令就是扩展的HTML属性,带有前缀ng-. ng-app指令初始化一个AngularJS应用程序,也就是指定AngularJS作用范围,如<html ng-app="">作用于整个页面,<div ng-app="">作用于…
1.MVC ng-app: html表头处,每个htnl文件只能有一个ng-app ng-controller :js文件中定义 ng-model:只要引用了angularJS就可以使用 js文件代码如下: var myMoudle = angular.module("HelloAngular",[]); myMoudle.controller("HelloAngular",['$scope', //控制器 C function HelloAngular($scop…
0.关于Ng-app   通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs应用. 1.ngModel实现Select 具体参见 AngularJs实现无限级下拉Select. 2.在$ scope域外调用$ scope的方法 element = document.querySelector('[ng-controller=help_controller]'); var $…
2017-03-23 本文更新链接: http://www.cnblogs.com/daysme/p/6613071.html $http angularjs中的ajax 向服务器请求数据 1/2 后台文件 test.php <?php $str='你好'; echo $str;?> 2/2 前台文件 <!DOCTYPE html><html lang="en" ng-app="app"><meta charset=&quo…
2017-03-23 本文更新链接: http://www.cnblogs.com/daysme/p/6606805.html 什么是 angularjs 2009年有两个外国人创建,后由谷歌收购并开源. 他的特点有MVC.模块化.双向数据绑定.语义化标签.依赖注入等. AngularJS主要考虑的是构建CRUD应用,90%的应用都是CRUD应用,游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用不合适他做. CRUD(增加Create.读取Read.更新Update.删除Delete)…
angularjs表达式: ng-init ng-bind ng-app ng-model输入域的值绑定到程序 ng-repeat重复一个HTML元素 自定义指令: <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>…
控制器:在 Angular 中控制器是一个函数,用来向作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 使用方法: var app = angualr.module('app',[]); app.controller('testController',function($scope){ // do sth here }) 控制器的嵌套:在整个应用中都会有父级作用域存在,除了孤立作用域以外,所有作用域都通过原型继承而来.他们都可以访问父级作用域. 默认情况下,当 An…
模块: 在 AngularJS 中,将函数代码全部都定义在全局命名空间中绝对不是什么好主意,全局变量污染会使冲突几率变大,调试困难,降低开发效率.上次写计时器的 controller 时,我们把 controller 写在了一个全局命名空间中定义的函数里,这就是反例.在 Angular 中,模块是定义应用的主要方式.模块包含了主要的应用代码.一个应用可以包含多个模块,每一个模块内都包含了定义具体功能的代码. 使用模块的好处有很多: 保持全局命名空间的整洁: 便于测试: 可以复用: 使应用可以以任…
https://github.com/angular/angular.js/blob/master/src/ng/q.js 1.ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者".2.ng-model 指令把输入域的值绑定到应用程序变量 name.3.ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML.4.ng-init 指令初始化 AngularJS 应用程序变量. ng-app 指令…
Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写javascript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流.异常处理和函数语义化为代价,甚至会让我们掉进出现callback大坑,而promise解决了这个问题. ES6中Promise.angularJS内置的AngularJS内置Q,以及when采用的都是Promises/A规范,如下: 每个任务都有三种状态:未完成(pending).…
小颖最近不知怎么了,老是犯困,也许是清明节出去玩,到现在还没缓过来吧,玩回来真的怕坐车了,报了个两日游得团,光坐车了,把人坐的难受得,去了也就是爬山,回来感觉都快瘫了,小颖去的时候还把我家仔仔抱着一起去了,仔仔玩美了,上山上的没劲了,我给喝点水继续爬,上车了躺我怀里秒睡,虽然我没玩开心,但是看着我家仔仔海皮的样子也值了,以后可以多带他出来玩玩,不然老在家里呆着狗也跑不开嘻嘻,分享几张小颖出去玩得照片哈哈哈…
过滤器是用来格式化给用户展示的数据的. 在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器. 大写:{{ name | uppercase }} 也可以在 JS 中进行调用$filter 服务. app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); }]); 向过滤器传参:{{1234.…
首先说一下服务这个东西是用来干嘛的.很多时候我们把太多的数据和逻辑都一股脑儿地往 controller 里放.这样我们的 controller 原来越臃肿.从它们的生命周期可以发现,其实 controller 应该在需要的时候被初始化,不用了就直接被抛弃,释放内存.因此,当我们切换或者刷新页面的时候,angular 就会清空当前的 controller.与所以,service 才应该被用来保存应用业务逻辑和持久化的数据,并且这些数据可以在不同的 controller 之间应用. 那么问题来了,(…
angular的过滤器用法: 1.模板中使用 {{expression|filter}} 也可以多个filter连用 {{expression|filter1|filter2|...}} filter 也可以接受参数,多个参数用:进行分割 {{ expression | filter:argument1:argument2:... }} 模板中可以随意使用filter,不只是在{{}}中可以用到 如: <span ng-repeat="a in array | filter "&…
angular的服务有五种 第一种 constant 一般作为一种常量的服务 不可更改 第二种 value 用来注册服务对象或函数 可更改 第三种 factory 创建和配置服务的最快捷方式.可更改 第四种 service 注册一二支持构造函数的服务.可更改 第五种 provider 所有的服务工厂都是由provider创建的.可更改 一般的话 大多数都是用factory 就够了,他是provider的简写,但是如果需要用Angular.config()对provider方法返回的服务进行额外的…
ylbtech-AngularJS:实例 1.返回顶部 1. AngularJS 实例 实例 您可以在线编辑实例,然后点击按钮查看结果. AngularJS 实例 <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> 尝试一下 »…
前言 这段时间在看一些IPC相关的东西,这里面就不可避免的要涉及到service,进程线程这些知识点,而且在研究的过程中我惊觉自己对这些东西的记忆已经开始有些模糊了——这可要不得.于是我就干脆花了点心思温故了一下,就有了这篇博文. 非常感谢Google的官方文档——尤其是其中部分文章有中文版了之后. 正文 1,什么是service? Service是一个可以在后台执行长时间操作而不使用用户界面的应用组件.那么问题来了,既然它不使用用户界面,那么它怎么知道应该什么时候开始执行什么操作呢?答案是——…
原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章也是会有收获的. 我觉得AngularJs就是实现了php的很多功能和方法,除了不能直接操作数据库以外,他有很多插件可以提供使用,很强大. 我遇到的问题: 1.使用$http.post()方法提交到php的时候,php的接收语句是这样的: $shuju = file_get_contents('ph…
声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括号{{}}语法进行数据绑定: 使用DOM控制结构来实现迭代或者隐藏DOM片段: 支持表单和表单的验证: 能将逻辑代码关联到相关的DOM元素上: 能将HTML分组成可重用的组件.   AngularJS主要考虑的是构建CRUD应用.(增加Create.查询Retrieve.更新Update.删除Del…
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472873 作者为本人,只是该博客暂停维护转到 OSC 了. 本文主要讲 AngularJS 的表单验证,Demo页面我使用 Bootstrap3.2.0 作为前端显示框架,同时引入了jQuery1.11.1,AngularJS 为刚刚新发布的1.2.25. 在新的项目中巧妙地接触到了Google提供的…
这一系列文章感觉写的不好,思维跨度很大,原本是由于与<Angularjs in action>有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的时候还是会心有余而力不足,零零总总的写了<Angularjs in action>读书笔记的前三篇.渐渐明白,将新知识搞懂是一门本事,而将自己明白的share出去并让别人也明白更是一门学问.几篇翻译下来,感觉有些苍白,有网友给建议说是真枪实战的做点东西,结合代码更有说服力.想想也是,纸上得来终觉浅,绝知此事要躬行.于是乎就有了&…