AngularJS学习（三）——Module和Scope

骑猪看日落 2022-08-08 06:23 168阅读 0赞

### 为什么使用Module? ###

使用Module的原因是，把AngularJS的JS代码写到HTML文件内不好，要抽取出来成为独立的app.js文件。app里面可以定义一个或多个modules。

**Module的写法**

angular.module('myApp' , \[\]);

其中‘myApp’是module的名称, \[  \]里面是module需要依赖的东西，在模块加载前自动加载。

比如：

var myApp = angular.module('myApp', [
        'HelloControllers'
    ]);

上例中，myApp依赖HelloControllers

### Scope是什么? ###

Scope就是AngularJS中的Model，它会自动刷新View

示例如下：

HTML文件：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Angular scope和module</title>
        <script src="bower_components/angular/angular.js"></script>
        <script src="js/app3.js"></script>
        <script src="js/controller3.js"></script>
    </head>
    <body ng-app="myApp">
    <h1>样例</h1>
    <div ng-controller="fruitController" >
    
        <p>水果产地列表:</p>
        <ol>
            <li ng-repeat="fruit in fruits">
                {
       { '水果: ' + fruit.name + ', 产地: ' + fruit.location }}
            </li>
        </ol>
    </div>
    
    </body>
    </html>

注意,div上面定义了**ng-controller，说明了该div的view受哪个controller控制。**

app.js

var myApp=angular.module('myApp', [
        'HelloControllers'
    ] )

controller3.js