开发者社区> 浣熊干面包> 正文

AngularJS快速入门指南12:模块

简介:
+关注继续查看

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", []);
Note 这里的参数[]可以被用来指定模块的依赖项(即需要加载的其它模块)

myCtrl.js代码:

app.controller("myCtrl", function($scope) {
    $scope.firstName    = "John";
    $scope.lastName= "Doe";
});

Global Namespace中的函数污染

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

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


何时加载Library?

Note 在我们所有的示例代码中,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>
复制代码


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19112 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23951 0
Java JPA快速入门介绍
JPA快速入门介绍 一:什么是JPA JPA的英文全称是Java PersistenceAPI, 目的是给Java开发者提供对象关系映射工具用于在 Java应用程序开发中来管理关系数据(RDBMS)。
1018 0
入门篇:卷积神经网络指南(一)
何为卷积神经网络,它来自何方?又要走向何处?跟着作者的节奏,一起来开始探索CNN吧。
5434 0
一起谈.NET技术,Expression Blend实例中文教程(2) - 界面快速入门
上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习。 在开始使用Blend前,首先需要进行Silverlight的开发环境搭建,在银光中国网(SilverlightChina.Net)有篇“轻松建立Silverlight开发环境”,其中列出了建立Silverlight开发环境的几个步骤,另外,我在过去发布过一篇“Silverlight开发工具集合”文章,也列出了Silverlight项目开发必装工具软件,这里对于开发环境的搭建,我就不再赘述。
989 0
无线动态化技术方案 Weex 快速入门
这里会介绍一下 Weex 的简单入门开发方式 ## 先睹为快 有了正文介绍的背景情况,接下来我们分享一下 Weex 的方案设计和开发方式,当然在此之前,Weex 能够做出什么样效果的界面,可以让大家先睹为快。 ![](http://img1.tbcdn.cn/L1/461/1/f3
1946 0
941
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载