AngularJs学习笔记(一)
来源:互联网 发布:java导出pdf 编辑:程序博客网 时间:2024/04/27 23:56
AngularJs学习笔记
最重要的功能特性
- 实现自动化双向的数据绑定,把元素值或者是输入域的值绑定到应用程序上面,减少了页面的DOM操作
- MVC
- 模块化
- 指令系统
<div ng-app> <p>Name:<input type="text" ng-model="name"></p> <h2>Hello {{name}}</h2> <div>
- AngularJs: 是通过ng-directivs(ng指令[当作一个属性])扩展HTML的
- ng-app:是一个AngularJs的程序入口指令,也就是说div是这个AG应用程序的所有者。
- ng-model:把输入域的值绑定到h2的标签里面的变量name上
- 写在hello旁边的{{name}}就是AG的表达式{{expression}}把数据绑定到HTML,输出数据
上面这段代码有一个缺点:当我们把AG的js文件引入写在body下面的时候,你会在页面上面看到{{name}}一闪而过,解决的办法有两种:
1. 把引入的AG.js文件放在head里面
2. 就是使用ng-bind{把应用程序的数据绑定到HTML视图上面}这个指令,当然是对于数据比较少的时候,引入的js文件还是放在下面
<h2>Hello <span ng-bind="name"><span>
具体来说是绑定到某个标签的 innerHTML。
指令系统
- AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
- 表达式{{exp}}是通过ng-model=“exp”进行同步的。
- ng-repeat:重复一个HTML元素。
<div ng-app="myApp"> <ul ng-controller="ListController"> <li ng-repeat="item in lists" data-id="{{item.id}}"> <span>{{$first?"开始",""}}</span> <strong>{{item.name}}</span> <span>{{item.age}}</span> <span>{{$last?"结束了",""}}</span> </li> <ul><div><script> angular.module("myApp",[]).controller ("ListController",["$scope",function($scope){ $scope.lists=[]; for(var i=1;i<10;i++){ $scope.lists[$scope.lists.lenght]={ id:i, name:"sun"+i, age:20+i } } }])</script>
解析:
- li标签上面的ng-repeat属性表示会遍历这个li标签(包括里面的子标签),且li标签里面的内容是通过这个in循环来产生的,后面的data-id是自定义的id属性,通过表达式来绑定值
- 第一个和最后一个的span里面的**
- 下面的script里面,通过angular.module()创建一个模块,里面的参数第一个是模块的名字{把这个模块的名字绑定到ng-app上面就是说明这个区域属于这个模块},第二个是这个模块所要依赖的模块,没有还是要传入[]
- 创建了模块后,要管理,那么接着创建了控制器controller,第一个参数是控制器的名字,第二个参数是一个函数,控制器起作用的时候会执行这个函数。推荐上面的写法,把作用域$scope{HTML视图与控制器之间的纽带}当作一个字符串传到函数的参数里面,防止代码压缩的时候出现错误。最后把控制器加到了ul上面,这个控制器是属于这个模块的。
- 函数里面,通过$scope.lists向外暴露一个数组,接着通过循环往数组里面插入对象。往数组里面添加数据的方法有push()=对象,数组名[i]=对象和上面函数里面的方法。
1.ng-init:为应用程序定义初始化的值。一般是不使用这个指令。
2. ng-bind:绑定数据到HTML,跟表达式的作用差不多。当这个指令绑定的值包含HTML的时候会自动的转义,防止跨站脚本的攻击。就是直接在页面上显示html的标签,标签不起作用。怎么办?:可以引入一个Angular里面的自定义的库angular-sanitize/angular-sanitize.js,并且使用ng-bind-html指令。使用自定义的模块才可以依赖别的包里面的定义的模块。最后就可以让html的标签起作用。
<strong ng-bind-html="username"></strong><script>angular.module("myAPP",["ngSanitize"]);</script>
自定义指令
可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, icesunDirective, 但在使用它时需要以 - 分割, icesun-directive,结果会在 这个标签里面显示
自定义的标签
<div ng-app="myApp"> <icesun-directive></icesun-dirctive></div> <script> var app=angular.module("myApp",[]); app.directive("icesunDirective",function(){ return{ template:"<h1>自定义的指令</h1>" } } </script>
自定义的指令我们可以通过下面的方式调用:
1. 这个指令的元素名本身:
2. 作为一个并签的属性被调用:《div icesun-directive>《/div>
3. 作为一个标签的类名也行:《div class= “icesun-directive”>4. 还有这种比较特殊的是通过注释来调用这个自定义的指令:《!–directive: icesun-directive –>,但是我们在函数的返回值里面必须加入两个键值对:restrict:”M”和repla:”true”。
5. 可以通过restrict来限制自定义指令的调用:E 作为元素名使用,A 作为属性使用
C 作为类名使用
M 作为注释使用
默认是EA:即可以通过元素名和属性名来调用指令。
- AngularJS学习笔记(一)
- AngularJS 学习笔记(一)
- AngularJS学习笔记(一)
- AngularJS学习笔记(一)
- AngularJs学习笔记(一)
- angularjs学习笔记(一)
- AngularJS学习笔记(一)
- AngularJS 学习笔记(一)
- angularjs学习笔记一
- AngularJS学习笔记(一)
- AngularJS学习笔记一
- AngularJs学习笔记(一)初认识AngularJs
- AngularJS学习笔记(一)基本配置
- Pro AngularJS学习笔记(一)
- Angularjs 学习笔记(一)基础
- AngularJS的学习笔记(一)
- angularjs 笔记(一)
- AngularJS学习(一)
- 用筛法求100之内的所有素数
- Scala中的基本控制结构
- 日常潜水-20160927-微信企业号发送消息接口
- 跳跃问题
- Java单例模式的写法
- AngularJs学习笔记(一)
- 日常
- C语言之_双重指针、多文件、include、文件
- Leetcode 87 Scramble String
- iOS使用自签名证书实现HTTPS请求
- Unable to add window android.view.ViewRootImpl -- permission denied for this window type
- Java设计模式——模板方法模式(TEMPLATE METHOD PATTERN)
- JavaScript中的Array操作(ECMA5新特性)
- 【神经网络与深度学习】卷积神经网络(CNN)