Angular的3个对象：作用域、模块和控制器_html-js-css

文章目录作用域对象控制器对象应用实例依赖对象依赖对象依赖注入补充声明式和命令式 angular的`$scope`作用域对象模块对象模块的创建利用模块创建作用域一个例子说明AngularJS使用的大致流程

作用域对象

作用域对象是一个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>Documenttitle>
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>Documenttitle>
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>Documenttitle>
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>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/web/1296261.html

Angular的3个对象：作用域、模块和控制器

发表评论

评论列表（0条）