`

angularJS基础学习笔记

 
阅读更多
http://www.runoob.com/angularjs/angularjs-services.html  angularjs教程
http://www.runoob.com/try/try.php?filename=try_ng_bind_strings ng-bind="a"作用={{a}}引用参数
ng-bind用在元素上如<span  ng-bind="firstName"></span>
ng-init对数据进行初始
类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器

ng-model 双向数据绑定
ng-repeat 指令会重复一个 HTML 元素
ng-options="x for x in names" 下选框
使用 ng-options 指令,选择的值是一个对象:
<select ng-options="">
</select>等价于
<select>
<option ng-repeat=""></option>
</select>
ng-repeat 有局限性,选择的值是一个字符串:
<button ng-disabled="mySwitch">点我!</button>
ng-show与ng-disabled
ng-hide 
ng-click 
ng-include

--------------------------------------------------------------
自定义指令:返回一个模板
app.directive("runoobDirective", function() {
    return {
        restrict : "A",                       <!--默认是EA-->
        template : "<h1>自定义指令!</h1>"   <!--template是该指令返回的内容-->
    };
});

E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
---------------------------------------
表单验证:
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
{{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)
{{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
{{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)
myAddress.$error.email  email错误则为true
myForm.email.$error.required,需要的字段为空则为true
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

----------------------------------------------------------
AngularJS 过滤器

currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

---------------------------------------------------------------------------------------
服务:
$location $http $timeout 访问在规定的毫秒数后执行指定函数。$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式,每隔一段时间,调用一次该函数
-------------------------------------------------
创建自定义服务:服务里写具体的函数逻辑  ,注:自定义的服务引用时不需要加$
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});


-----------------------------------
$odd $even 索引的奇偶
跨域 HTTP 请求:header("Access-Control-Allow-Origin: *");
在我们的实例中,所有 AngularJS 库都在 HTML 文档的头部载入。
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证
----------------------------------------
AngularJS 全局 API
angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字,如果是返回 true。


------------------------
http://www.open-open.com/lib/view/open1416878937309.html 

angularjs 多级菜单

------------------------------------------------------------------------------------------

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data
<div ng-controller="ParentCtrl">                <!--父级-->
    <div ng-controller="SelfCtrl">              <!--自己-->
        <a ng-click="click()">click me</a>
        <div ng-controller="ChildCtrl"></div>   <!--子级-->
    </div>
    <div ng-controller="BroCtrl"></div>         <!--平级-->
</div>

事件属性 目的
event.targetScope	发出或者传播原始事件的作用域
event.currentScope	目前正在处理的事件的作用域
event.name	事件名称
event.stopPropagation()	一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault()	这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented	如果调用了`preventDefault`则为true

分享到:
评论

相关推荐

    AngularJS学习笔记

    ### AngularJS学习笔记知识点解析 #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库,虽然在本文档中作者将其称为“工具”,但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念...

    AngularJS基础学习笔记之表达式

    AngularJS表达式  AngularJS表达式写在双大括号中:{{ 表达式语句 }}。  AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。  AngularJS会准确地将表达式“输出”为计算的结果。  AngularJS表达式...

    angularJs个人学习笔记及源码

    1. **AngularJS基础**: AngularJS的核心特性包括数据绑定、依赖注入、指令系统和表单处理等。数据绑定允许开发者在视图和模型之间建立双向关系,使得UI和数据模型同步更新。依赖注入则简化了对象之间的依赖关系,...

    AngularJS基础学习笔记之指令

    AngularJS指令  AngularJS指令是带有ng-前缀的扩展HTML属性。  ng-app指令用来初始化AngularJS application。  ng-init指令用来初始化application数据。  ng-model指令用来将HTML控件(如input,select,...

    AngularJS基础学习笔记之简单介绍

    AngularJS是一个JavaScript框架。它可以通过[removed]标记被添加到HTML页面中。 AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中。 AngularJS是一个JavaScript框架  AngularJS是一...

    AngularJS基础学习笔记之控制器

    AngularJS控制器用来控制AngularJS applications的数据。  AngularJS控制器就是普通的JavaScript对象。 AngularJS控制器  AngularJS applications通过控制器进行控制。  ng-controller指令定义了一个application...

    AngularJS 学习笔记.pdf

    总而言之,这份AngularJS的学习笔记为初学者提供了一个由浅入深、涵盖AngularJS基础知识和核心概念的全面指南。通过对这份笔记的学习,初学者可以逐步掌握AngularJS的使用,从而有效地进行前端开发。

    angularjs学习笔记

    **AngularJS学习笔记** AngularJS,作为一款强大的前端JavaScript框架,由Google维护,主要用于构建单页应用程序(SPA)。它的核心特性包括数据绑定、依赖注入、模块化和指令系统,极大地简化了网页应用的开发流程...

    AngularJs学习笔记.docx

    ### AngularJS 学习笔记 #### 一、AngularJS 概述 AngularJS 是一个用于构建动态Web应用的开源框架,由 Google 维护。它通过扩展 HTML 的功能来简化 Web 开发,并允许开发者以声明式的方式编写代码,极大地提高了...

    angularJS_学习资料

    学习笔记通常包含个人对AngularJS理解的深入点,可能包括一些高级话题,如脏检查(Dirty Checking)、$digest循环,以及如何优化性能。笔记可能还包括解决常见问题的方法,以及作者在实践过程中积累的技巧和最佳实践...

    AngularJs学习笔记1

    【AngularJS学习笔记1】 AngularJS 是一个强大的前端JavaScript框架,用于构建动态Web应用程序。它通过数据绑定和依赖注入简化了HTML页面与JavaScript代码之间的交互。这篇笔记将深入探讨AngularJS的一些基本概念,...

    AngularJS学习笔记.pdf

    ### AngularJS 学习笔记知识点总结 #### 一、AngularJS 概述 AngularJS 是由 Google 开发的一款开源 JavaScript 库,它提供了一种全新的应用程序组织与开发方式。AngularJS 的核心特性之一就是**数据双向绑定**,...

    AngularJS 学习笔记(表单验证篇)

    本学习笔记将深入探讨AngularJS中的表单验证机制,主要包括以下几个方面: 1. **AngularJS 表单基础**: AngularJS中的表单是基于HTML的,但通过添加`ng-form`指令,可以将其提升为一个AngularJS感知的表单。表单...

Global site tag (gtag.js) - Google Analytics