angularjs基础知识
js中的函数，判断这个函数是构造函数还是自调用的函数，只需要看this指向。如果this指向的是window,那肯定是自调用，如果this的实例是这个函数，那就是构造函数。
比如angularjs中的MyController都是会自动new一个构造函数的。可以这样证明:
function MyController($scope){
console.log(this instanceof MyController); //返回true证明被new过。(构造函数)
}
依赖对象:完成某个特定的功能需要依赖某个对象才能实现，这个对象就是依赖对象。
依赖注入:依赖的对象以形参的方式被注入进来使用，这种方式就是声明式依赖注入。
angularjs中的“$scope”对象就是依赖对象，并且是依赖注入的形式进行使用。
angularjs中的$scope，形参必须是特定的名称，否则angularjs无法注入抛异常。
回调函数的event就是依赖对象，回调函数有形参，就是依赖注入。
function aa(event){
alert(event.clientX);
}
angularjs中的模块对象和表达式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjs测试</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<!--<body ng-app="" ng-init="age=12">
<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>
<p>年龄:{{age}}</p>
</div>
<script type="text/javascript">
function MyController($scope) {
console.log($scope);
$scope.firstName = "kobe";
$scope.lastName = "zain";
$scope.getName = function () {
return $scope.firstName +' '+ this.lastName;
}
}
</script>
//angularjs1.2.29的写法，现在不适用了。
</body>-->
<body ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="empName" />
<p>员工名字1：{{empName}}</p>
</div>
<div ng-controller="myController2">
<input type="text" ng-model="empName" />
<p>员工名字2:{{empName}}</p>
</div>
<script type="text/javascript">
console.log(angular);
//优化，链式调用
//angular.module("myApp", [])
// .controller("myController", function ($scope) { //隐式声明依赖注入
// $scope.empName = "zain";
// })
// .controller("myController2", function ($scope) {
// $scope.empName = "kobe";
// })
//以上的代码会有问题
//js代码压缩后形参会用abcd字母代替
//代码压缩的$scope会被abcd代替，angular解析不了。
//解决方案
angular.module("myApp", [])
.controller("myController", ["$scope", function ($scope) { //显示声明依赖注入
$scope.empName = "zain";
}])
.controller("myController2", ["$scope", function ($scope) {
$scope.empName = "kobe";
}])
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjstest2</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!--使用angularjs表达式:
*语法: {{expression}}
*作用:显示表达式的结果数据
*注意:表达式中引用的变量必须是当前域对象有的属性（包括其原型属性）
操作的数据:
*基本类型数据: number/string/boolean
*undefined,Infinity,NaN,null解析为空串:""，不显示任何效果
*对象的属性或方法
*数组-->
<div ng-controller="myCtrl">
<p>{{"aaa"}}</p>
<p>{{abc}}</p>
<!--对字符串进行反序输出-->
<p>{{abc.split('')}}</p>
<p>{{abc.split('').reverse()}}</p>
<p>{{abc.split('').reverse().join('')}}</p>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function (a) {
a.abc = "NBA";
}])
</script>
</body>
</html>
angularjs中的常用指令1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjstest3</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<p>价格计算器:(自动)</p>
数量: <input type="number" ng-model="count" />
价格: <input type="number" ng-model="price" />
<p>总计: {{count*price}}</p>
</div>
<div>
<p>价格计算器:(手动)</p>
数量: <input type="number" ng-model="count2" />
价格: <input type="number" ng-model="price2" />
<button ng-click="getTotalPrice()">计算</button>
<p>总计: {{totalPrice}}</p>
</div>
<div>
<h2>人员信息列表</h2>
<ul>
<li ng-repeat="person in persons">
{{$odd}}--{{$index}}---{{person.username}}
</li>
</ul>
</div>
<!--*ng-bind：解决使用{{}}显示数据闪屏(在很短时间内显示{{}})-->
<div>
<p>{{123}}</p>
<p ng-bind="123"></p>
</div>
<div>
<button ng-click="changeLike()">切换喜欢</button>
<p ng-show="islike">我喜欢贾静雯</p>
<p ng-hide="islike">贾静雯喜欢我</p>
</div>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function (a) {
a.count=20;
a.price = 1;
a.count2 = 10;
a.price2 = 2;
a.totalPrice=20;
a.getTotalPrice = function () {
a.totalPrice= a.count2 * a.price2;
}
//初始化人员数据
a.persons = [
{ username: 'zain', age: 27 },
{ username: 'kobe', age: 27 },
{ username: 'jack', age: 27 },
{ username: 'choke', age: 27 },
{ username: 'json', age: 27 }
];
a.islike = true;
a.changeLike = function () {
a.islike = !a.islike;
}
}])
</script>
</body>
</html>
angularjs中的常用指令2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjstest4</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
<style>
.oddB{
background:gray;
}
.evenB{
background:red;
}
</style>
</head>
<body ng-app="myApp">
<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="t in persons">
{{t.username}}--{{t.age}}
</li>
</ul>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function (a) {
a.mystyle = {
background:"green"
};
a.enter = function () {
a.mystyle.background = "deepPink";
};
a.leave = function () {
a.mystyle.background = "green";
};
a.persons = [
{ username: "zain", age: 27 },
{ username: "jack", age: 27 },
{ username: "solin", age: 27 },
{ username: "json", age: 27 },
{ username: "joke", age: 27 },
{ username: "zuak", age: 27 }
];
}])
</script>
</body>
</html>
angluarjs的ng-repeat指令:
<!DOCTYPE html> <html> <head> <title>angular的ng-repeat测试</title> <meta charset="utf-8" /> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <ul ng-init="arr=[1,2,3,41,2,1]"> <li ng-repeat="(k,v) in arr track by k">{{v}}</li> </ul> <ul ng-init="aroj=[{name:'zain',age:18},{name:'solid',age:19},{name:'jack',age:20},{name:'joke',age:21}]"> <li ng-repeat="(k,v) in aroj" >{{k}}--{{v.name}}--{{v.age}}</li> </ul> <ul ng-init="obj={name:'zain',age:20}"> <li ng-repeat="(k,v) in obj">{{k}}--{{v}}</li> </ul> </div> <script type="text/javascript"> angular.module("myApp", []) .controller("myCtrl", ["$scope", function ($scope) { }]) </script> </body> </html>
angularjs中的$watch方法，监听值的变化。angularjs是以数据为中心的，当数据变化的时候，$watch()里定义的函数就会执行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularjs中的watch</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <input type="text" ng-model="a" /> </div> <script type="text/javascript"> angular.module("myApp", []) .controller("myCtrl", ["$scope", function ($scope) { $scope.$watch('a', function () { alert("变了"); }); }]) </script> </body> </html>
angularjs系统过滤器
<!DOCTYPE html> <html ng-app=""> <head> <meta charset="utf-8" /> <title>filter-过滤器，转换然后输出</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> </head> <body ng-init="arr=[{title:'美特斯邦威',price:89,time:140052689525},{title:'森马',price:98,time:140052689589}]"> <ul> <li ng-repeat="item in arr"> <h4>{{item.title}}</h4> <span>{{item.price|currency:"￥"}}</span> <em>{{item.time|date:"y年MM月dd日 HH:mm:ss a"}}</em> </li> </ul> </body> </html>
angularjs自定义过滤器，多一层return function
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularjs自定义过滤器</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> </head> <body ng-app="test"> <div ng-init="arr=[{name:'张三',tel:'13548798564'},{name:'小明',tel:'13586547256'}]"> <ul> <li ng-repeat="item in arr"> <h4>{{item.name}}</h4> <span>{{item.tel|hidetel:8}}</span> </li> </ul> </div> <script type="text/javascript"> let mod = angular.module("test", []); //filter多一行return //138****8795 mod.filter("hidetel", function () { return function (input,len=4) { //代码 //input=>'13854788945' //return '138****8945' return input.substring(0, 3) + ''.padStart(len, '*') + input.substring(3 + len); } }) </script> </body> </html>
angularjs的系统指令:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>angularjs指令</title> <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script> <style> .box1{ color:red } </style> </head> <body ng-app="test"> <div> <input type="text" ng-disabled="true"/> <input type="checkbox" ng-checked="true"/> <input type="text" ng-readonly="true" /> </div> <div ng-init="a=2"> <div ng-switch="a"> <span ng-switch-when="1">男</span> <span ng-switch-when="2">女</span> <span ng-switch-when="3">没填</span> <!--ng-include包含某个文件--> </div> </div> <div ng-controller="main"> <!--<select> <option ng-repeat="json in arr" value="{{json.id}}">{{json.name}}</option> </select>--> <!--ng-options的用法: 值 as 字 group by 分类依据 for 名字 in 数组--> <select ng-model="city" ng-options="item.id as item.name group by item.type for item in arr"></select>{{city}} </div> <div> <ul ng-init="arr=[12,2,4,5,6,9]"> <li ng-repeat="a in arr" ng-class-odd="['box1']">{{a}}</li> </ul> </div> <div> <!--ng-list会把字符串按逗号分割为数组--> 爱好:<input type="text" ng-model="fav" ng-list="" /> {{fav}} <dl> <dt>你输入的是:</dt> <dd ng-repeat="a in fav">{{a}}</dd> </dl> </div> <script type="text/javascript"> let mod = angular.module("test", []); mod.controller("main", ["$scope", function ($scope) { $scope.city = 1; $scope.arr = [{ id: 1, name: '北京',type:'直辖市' },{ id: 2, name: '上海',type:'直辖市' },{ id: 3, name: '广州',type:'省会' },{ id: 4, name: '深圳',type:'经济特区' }]; }]) </script> </body> </html>
sometimes the hardest part isn't letting go,but rather start over
浙公网安备 33010602011771号