上一节:
下一节:

  AngularJS 模块

  • 定义和描述

    AngularJS 模块定义了一个应用程序。
    该模块是用于应用程序不同部分的容器。
    该模块是应用程序控制器的容器。
    控制器始终属于模块。

  • 函数可以污染全局命名空间

    JavaScript中应避免使用全局函数。 它们很容易被其他脚本覆盖或销毁。
    AngularJS 模块通过将所有函数都保留在模块本地来减少此问题。

  • 何时加载库

    虽然在HTML应用程序中通常将脚本放在 <body> 元素的末尾，但是建议您在 <head> 或 <body> 的开头加载AngularJS 库。
    这是因为只有在加载库之后才能编译对 angular.module 的调用。

  • 创建一个模块

    使用 AngularJS angular.module 创建一个模块。 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp"></div> 
    <script>
        var app = angular.module("myApp", []);
    </script>
</body>
</html>
    "myApp" 参数是指将在其中运行应用程序的HTML元素。
    现在您可以向AngularJS应用程序添加控制器，指令，过滤器等。

  • 添加控制器

    将一个控制器添加到您的应用程序，并使用 ng-controller 指令引用该控制器： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
         {{ firstName + " " + lastName }}
    </div> 
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        });
    </script>
</body>
</html>
    尝试一下
    您将在本教程的后面部分了解有关控制器的更多信息。

  • 添加指令

    AngularJS 具有一组内置指令，可用于向应用程序添加功能。
    另外，您可以使用该模块向您的应用程序添加自己的指令： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" jc2182-directive></div> 
    <script>
          var app = angular.module("myApp", []);
          app.directive("jc2182Directive", function() {
             return {
                template : "我是在指令构造函数中创建的！"
             };
          });
    </script>
</body>
</html>
    尝试一下
    您将在本教程的后面部分了解有关指令的更多信息。

  • 文件中的模块和控制器

    在 AngularJS 应用程序中，通常将模块和控制器放在JavaScript文件中。
    下面示例中，"myApp.js" 包含应用程序模块定义，而 "myCtrl.js" 包含控制器： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        {{ firstName + " " + lastName }}
    </div> 
    <script src="myApp.js"></script>
    <script src="myCtrl.js"></script>
</body>
</html>
    尝试一下
    myApp.js 
    var app = angular.module("myApp", []);
    模块定义中的 [ ] 参数可用于定义从属模块。
    没有 [ ] 参数，您不是在创建新模块，而是在检索现有模块。
    myCtrl.js 
    app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});
    有关完整的AngularJS 模块参考，请访问我们的AngularJS参考手册。
上一节:
下一节: