Angularjs学习笔记

表达式

AngularJS 的表达式写在双大括号内{{ expression }},这把数据绑定到HTML。
表达式和JS的表达式很像,可以包含文字,运算符和变量,但是不支持条件判断和循环。
ng-app 拥有这个指令的HTML元素被angular视为其应用。
ng-init属性初始化应用的数据。


模块

模块定义了一个应用程序,是应用控制器的容器。
var app = angular.module('appname',[]) 这条语定义了一个模块,第二个参数用于定义模块的依赖关系。


AngularJS 指令

指令是HTML属性,带有前缀ng-。
ng-disabled 把应用程序数据绑定到HTML的disabled属性
ng-show 显示或者隐藏一个HTML元素
ng-hide 隐藏或者显示一个HTML元素
ng-click 定义了AngularJS点击事件
ng-include 可以包含其他html页面

ng-model 把元素的值绑定到应用程序,还可以为数据提供状态值,甚至还可以根据表单域的状态为表单添加CSS类。类如下所示:

ng-empty 输入与为空时添加
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

ng-repeat 该指令会重复HTML元素,使用方法如下

<ul ng-app ng-init="names=['elk','q','pi']">
    <li ng-repeat="x in names">
        {{ x }}
    </li>
</ul>
创建自定义指令
<script>
var app = angular.module("myApp",[]);
app.directive('myFunc',function(){
    return {
                restrict : "A",
        template : "<h1>我的自定义指令。</h1>"
    };
});
</script>

在HTML中调用默认使用
<my-func></my-func>
<div my-func></div>
restrice的值有 A E C M 默认为EA


$scope

$scope是应用在HTML和控制器之间的纽带,它是一个对象,有可用的方法和属性,可以应用在试图和控制器上。
创建控制器时,可以时$scope为参数传递,在控制器中添加$scope对象时,HTML可以通过表达式获取这些属性,表达式不必包含$scope,直接用属性名即可。
$rootscope 根作用域,所有应用都有一个根作用域,用他定义的值可以应用在各个控制器中。


AngularJS控制器

AngularJS控制器控制应用程序的数据,是常规的JS对象。
ng-controller 属性定义了应用程序的控制器。
通常把控制器放在外部文件中,和平常的JS文件一样。

AngularJS过滤器

过滤器用一个管道字符|添加到表达式和指令中。
过滤器可以用于转换数据:

currency 格式化数字为货币格式
lowercase 格式化字符串为小写
orderBy 根据表达式来排列数组
uppercase 格式化字符串为大写
filter 过滤

AngularJS服务

AngularJS服务是一个函数或者对象,可以在应用中使用。
$location服务作为一个参数传递到控制器中,使用这个服务需要在控制器中定义相应的属性。
$location.absUrl() 返回当前页面的URL地址。

$http是应用中最常用的服务,用于向服务器发送请求,响应服务器传送过来的数据。
$timeout 第一个参数为延迟执行的函数,第二个参数为延迟时间。
$interval 第一个参数为执行的函数,第二个参数为间隔时间。

自定义服务

pas

$http

$http是AngularJS中的一个核心服务,用于读取远程服务器中的数据。
$http.url() 是用于读取服务器数据的函数。

AngularJS Select

Angular可以使用数组或对象创建一个下拉表选项
ng-option 属性从一个列表当中读取每一项,形成下拉列表

AngularJS动画

AngularJS 使用动画需要引入 angular-animate.min.js 库


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • 简介: AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 Ang...
    JenniferYe阅读 1,420评论 0 13
  • 1. 介绍 AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多...
    崔皓翔阅读 831评论 0 5
  • 1、什么是angularjs AngularJS是一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心)。 Ang...
    margery阅读 309评论 0 0
  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 861评论 0 2
  • 对一个人不了解就没资格批评她。之前在各种社交媒体略微听过“金星”这个名字,而对于她最多的一个前缀便是“变性人”,当...
    琭玉珞石_谦阅读 654评论 0 0