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="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>