AngularJS学习（三）——Module和Scope

最新推荐文章于 2022-04-27 22:39:03 发布

Paul_Huang_2011

最新推荐文章于 2022-04-27 22:39:03 发布

阅读量717

点赞数

分类专栏： Web前端文章标签： AngularJS

本文链接：https://blog.csdn.net/hbr2014/article/details/45583289

版权

Web前端专栏收录该内容

20 篇文章 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

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

HelloControllers.controller('fruitController', ['$scope',
    function ($scope) {
        $scope.fruits  =[{name:'苹果', location:'北方'},
            {name:'橘子',location:'南方'},
            {name:'桃子', location:'全国'}];
    }]);

Paul_Huang_2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习（三）——Module和Scope

为什么使用Module?使用Module的原因是，把AngularJS的JS代码写到HTML文件内不好，要抽取出来成为独立的app.js文件。app里面可以定义一个或多个modules。 Module的写法 angular.module('myApp' , []);其中‘myApp’是module的名称, [ ]里面是module需要依赖的东西，在模块加载前自动加载。
复制链接

扫一扫