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>
angularjs基础知识
原文地址:https://www.cnblogs.com/zhumeiming/p/9785631.html