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参考手册