AngularJS学习之旅—AngularJS 模块(十五)

一、AngularJS 模块
　　模块定义了一个应用程序。
　　模块是应用程序中不同部分的容器。
　　模块是应用控制器的容器。
　　控制器通常属于一个模块。

　　1、创建模块

　　　　通过 AngularJS 的 angular.module 函数来创建模块

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []); 

</script>

　　2、添加控制器

　　　　使用 ng-controller 指令来添加应用的控制器:

<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>

　　3、添加指令

　　　　AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能

　　　　完整的指令内容可以参阅 AngularJS学习之旅—AngularJS 事件(十四)

<div ng-app="myApp" runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

　　4、函数会影响到全局命名空间　　

　　　　JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

　　　　AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

　　5、什么时候载入库？　　　

　　　　对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。

　　　　这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

　　　　在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。

　　　　在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

　　　　另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
            {{ firstName + " " + lastName }}
    </div>
</body>

</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

posted on 2019-02-11 16:48 JamelAr 阅读(124) 评论(0) 编辑收藏举报