AugularJS
表达式和语句
-
ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建
$rootScope根作用域对象
ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性
{{}} (表达式) : 显示数据,从作用域对象的指定属性名上取1、表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，
2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。
3、区别：语句用封号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。
js引擎在解析的时候会自动的加上封号4、特例：if语句，就不用加分号 可也是完整的语句。
<body ng-app>
<input type="text" ng-model="username">
<p>你要输入的内容是:<span>{{username}}</span></p>
<script src="../../js/angular-1.2.29/angular.js"></script>
</body>
双向数据绑定
- 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成
- 双向数据绑定: 数据可以从View(视图层)流向Model（模型）, 也可以从Model流向View
-
视图(View): 也就是我们的页面(主要是Andular指令和表达式)
-
模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法
-
当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>Model
-
当Model域对象的属性发生改变时, 页面对应数据随之更新: {{}}表达式 数据从Model==>View
-
ng-model是双向数据绑定, 而{{}}是单向数据绑定
3.ng-init 用来初始化当前作用域变量。
<body ng-app ng-init="username='tom'">
<input type="text" ng-model="username">
<p>姓名1:{{username}}</p>
<input type="text" ng-model="username">
<P>姓名2:{{username}}</P>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
</body>
作用域对象和控制器对象
-
作用域对象 :
一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
它的属性和方法与页面中的指令或表达式是关联的
-
控制器:
用来控制AngularJS应用数据的 实例对象
ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象
同时Angular还有创建一个新的域对象
$scope, 它是$rootScope的子对象在控制器函数中声明
$scope形参, Angular会自动将$scope传入
<div ng-controller="MyController">
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
<p>姓名1{{firstName+"-"+lastName}}</p>
<p>姓名2{{getName()}}</p>
</div>
<script type="text/javascript">
function MyController($scope) {//形参必须是$scope
console.log($scope);
$scope.firstName='xuefeng';
$scope.lastName='tianjinfeng';
$scope.getName=function () {
return $scope.firstName+" "+$scope.lastName;
}
}
</script>
声明式和命令式的区别，依赖注入
依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
！！！形参必须是特定的名称, 否则Angular无法注入抛异常
回调函数的event的就是依赖对象
回调函数有形参就是依赖注入
<script type="text/javascript">
var arr=[1,2,3,4,5];
var newArr1=[];
//声明式和命令式的区别
//1.命令式：命令程序执行的时候每一步都是按照自己的指令，更注重执行的过程
//命令式更注重的执行的过程
//2.声明式：更注重执行的结果。
//声明式更注重的执行的结果
//声明式是对命令式的局部包装
//解答题与填空题的区别
//命令式
for (var i = 0; i < arr.length; i++) {
var value = arr[i]+10;
newArr1.push(value);
}
console.log(newArr1);
//声明式
var newArr2=arr.map(function (item,index) {
return item+10;
});
console.log(newArr2);
</script>
模块对象
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="empName">
<p>员工名:{{empName}}</p>
</div>
<div ng-controller="MyCtrl1">
<input type="text" ng-model="empName">
<p>员工:{{empName}}</p>
</div>
</body>
<script type="text/javascript">
// console.log(angular,typeof angular);
// //创建当前应用的模块对象
// var module = angular.module('MyApp',[]);
// module.controller('MyCtrl',function ($scope) {
// $scope.empName = 'Tom';
// });
// module.controller('MyCtrl1',function ($scope) {
// $scope.empName = 'Jack';
// })
//方法链调用
// angular.module('MyApp',[])//模块对象的方法执行完返回的就是模块对象本身
// .controller('MyCtrl',function ($scope) {//$scope写法问题（js代码压缩时会把所有的局部变量压缩成 abcd等）
// $scope.empName = 'Tom';
// })
// .controller('MyCtrl1',function ($scope) {
// $scope.empName = 'Jack';
// })
/*
上面写法的问题：
1、形参只能写固定的变量名$scope;
2、一旦文件压缩，将不能使用，会报错。
*/
//改进
angular.module('MyApp',[])
.controller('MyCtrl',['$scope',function (a) {
a.empName = 'tom'
}])
.controller('MyCtrl1',['$scope',function (b) {
b.empName = 'Jack';
}])
</script>
表达式
-
使用Angular表达式:
语法: {{expression}}
作用: 显示表达式的结果数据
注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
-
操作的数据
基本类型数据: number/string/boolean
undefined, Infinity, NaN, null解析为空串: “”, 不显示任何效果
对象的属性或方法
数组
<body ng-app="myApp"> <div ng-controller="MyCtrl"> <p>{{1223}}</p> <p>{{'abc'}}</p> <p>{{abc}}</p> <p>{{abc.split('')}}</p> <!--拆分数组--> <p>{{abc.split('').reverse()}}</p> <!--数组反转 --> <p>{{abc.split('').reverse().join('')}}</p><!-- 然后拼串--> <p>{{true}}</p> </div> </body><script type="text/javascript"> angular.module('myApp',[]) .controller('MyCtrl',['$scope',function (a) { a.abc='GDF'; }]) </script>
常用指令
- Angular指令
- Angular为HTML页面扩展的: 自定义标签属性或标签
- 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
-
常用指令(一)
ng-app: 指定模块名，angular管理的区域
ng-model： 双向绑定，输入相关标签
ng-init： 初始化数据
ng-click： 调用作用域对象的方法（点击时）
ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
$index, $first, $last, $middle, $odd, $even
ng-show: 布尔类型， 如果为true才显示
ng-hide: 布尔类型， 如果为true就隐藏
<body ng-app="myApp" > <div ng-controller="MyCtrl"> <div> <h2>价格计算器(自动)</h2> 数量：<input type="number" ng-model="count1"> 价格: <input type="number" ng-model="price1"> <p>总计:{{count1*price1}}</p> </div> <div> <h2>价格计算器(手动)</h2> 数量：<input type="number" ng-model="count2"> 价格: <input type="number" ng-model="price2"> <button ng-click="getTotalPrice()">计算</button> <p>总计:{{totalPrice}}</p> </div> <!-- * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域 * $index(下标), 【$first, $last, $middle】判断是否在该位置，是则返回true, 【$odd, $even】判断是奇数还是偶数 --> <div> <h2>人员信息列表</h2> <ul> <li ng-repeat="person in persons"> 奇数？{{$odd}}---中间？{{$middle}}---下标{{$index}}---{{person.username}}---{{person.age}} </li> </ul> </div> <!-- * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}） --> <div> <p>{{123}}</p> <p ng-bind="123"></p> </div> <!-- * ng-show: 布尔类型， 如果为true才显示 * ng-hide: 布尔类型， 如果为true就隐藏 --> <div> <button ng-click="switchLike()">切换喜欢</button> <p ng-show="isLike">我喜欢莲</p> <p ng-hide="isLike">莲喜欢我</p> </div> </div> <script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script> <script type='text/javascript'> angular.module('myApp',[]) .controller('MyCtrl',function ($scope) { $scope.price1=20; $scope.count1=1; $scope.price2=30; $scope.count2=2; $scope.totalPrice=60; $scope.getTotalPrice=function () { $scope.totalPrice=$scope.price2* $scope.count2; }; //初始化人员数据 $scope.persons=[ {username:'xuefeng',age:12}, {username:'tianjinfeng',age:12}, {username:'daofeng',age:12}, {username:'gufeng',age:12}, {username:'jifeng',age:12} ]; $scope.isLike=true; $scope.switchLike=function () { $scope.isLike=!$scope.isLike; } }) </script> -
常用指令(二)
- ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
- ng-style: 动态引用通过js指定的样式对象 {color:‘red’, background:‘blue’}
- ng-click: 点击监听, 值为函数调用, 可以传$event
- ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
- ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
<div ng-controller="MyCtrl"> <div style="width: 200px;height: 200px;" ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="leave()"></div> <ul> <li ng-class="{oddB:$odd,evenB:$even}" ng-repeat="xxx in persons">{{xxx.username}}---{{xxx.age}}</li> </ul> </div> <script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('MyCtrl',function ($scope) { $scope.myStyle={ background:'red' }; //鼠标移入的方法 $scope.enter=function () { this.myStyle.background='deepPink'; }; //鼠标移出 $scope.leave=function () { this.myStyle.background='red'; }; $scope.persons=[ {username:'xuefeng',age:12}, {username:'tianjinfeng',age:12}, {username:'daofeng',age:12}, {username:'gufeng',age:12}, {username:'jifeng',age:12} ]; }) </script>
练习1 我的笔记
<body ng-app="MyApp" >
<div ng-controller="MyCtrl">
<h2>我的笔记</h2>
<textarea cols="30" rows="30" ng-model="message"></textarea>
<div>
<button ng-click="save()">保存</button>
<button ng-click="read()">读取</button>
<button ng-click="remove()">删除</button>
</div>
<p>剩余的字数:{{getCount()}}</p>
</div>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
angular.module('MyApp',[])
.controller('MyCtrl',['$scope',function ($scope) {
//初始化message数据
$scope.message='';
//计算剩余字数的方法
$scope.getCount=function () {
//判断用户输入的内容长度
if($scope.message.length>100){
$scope.message=$scope.message.slice(0,100);
}
return 100- $scope.message.length;
};
//定义保存数据的方法
$scope.save=function () {
alert('note is saved');
localStorage.setItem('note_key',JSON.stringify($scope.message));
$scope.message='';//等于空串就清除了页面上的数据
};
//定义读取数据的方法
$scope.read=function () {
//localStorage.getItem('note_key');//这是一个JSON的格式
$scope.message=JSON.parse(localStorage.getItem('note_key')||'[]');
//处理null的情况 当localStorage.getItem('note_key')为null时，
// 我们传入一个'[]'空数组(因为JSON就是数组)来让parse转换为空字符串
};
$scope.remove=function () {
localStorage.removeItem('note_key');
$scope.message='';
}
}]);
练习2 我的备忘录
<body ng-app="todoApp" >
<div ng-controller="TodoControl">
<h2>我的备忘录</h2>
<div>
<input type="text" ng-model="newTodo">
<button ng-click="add()">新增</button>
</div>
<div ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.isChecked">
<span>{{todo.todo}}</span>
</div>
<button ng-click="delete()">删除选中的记录</button>
</div>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
angular.module('todoApp', [])
.controller('TodoControl', function ($scope) {
//初始化数据
$scope.todos = [
{todo : '吃饭', isChecked : false},
{todo : '睡觉', isChecked : false},
{todo : '打豆豆', isChecked : false}
];
//定义添加todo的方法
$scope.add = function () {
//判断添加的内容是否为空
if(!$scope.newTodo){
alert('输入的内容不能空');
return
}
// 组合新的todo对象
var todo = {
todo : $scope.newTodo,
isChecked : false
};
// 将新的对象添加到todos中
$scope.todos.unshift(todo);
//添加完将输入的内容清空
$scope.newTodo = '';
};
//定义删除 todo 的方法
$scope.delete = function () {
//将$scope.todo的数据暂时保存
var oldTodo = $scope.todos;
//将$scope.todos的数据清空
$scope.todos = [];
//进行遍历
oldTodo.forEach(function (item, index) {
//将没被选中的todo添加到 $scope.todos 数组中
if(!item.isChecked){
$scope.todos.push(item);
}
});
}
});
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
