【angularjs】控制器

水深无声 2024-02-19 16:10 18阅读 0赞

> AngularJS中ng-app的赋值问题  
> [https://blog.csdn.net/devillittle/article/details/56840892][https_blog.csdn.net_devillittle_article_details_56840892]  
> controller 使用的时候，ng-app 必须有名字，空会报错。

## 简介： ##

AngularJS 控制器 控制 AngularJS 应用程序的数据。  
AngularJS 控制器是常规的 JavaScript 对象。  
AngularJS 应用程序被控制器控制。  
ng-controller 指令定义了应用程序控制器。  
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

## 实例 ##

我们建立一个控制器和页面分离的demo  
创建index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>控制器</title>
        
        <script src="../angularjs/js/angular.js"></script>
        <script src="index.js"></script>
    
    
    </head>
    <body  >
    
    <div ng-app="myapp">
        <div ng-controller="mycontroller">
            <input type="text" value="" ng-model="name">
            {
       {name}}
        </div>
    </div>
    
    
    controller 使用的时候，ng-app 必须有名字，空会报错。
    </body>
    </html>

创建index.js

var app = angular.module('myapp', []);
    app.controller('mycontroller', function($scope) {
        
        
        $scope.name="zhangsan";
    });

## 解析： ##

1)AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。  
2)ng-controller=“mycontroller” 属性是一个 AngularJS 指令。用于定义一个控制器。  
3)mycontroller函数是一个 JavaScript 函数。  
4)AngularJS 使用$scope 对象来调用控制器。  
5)在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。  
6)控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。  
7)控制器在作用域中创建了一个属性 name。  
8)ng-model 指令绑定输入域到控制器的属性name。

[https_blog.csdn.net_devillittle_article_details_56840892]: https://blog.csdn.net/devillittle/article/details/56840892