ng- : 指令
ng-app : 指定angular使用的区域 (一般加在html标签中 <html lang="en" ng-app="myApp">)
ng-init : 初始化数据
ng-model : 绑定了标签的值
双向数据绑定实现: HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化.
请输入:<input type="text" ng-model="value">
<h1 ng-bind="value"></h1> 或者 <h1> {{value}} </h1> 后者有闪烁,前者没有
表达式:
ng-init: 定义多个数据模型,中间使用 ; 隔开 (很少这样使用)
<div ng-init="price=10;count=5;firstName='张三';name='zs';a={name:'123'}"><div>
表达式使用要求: {{表达式}} : 表达式,表示在网页中原样输出
1.不能在表达式里面定义变量 2.不能有if操作 3.不能定义函数 4.不能在里面循环
<!--在表达式中不能使用这些类似于parseInt这样的方法-->
表达式的绑定是单向绑定的
例如:
{{name}}
<input type="text" value={{name}}>
<input type="text" ng-value="name">
模块: 在<script></script>中创建
注册创建模块: 第一个参数:模块名 <html lang="en" ng-app="myApp"> 与之对应 第二个参数:放置需要依赖的模块 例如 :
var app = angular.module('myApp',[]);
通过模块创建控制器:
第一个参数:控制器的名字
第二个参数:控制器的执行函数
$scope是一种服务,服务里面有自己的属性方法,可以直接调用
$scope可以看成是数据模型
scope是作用域
例如 :
//数组构造控制器来解决依赖注入的压缩问题
app.controller('firstController',['$scope',function ($scope) {
//属性
$scope.title = '张三';
//方法
$scope.fun = function () {
$scope.age = 18;
}
//处理业务逻辑
}]);
no-repeat: 用于循环输出指定次数的 HTML 元素。
<!DOCTYPE html>
<html lang="en" ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-controller="firstCtrl">
<ul>
<!--作用于数组 当有重复数据的时候,根据下标遍历数组,后面接track by $index-->
<!--ng-class: 设置类 "{类名:true/false}"-->
<!--ng-repeat 自带的属性值$index,$event(下标为偶数,从0开始),$odd(下标为奇数),$first,$last-->
<li ng-repeat="key in datatrack by $index" ng-class="{pink: $even,magenta:$odd}">
{{key}}
</li>
<!--作用于对象数组 每个key指的是每个元素-->
<li ng-repeat="key in data1" ng-class-even="'pink'" ng-class-odd="'magenta'">
{{key.name+','+key.age}}
</li>
<!--作用于对象-->
<li ng-repeat="(key,value) in person">{{key+','+value}}
<!--子标签也会克隆一次-->
<span>abc</span>
</li>
<p ng-class="classNames">类名添加</p>
</ul>
</div>
</body>
</html>
<script src="angular.js"></script>
<script>
//创建模块
var app = angular.module('myApp',[]);
app.controller('firstCtrl',function ($scope) {
//属性
$scope.data = [1,2,3,4,5,5,6];
$scope.data1 = [{name:'zs',age:15},{name:'ls',age:18},{name:'ww',age:20}];
$scope.person = {name:'张三',age:18};
// 添加类名
$scope.classNames = {red:true,frame:true};
})
</script>
链式编程:
注入一般指的是:在执行函数里面注入一个服务($scope,$http)或者对象,对象和服务是系统提供的
有自己的属性方法,我们不需要管他从哪里来,直接调用就可以了
方法一:
var app = angular.module('myApp',['ngSanitize']);
app.controller('firstCtrl',function ($scope) {
$scope.title = '张三';
});
方法二:
angular.module('myApp',[]).controller('firstCtrl',function ($scope) {
$scope.title = '张三';
})
方法三:
var app = angular.module('myApp',[]);
angular.module('myApp').controller('firstCtrl',function ($scope) {
$scope.title = '张三';
})
控制器 : 一个控制器应用中包含另一个控制器,内部的控制器会继承上一级控制器
<div ng-controller="parentCtrl">
<!-- 分别定义的两个控制器 firstCtrl 继承了 parentCtrl -->
<div ng-controller="firstCtrl">
{{name}}
</div>
</div>
rootScope:根作用域
app.controller('secondCtlr',['$scope','$rootScope',function (s,r) {
s.name = '神马';
r.title = '改变全局'; //同样也能改变全局变量
}]);
//run方法用于初始化全局的数据，仅对全局作用域起作用。
app.run(['$rootScope',function (rootScope) {
rootScope.title = '根作用域'; //定义全局
}]);
过滤器应用:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="firstCtrl">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--字符串大小写-->
{{'we are family' | uppercase}}
{{'We Are Family' | lowercase}}
<!--将json对象格式化为json字符串-->
{{{name:'张三',age:18} | json}}
<!--时间格式化-->
<p>{{1478917631176 | date}}</p>
<p>{{date | date}}</p>
<p>{{date | date:'MM/dd/yyyy @ h::mma'}}</p>
<p>{{date | date: 'yyyy-MM-dd hh:mm:ss'}}</p>
<!--number 格式化-->
<p>{{123456 | number}}</p>
<!--保留三维小数,并且四舍五入-->
<p>{{1.23456 | number}}</p>
<p>{{1.23456 | number:2}}</p>
<!--货币格式化-->
<p>{{250 | currency}}</p>
<p>{{250 | currency:'¥'}}</p>
<!--字符串的截取-->
<p>{{'I love you' | limitTo:6}}</p> <!-- 截取顺数6个 结果为:I love -->
<p>{{'I love you' | limitTo:-6}}</p> <!-- 截取倒数6个 结果为:ve you -->
<!--数组的截取:返回值还是数组-->
<p>{{[1,2,3,4] | limitTo: 2}}</p> <!-- 表示截取2个 结果为:[1,2] -->
<!--查找 filter -->
<!--查找含有某个字符-->
<p>{{[{name:'哪吒',age:3},{name:'西门',age:40},{name:'金莲',age:18}] | filter:8}}</p>
<!--查找名字为哪吒的对象,最后面应该加上空格 person是个对象数组 -->
<p>{{person | filter:{'name':'哪吒'} }}</p>
<!--排序 orderBy :默认是从小到大,升序-->
<p>{{person | orderBy:'age' }}</p>
<!-- orderBy为true的时候是降序排列-->
<p>{{person | orderBy:'age':true }}</p>
<!--几个过滤器一起使用-->
<p>{{person | orderBy:'age':true | filter:8 }}</p>
<!--在指令中添加过滤器-->
<ul><li ng-repeat="x in person | orderBy: 'age' ">{{x.name + ',' + x.age}}</li></ul>
<!-- 控制器添加过滤器的调用 -->
<p>{{up}}</p>
<p>{{time}}</p>
<p>{{filter}}</p>
<!-- 自定义的过滤器调用 -->
<p>{{'hello everybody' | replace:2 }}</p>
<p>{{'hello everybody' | replace:3 }}</p>
</body>
</html>
<script src="angular.js"></script>
<script>
//创建模块
var app = angular.module('myApp',[]);
//如果要在控制器中使用过滤器,必须注入服务: $filter
app.controller('firstCtrl',['$scope','$filter',function ($scope,$filter) {
var date = new Date();
console.log(date.getTime());
$scope.date = date;
$scope.person = [{name:'哪吒',age:3},
{name:'西门',age:17},
{name:'金1',age:38},
{name:'金2',age:18},
{name:'金3',age:8}];
$scope.up = $filter('uppercase')('hello');
$scope.time = $filter('date')($scope.date,'yyyy-MM-dd hh:mm:ss');
$scope.filter = $filter('filter')($scope.person,{'name': '西门'});
}]);
//自定义过滤器
//第一个参数:过滤器的类型(名字)
//第二个参数:函数,相当于执行函数
app.filter('replace',function () {
//直接return
//第一个参数相当于要过滤的数据
//第二个参数是:后面的数据
return function (input,n1) {
if(n1 ==2){
return input.replace(/hello/,'你好');
}else if(n1==3){
return input.replace(/hello/,'你不好');
}
}
})
</script>
刷新数据 $apply
$scope.$apply(function () {
//需要刷新的内容
});
监听数据的变化 $watch 以及 定时器的使用
//定时器的使用注入 超时定时器/间歇定时器$interval 延迟定时器$timeout
app.controller('firstCtrl',['$scope','$interval',function ($scope,$interval) {
$scope.count = 10;
//定时器使用
//第一个参数:执行函数
//第二个参数:间隔时间(ms)
var timer = $interval(function () {
$scope.count--;
},1000);
//第一个参数:要监听的对象,对象是属性则以字符串的形式去写,对象是方法则以$scope.方法名
//第二个参数:执行函数
//newVal:变化后的值,oldVal:变化以前的值
$scope.$watch('count',function (newVal,oldVal) {
if (newVal == 0) {
//关闭定时器
$interval.cancel(timer);
}
})
}])
简单的工具方法: angular.方法
app.controller('firstCtrl',['$scope',function ($scope) {
//判断是不是数组,返回值true或者false
console.log(angular.isArray([1,2,3]));
console.log(angular.isDate(123));
//将字符串转化为大写
console.log(angular.uppercase('we are friend'));
//两个参数,是比较的数据
console.log(angular.equals(1,2));
//.toJson将json对象转化为字符串
var json = {name:'zs'};
console.log(angular.toJson(json));
//.fromJson将字符串转化为json
var stringJson = '{"name":"李四"}';
console.log(angular.fromJson($scope.person));
}]
复杂的工具方法: angular.方法 .forEach .bind
$scope.person = {name:'男神',age:18};
$scope.data = [1,2,3,4];
//第一个参数:要遍历的对象或者是数组
//第二个参数:执行函数,执行函数的第一个参数是value,第二个是key
angular.forEach($scope.person,function (value,key) {
console.log(value,key);
});
angular.forEach($scope.data,function (value,index) {
console.log(value,index);
})
//第一个参数相当于执行函数里面的this指向
//p是个函数
var p = angular.bind(person,function () {
console.log(this);
});
p();
多个模块需手动加载: angular.bootstrap(DOM元素,['模块名'])或者也可以通过添加依赖的方式来加载其他模块
//创建app1,app2两个模块
//angular 只会自动加载一次模块,如果要加载其他模块,需要手动加载
var app1 = angular.module('myApp1',[]);
app1.controller('firstCtrl',['$scope',function ($scope) {
$scope.name = '老王';
}])
var app2 = angular.module('myApp2',[]);
app2.controller('secondCtrl',['$scope',function ($scope) {
$scope.title = '老宋';
}]);
//手动加载模块
//第一种方式:通过添加依赖的方式来加载其他模块
var app1 = angular.module('myApp1',['myApp2']);
//第二种angular.bootstrap(DOM元素,['模块名'])
//先拿到模块所在的元素
var div = document.getElementById('box');
//第一个参数是DOM元素
//第二个参数是数组.数组里面的元素是需要手动加载的模块名
angular.bootstrap(div,['myApp2']);
使用jQ创建内容 :
<body>
<div id="box"></div>
<div></div>
</body>
<script src="angular.js"></script>
<script src="jquery-3.1.0.js"></script>
<script>
angular.module('myApp',[]).controller('firstCtrl',['$scope',function ($scope) {
//第一中方式,使用jQuery方法调用,需导入jquery-3.1.0.js文件
$('#box').html('这是jQ创建内容');
//第二种方式,使用内置的jqLite调用jQuery的方法,不要导入jquery-3.1.0.js文件
var div = document.getElementsByTagName('div')[1];
angular.element(div).html('这是jqLite调用')
}])
</script>
ng- 常用指令集合:
ng-click/dbclick: 单击/双击事件
ng-mousedown/up: 鼠标在指定的 HTML 元素上按下/松开鼠标按钮时 要执行的操作
ng-mousemove/over/out: 鼠标移动/移入/移出
ng-keydown/up/press: 在指定 HTML 元素上按下/抬起/按下时要执行 的操作(一般用于输入框)
ng-focus/blur: 输入框获得/失去焦点需要执行的操作
ng-submit: 表单提交后执行的函数
ng-copy: 按下复制键的时候执行的事件
ng-cut: 按下剪切键的时候执行的事件
ng-paste: 按下粘贴键的时候执行的事件
ng-cloak: 在 angular 中为我们提供了
ng-cloak 来实现防止闪烁的方案, 我们只需 要在需要的地方加上 ng-cloak。同时对于 bing 文字 ({{ express }} )我们也可以改为 ng-bind 来实现避免<p ng-bind="title"></p>
<p ng-cloak>{{title}}</p>
ng-non-bindable: 如果我们就想要一个{{}} 这样的内容就可以使用 ng- non-bindable ,原型 ”输出 ”
ng-disabled: 设置表单输入字段的 disabled 属性(input, select, 或 textarea),如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用
ng-readonly: 用于设置表单域(input 或 textarea) 的 readonly 属性
ng-checked: 用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性
ng-value: 用于设置 input 或 select 元素的 value 属性
ng-class: 用于给 HTML 元素动态绑定一个或多个 CSS 类
ng-class-even: 为表格的偶数行设置 class
ng-class-odd: 为表格的奇数行设置 class (从1开始)
ng-style: 为 HTML 元素添加 style 属性<div ng-style="{color:'red'}">开始一个人</div>
ng-href: 覆盖了原生的 <a> 元素 href 属性
ng-attr-(suffix): html属性多了,AngularJS 提供了一种通用的写法<p ng-attr-title="'事实'">我是女生</p>
ng-show: 值设置为 true 的时候显示元素
ng-hide: 值设置为 true 的时候隐藏元素
ng-if: 值设置为 false 的时候删除元素 ng-switch:指令根据表达式显示或隐藏对应的部分。 对应的子元素使用ng-switch-when 指令,如果匹配选中选择显示, 其他为匹配的则移除。 你可以通过使用ng-switch-default 指令设置默认选项,如果都没有 匹配的情况,默认选项会显示
<input type="checkbox" ng-model="box1">{{box1}}
<div ng-switch="box1">
<p ng-switch-default>switch默认</p>
<p ng-switch-when="true">ng-switch为true</p>
<p ng-switch-when="false">ng-switch为false</p>
</div>
ng-open: 设置 details 列表的 open 属性
<input type="checkbox" ng-model="box2">{{box2}}
<details ng-open="box2">
<summary>总结</summary>
<p>12345</p>
</details> ng-bind: 防止闪烁效果 <p ng-bind="title"></p>
ng-bind-template: 解决 ng-bind 只能绑定一个的问题 <p ng-bind-template="{{title}} {{title1}}"></p>
ng-bind-html: 解析 html 代码(得导入 sanitize.js 文件,并给 app 添加 ngSanitize 依赖) ng-include: 加载外部页面(传入文件路径就行)
//方法一 : 引进外部文件<div ng-include="'hhh.html'"></div>
//方法二: <div ng-include="'tpl'"></div>
<script type="text/ng-template" id="tpl">
<h1>诠释所有</h1>
</script>
ng-model-options: 控制双向事件绑定的时候,触发事件的方式
updateOn: ‘blur’ 失去焦点时触发 debounce : 1000ms即1秒后触发 <div ng-model-options="{updateOn:'blur'}">
<input type="text" ng-model="na">{{na}}
</div>
<div ng-model-options="{debounce:1000}">
<input type="text" ng-model="na1">{{na1}}
</div>
