Angular入门02- Module模块、Controller控制器

最新推荐文章于 2023-11-14 08:59:54 发布

Sophie_U

最新推荐文章于 2023-11-14 08:59:54 发布

阅读量2.5k

点赞数

分类专栏：初级前端知识文章标签： angular angularjs

本文链接：https://blog.csdn.net/Sophie_U/article/details/54694700

版权

初级前端知识专栏收录该内容

36 篇文章 4 订阅

订阅专栏

AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。

即：angular.module() 用来注册一个应用模块

一、模块定义

AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

angular.module(‘myApp’, [注入的对象列表]); ——参数必须是两个！！！

 var app=angular.module('app',[]);
 //注意：注册应用必须写两个参数，即使没有依赖
 var app2=angular.module("app");
 console.log(app===app2); //true
 //只写一个参数代表引用模块

run方法

run：初始化模块，运行一个模块
作用：在其回调里，通过$rootScope这个对象上挂属性
“$rootScope”是angular的顶级作用域（angular中作用域即$scope对象或“\$rootScope”对象，在它们内用于挂载页面数据属性或方法）

 var app=angular.module('app',[]);
     app.run(function($rootScope){
         $rootScope.user={
             name:'sophie',
             age:24
         }
     })

  //html中
  <div >
     {{user.name}}--{{user.age}}
  </div>

实例：使用angular写一个时间实时刷新

    //注册应用
    var app=angular.module('app',[]);
   //初始应用
     app.run(function($rootScope,$interval){
   //使用定时器每秒
    $interval(function(){
       $rootScope.time=new Date().toLocaleString();
            },1000)
        })

二、Controller控制器

语法：

1）、定义： app.controller(“参数一”，“参数二”)
参数一：控制器名称，用于和视图绑定
参数二：控制器初始化的回调函数，可以传入$scope参数来获取当前“控制器”的作用域（局部作用域）；
2）、关联控制器，与视图建立联系：
ng-controller指令

2.1 什么是控制器

AngularJS中的控制器就是一个函数，用来向视图的作用域中添加额外的功能。

页面上创建一个新的控制器时，AngularJS会创建一个新的$scope给这个控制器。可以在这个控制器里初始化$scope。由于AngularJS会负责处理控制器的实例化过程，我们只需编写构造函数即可。

2.2 控制器的作用

为应用程序创建一个作用域，具体在于$scope对象从VM端向View传递信息；增强视图。

控制器在AngularJS中的作用是增强视图。具体的体现在于$scope对象上面，$scope对象用来从数据模型向视图传递信息。同时，它也可以用来设置事件监听器，同应用的其他部分进行交互，以及创建与应用相关的特定业务逻辑。

补充：

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

2.3 简单使用

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--引入Angular框架 -->
    <script src="../vendor/angular.min.js"></script>
</head>
<body >
<!--关联controller： ng-controller指令 -->
    <div ng-controller="myCtrl">
        {{msg}}
    </div>    
    <script>
        //注册应用
        var app=angular.module('app',[]);
        //定义controller         app.controller("myCtrl",function($scope){
            $scope.msg="hello world"
        })
    </script>
</body>
</html>

多个controller

<script>
        //注册应用
        var app=angular.module('app',[]);
        //初始应用        app.controller("myCtrl",function($scope){
            $scope.msg="hello world"
            $scope.handleClick=function(){
                console.log("1被点击")
            }
        })        app.controller("myCtrl2",function($scope){
            $scope.msg="hello u"
            $scope.handleClick=function(){
                console.log("2被点击")
            }

        })
    </script>

html中绑定事件

<div ng-controller="myCtrl" ng-click="handleClick()">
        {{msg}}
 </div>
    <div ng-controller="myCtrl2" ng-click="handleClick()">
        {{msg}}
    </div>

2.4 多个控制器

在angular中每定义一个controller就会创建一个scope作用域，在angular中的作用域其实和JS中的作用域是类似的，可以把$rootScope看成是全局的作用域，而$scope作为局部作用域是可以嵌套的，也有作用域链的存在
例：

/* controller.js */
//注册应用 
var app=angular.module("app",[]);
//定义controller
app.controller('myCtrl1',function($scope){
    $scope.name="张三";
})
app.controller('myCtrl2',function($scope){
    $scope.name="李四";
})

    <!--视图部分-->
    <div ng-controller="myCtrl1">
        {{name}}   
     <!--张三-->   
    </div>
    <div ng-controller="myCtrl2">
        {{name}}
     <!--李四--> 
    </div>

Sophie_U

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Angular入门02- Module模块、Controller控制器

AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。即：angular.module() 用来注册一个应用模块一、模块定义 AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。an
复制链接

扫一扫