AngularJS快速入门指南12：模块

时间：2023-01-06 00:23:04

　　AngularJS模块定义了一个application。

　　模块是一个application中不同部分的容器。

　　application中的所有控制器都应该属于一个模块。

带有一个控制器的模块

　　下面这个application（"myApp"）包含一个控制器（"myCtrl"）：

<!DOCTYPE html>

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

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

运行

在JS文件中定义模块和控制器

　　在AngularJS applications中，我们通常会将模块和控制器定义到不同的JavaScript文件中。

　　在下面这个例子中，"myApp.js"包含了一个application的模块定义，"myCtrl.js"包含了控制器的定义：

<!DOCTYPE html>

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<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", []);
AngularJS快速入门指南12：模块 这里的参数[]可以被用来指定模块的依赖项（即需要加载的其它模块）

myCtrl.js代码：

app.controller("myCtrl", function($scope) {

    $scope.firstName    = "John";

    $scope.lastName= "Doe";

});

Global Namespace中的函数污染

　　在JavaScript中要尽量避免使用全局函数。因为全局函数容易被其它的JavaScript代码改写或销毁。

　　AngularJS模块的定义减少了出现这种问题的风险，尽量将函数定义到AngularJS模块中。

何时加载Library？

AngularJS快速入门指南12：模块 在我们所有的示例代码中，AngularJS library都是在HTML文档的head部分被加载的。

　　建议将脚本的引用放到<body>元素的最后。但你还是会看到许多的AngularJS示例代码将library的引用放在文档的head部分，这仅仅只是为了在library被加载后对angular.module的访问进行编译。

　　另一个解决方法是将AngularJS library的引用放到<body>元素的最后，你自己的AngularJS脚本代码之前：

<!DOCTYPE html>

<html>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}

</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script>

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

app.controller("myCtrl", function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script>

</body>

</html>

AngularJS快速入门指南12：模块的更多相关文章

  1. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  2. AngularJS快速入门指南11：事件

    AngularJS拥有自己的HTML事件指令. ng-click指令 ng-click指令定义了AngularJS的click事件. <div ng-app="" ng-co ...

  3. AngularJS快速入门指南01：导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  5. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  6. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  7. AngularJS快速入门指南10：DOM节点

    AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...

  8. AngularJS快速入门指南04：指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

  9. AngularJS快速入门指南02：介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...

随机推荐

  1. 转&colon;Oracle EBS FND User Info API

    转自:http://www.cnblogs.com/quanweiru/p/3775635.html 1. 与用户信息相关API PKG. --和用户处理有关的API FND_USER_PKG; -- ...

  2. WinSock 异步I&sol;O模型-3

    重叠I/O(Overlapped I/O) 在 Winsock 中,重叠 I/O(Overlapped I/O)模型能达到更佳的系统性能,高于之前讲过的三种.重叠模型的基本设计原理便是让应用程序使用一 ...

  3. 一种WPF在后台线程更新UI界面的简便方法

    WPF框架规定只有UI线程(主线程)可以更新界面,所有其他后台线程无法直接更新界面.幸好,WPF提供的SynchronizationContext类以及C#的Lambda表达式提供了一种方便的解决方法 ...

  4. Java Web之HTML5

    终于学到Java Web这一章节了,首先来了解一下HTML5的一些新知识点吧,我直接贴出HTML5代码看一下: <!DOCTYPE html> <html lang="en ...

  5. 修改任务显示WrkTaskIp&period;aspx页面

    环境:Sharepoint2010 需求:在审批任务页面中插入或显示表单或列表内容,让内容与审核在同一页面上. 修改文件:WrkTaskIp.aspx(改前记得备份) 文件所在的路径:C:\Progr ...

  6. BootStrap学习&lpar;6&rpar;&lowbar;模态框

    一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...

  7. 记无法用被动方式登录远程linux主机的原因

    [环境]: linux主机:华为企业云 ftp服务端:vsftpd 客户端:ftp命令行工具,安卓端ES文件浏览器 [现象]: 在ES文件浏览器中,使用被动方式没法连接,使用主动方式可以连接,但是没法 ...

  8. SQL Server 数据库的鼠标操作

    在数据库中一些操作用鼠标进行可视化操作更方便快捷 一 SQL Server 开启 任务栏——任务管理器——服务——MSSQLSERVER 开启 我的电脑——控制面板——管理工具——服务——MSSQLS ...

  9. vim 创建文件自动生成头部注释

    知识点: 1. autocmd命令: 当读写一个文件时,自动执行指定的命令; 2. autocmd event: BufNewFile 当文件不存在时开始写文件; 3. exec命令 execute命 ...

  10. ArcGIS中地图导出格式比较（转）

    转自:http://blog.sina.com.cn/s/blog_6438c8360101eqfx.html   有人问过这样的问题,用于出挂图的地图格式应该怎么选择?熟悉ArcGIS的用户都知道, ...

相关文章