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>

转载于:https://www.cnblogs.com/JamelAr/p/10362311.html

AngularJS学习之旅—AngularJS 模块(十五)相关推荐

AngularJS学习之旅—AngularJS Http(九)
1.AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. eg: // 简单的 GET 请求,可以改为 POST $htt ...
零基础带你学习MySQL—日期函数（十五）
零基础带你学习MySQL-日期函数(十五) 一.CURRENT_DATE ( ) 当前日期二.CURRENT_TIME() 当前时间三.CURRENT_TIMESTAMP()当前时间戳四.练习
JAVASE基础模块十五（StringBuffer类）
JAVASE基础模块十五(StringBuffer类) public class Stbuffer { public static void main(String[] args) { //总共创建五 ...
JAVA之旅（三十五）——完结篇，终于把JAVA写完了，真感概呐！
JAVA之旅(三十五)--完结篇,终于把JAVA写完了,真感概呐! 这篇博文只是用来水经验的,写这个系列是因为我自己的java本身也不是特别好,所以重温了一下,但是手比较痒于是就写出了这三十多篇博客了 ...
深度学习之图像分类（二十五）-- S2MLPv2 网络详解
深度学习之图像分类(二十五)S2MLPv2 网络详解目录深度学习之图像分类(二十五)S2MLPv2 网络详解 1. 前言 2. S2MLPv2 2.1 S2MLPv2 Block 2.2 Spat ...
LINUX学习基础篇（三十五）日志管理
LINUX学习基础篇(三十五)日志管理日志管理系统中常见的日志文件日志文件格式 rsyslogd服务的配置文件日志轮替 logrotate配置文件配置文件夹 /etc/logrotate.d ...
开启AngularJS学习之旅
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起 ...
AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令 ...
AngularJS学习笔记(1) - AngularJS入门
什么是AngularJS? AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架.MVC将业务逻辑代码和视图.模型相分离.AngularJS提供的所有功能都可以通过使用JavaScr ...

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

AngularJS学习之旅—AngularJS 模块(十五)相关推荐

最新文章

热门文章