文章目录
作用域对象
作用域对象是一个js实例对象。
ng-app指令默认会创建一个根作用域对象($rootScope)，它的属性和方法与页面中的指令或表达式是关联的
控制器对象
控制器:
- 用来控制AngularJS应用数据的实例对象
ng-controller:指定控制器构造函数，Angular会自动new此函数创建控制器对象， 同时Angular还有创建一个新的域对象$scope（作用域对象），它是$rootscope（根作用域对象）的子对象- 在控制器函数中声明
$scope形参,Angular会自动将$scope传入
应用实例
控制器可以创造一个作用域对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app ng-init="firstName='yang'">
<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' src='./angular/angular-1.2.29/angular.js'></script>
<script type='text/javascript'>
function MyController ($scope){
//形参必须是$scope
console.log($scope)
// 给作用于添加属性和方法
$scope.firstName = 'cheng'
$scope.lastName = 'zhe'
$scope.getName = function (){
return $scope.firstName + ' '+ $scope.lastName
}
console.log(this instanceof MyController)
}
</script>
</body>
</html>
输出：
依赖对象
依赖对象
依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id = 'btn'>点我一下</button>
<script type='text/javascript' src='./angular/angular-1.2.29/angular.js'></script>
<script type='text/javascript'>
window.onload = function (){
document.getElementById('btn').onclick = function (event){
alert(event.clientX)
// event就是依赖对象
// 获取clientX必须依靠event对象实现
}
}
</script>
</body>
</html>
event就是依赖对象，获取clientX必须依靠event对象实现
依赖注入
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是声明式依赖注入。
上面的例子就是依赖注入：
回调函数的event的就是依赖对象，回调函数有形参就是依赖注入
补充 声明式和命令式
- 命令式： 更加注重的是执行的过程
- 声明式：更加注重的执行的结果，声明式是对命令的局部包装
eg：实现数组所有元素加10
var arr = [1,2,3,4,5]
var newArr1=[]
// 命令式
for(var i =0;i<arr.length;i++){
var value = arr[i]+10
newArr1.push(value)
}
console.log(newArr1)
// 声明式,map返回的是一个新的数组
var newArr2=arr.map(function (item,index){
return item+10
})
console.log(newArr2)
输出：
发现命令式更加注重的是执行的过程，而声明式更加注重的执行的结果。
angular的$scope作用域对象
angular的$scope对象就是依赖对象，并且是依赖注入的形式进行使用。
形参必须是特定的名称$scope，否则Angular无法注入，抛异常。
模块对象
angular.module可在全局位置创建、注册、获取Angular模块。所有模块（angular核心或第三方）都必须使用这个机制注册才能在应用中生效。
当传递两个或多个参数时，会创建一个新模块。如果只传递一个参数，则是获取一个存在的模块（第一个参数指向module）。
模块的创建
- 创建格式：
angular.module(‘模块名',[第三方依赖])
返回值就是一个模块对象
eg：
var myModule = angular.module('myApp',[])
- ng-app可以设置值，值一般是一个模块的名字。这样ng-app所接管的区域就会有一个名字。
eg：
<body ng-app="myApp">
<script type='text/javascript' src='./angular/angular-1.5.5/angular.js'></script>
scrip
<script type='text/javascript'>
// 创建模块对象
var myModule = angular.module('myApp',[])
</script>
</body>
设置之前是：
设置之后是：
利用模块创建作用域
之前直接写构造函数来创建作用域，但是我们一般不那样用，一般直接使用 模块.controller来生成作用域对象。
格式：模块.controller('构造函数名',构造函数)
eg：
myModule.controller('Mycontroller',function ($scope){
})
通过多个myModule.controller可以构造出不同的作用域对象，页面中不同的区域再调用不同的作用域对象。
不同的对象作用域之间互不影响，相互独立。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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' src='./angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
// 创建模块对象
var myModule = angular.module('myApp',[])
// 创建作用域对象 格式：模块.controller('构造函数名',构造函数)
// 之前直接写构造函数来创建作用域，但是我们一般不那样用，一般直接使用 模块.controller来生成作用域对象
myModule.controller('Mycontroller',function ($scope){
$scope.empName = 'yang'
})
myModule.controller('Mycontroller2',function ($scope){
$scope.empName = 'cheng'
})
</script>
</body>
</html>
可以优化
angular指出链式调用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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' src='./angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
// 创建模块对象
angular.module('myApp',[])
.controller('Mycontroller',function ($scope){
$scope.empName = 'yang'
})
.controller('Mycontroller2',function ($scope){
$scope.empName = 'cheng'
})
</script>
</body>
</html>
问题：
js代码压缩后形参会用abcd字母代替,即代码压缩的$scope会被abdc代替，angular解析不了。
解决方案：
['$scope',构造函数]:就是说在代码解析的时候就会使用$scope将构造函数中的参数代替，这样angular仍能正常解析。
——显示声明依赖注入（之前的写法是隐式声明依赖注入）
angular.module('myApp',[])
.controller('Mycontroller',['$scope',function ($scope){
$scope.empName = 'yang'
}])
.controller('Mycontroller2',['$scope',function ($scope){
$scope.empName = 'cheng'
}])
一个例子说明AngularJS使用的大致流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type="text" ng-model="empName">
<p>员工名字：{
{empName}}</p>
</div>
<script type='text/javascript' src='./angular/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
// 创建模块对象
angular.module('myApp',[])
.controller('MyCtrl',['$scope',function($scope){
$scope.empName = 'yang'
}])
</script>
</body>
</html>
