AngularJS权威教程 第3章 模块Module

最新推荐文章于 2020-07-07 22:21:05 发布
最新推荐文章于 2020-07-07 22:21:05 发布
阅读量951 收藏
点赞数
分类专栏： AngularJS 文章标签： AngularJS权威教程 模块 module
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufei512/article/details/50351260
版权

AngularJS权威教程 第3章 模块Module

3.1.模块

    在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。

    使用模块能给我们带来许多好处，比如：

  • 保持全局命名空间的清洁；
  • 编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；
  • 易于在不同应用间复用代码；
  • 使应用能够以任意顺序加载代码的各个部分。

    AngularJS允许我们使用angular.module()方法来声明模块。

   这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

//这个方法相当于AngularJS模块的setter方法，是用来定义模块的.
angular.module('myApp', []);

调用这个方法时如果只传递一个参数，就可以用它来引用模块。例如，可以通过以下代码来引用myApp模块：

// 这个方法用于获取应用，这个方法相当于AngularJS模块的getter方法，用来获取对模块的引用。
angular.module('myApp')

2.参数

angular.module()参数如下。

  • name（字符串）  name是模块的名称，字符串变量。
  • requires（字符串数组）

            requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载。


3.示例代码如下

index,

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Sample app</title>
  <link rel="stylesheet" href="css/app.css"/>
  <meta name="viewport" content="width=device-width">
</head>
<body>

{{ clock }}
  <div ng-controller="MyController">
    <h5>Hello {{ clock.now }}</h5>
  </div>

  <!-- Library files -->
  <script src="lib/angular.js"></script>
  <script src="lib/angular-route.js"></script>
  <!-- App files -->
  <script src="js/filters.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/services.js"></script>
  <script src="js/app.js"></script>
</body>
</html>
app.js 

var app = angular.module('myApp', [
  'myApp.services',
  'myApp.directives',
  'myApp.filters',
  'myApp.controllers'
  ]);

controllers.js

angular.module('myApp.controllers', [])
.controller('MyController', function($scope) {
  $scope.clock = {
    now: new Date()
  };
  var updateClock = function() {
    $scope.clock.now = new Date();
  };
  setInterval(function() {
    $scope.$apply(updateClock);
  }, 1000);
  updateClock();
});
directives.js 

angular.module('myApp.directives', []);
filters.js 

angular.module('myApp.filters', []);
services.js 

angular.module('myApp.services', [])
  .value('version', '0.0.1');

效果如图：





奋斗码农
关注
专栏目录
如何在AngularJs中调用第三方插件库
10-19
在AngularJS开发中，我们经常需要集成和利用各种第三方插件库来增强应用的功能。这些库可能包括jQuery插件、图表库、日期选择器等。本篇文章将详细介绍如何在AngularJS中正确地调用和使用第三方插件库。 首先，理解...
AngularJs权威指南（高清版）
07-18
6. **模块**：AngularJS应用由模块构成，通过`angular.module()`创建和注册，模块可以包含控制器、服务、指令等组件。 7. **路由**：AngularJS的`ngRoute`模块实现页面路由，处理URL与视图的对应关系，实现SPA的...
js模块封装示例_AngularJS模块教程示例
从零开始的教程世界
07-07 156
js模块封装示例In this post, we are going to cover one of the most important feature in AngularJS called Modules. We looked at features like controllers, filters and directives in the previous posts. We have...
Angularjs之模块（angular.module('myApp', [])参数说明）
热门推荐
I_LV_XJ的博客
02-23 2万+
在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。 使用模块能给我们带来许多好处，比如： 保持全局命名空间的清洁；编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；易于在不同应用间复用代码；使应用能够以任意顺序加载代码的各个部分。 AngularJS允许我们使用angula
AngularJS权威教程 第7章 过滤器filters
奋斗码农的博客
12-23 1868
AngularJS权威教程 第7章 过滤器filters     过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器     在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串转换成大写，可以对字符串中的每个字 符都单独进行转换操作，也可以使用过滤器：{{ name | upper
AngularJS权威教程 第6章 表达式expression
奋斗码农的博客
12-23 1115
AngularJS权威教程 第6章 表达式expression     表达式在AngularJS应用中被广泛使用，因此深入理解AngularJS如何使用并运算表达式是非常重要的。     前面已经见过使用表达式的示例。用{{ }}符号将一个变量绑定到$scope上的写法本质上就是一个表达式：{{ expression }}。当用$w atch进行监听时，AngularJS会对表达式或函数进
angularjs(模块)
王冉的博客
03-15 269
一、模块 1、概念 模块是一些提供独立功能或服务的功能块 大部分的程序都有一个主方法用来实例化、阻止、启动医用；而AngularJS没有主方法，而是使用模块来声明应用该如何启动 优点： -启动过程是声明式的，更容易懂 -可以在单元测试中只测试指定模块 -第三方可以打包成可重用的模块 -模块可以以任何先后或者并行的顺序加载（因为模块的执行本身就是延迟的） 2、AngularJS中的模块 在Angul...
《angularjs权威教程》记录
strayyiyi的博客
10-18 812
说明：《angularjs权威教程》出版较早，于2014年出版，主要介绍angualrjs1的内容 优化启发：（1）尽可能的精简控制器，在控制器中进行DOM操作或者数据数据操作是不好的实践 《第2章》控制器： 由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。 如果
《AngularJS权威教程》
weixin_30847939的博客
06-26 191
第二章、数据绑定 2.2 简单的数据绑定 <!DOCTYPE html> <html ng-app> <head> <title>Simple app</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1....
AngularJs module模块简介
天马3798
06-09 1万+
在AngularJs中，模块是定义应用的最主要方式。模块包含了主要的应用代码。 一个应用可以包含多个模块，每个模块都包含了定义具体功能的代码。 使用模块能给我们带来许多好处，比如： 1.保持全局命名空间的清洁； 2.编写测试代码更容易，并能保持其清洁，以便更容易找到相互隔离的功能； 3.易于在不同应用间复用代码； 4.使应用能够以任意顺序加载代码的各个部分。 AngularJs允许我
《AngularJS 权威教程》 笔记
deny6250的博客
04-19 123
AngularJS 权威教程 别人的笔记:http://blog.51yip.com/jsjquery/1592.html 1. 初始AngularJS 2.数据绑定和第一个AngularJS Web应用 3. 模块 // 声明模块应用angular.module('myapp', [ ]);// 获取模块应用angular.module('myapp'); ...
AngularJS动态加载模块和依赖的方法分析
10-21
AngularJS实现动态加载模块和依赖的方法包括使用ocLazyLoad等第三方库。ocLazyLoad是一个专门用于AngularJS应用的动态加载器。通过ocLazyLoad，开发者能够实现模块、服务、指令以及静态文件的动态加载。使用...
AngularJS路由Ui-router模块用法示例
10-19
`UI-Router`是AngularJS的一个第三方扩展，它提供了更高级的路由功能，包括视图的嵌套、命名视图、抽象状态等。下面我们将深入探讨`UI-Router`的主要特性和用法。 1. **安装和引用** 使用`UI-Router`之前，需要在...
AngularJS权威教程 第2章 数据绑定和第一个 AngularJS Web应用
奋斗码农的博客
12-18 922
Hello World 学习任何一门开发语言，都是从Hello World开始的，这种无法言语的操蛋心情，大家都懂，但是一个简易的应用能够最直接的展现他的功能，这个无法否决。吐槽一下，代码如下。。。 Simple App Hello {{ name }} 教程中给出的引入js的链接https://ajax.googleapis.com/ajax/libs/a
AngularJS权威教程 第4章 作用域Scope
奋斗码农的博客
12-22 809
AngularJS权威教程 第4章 作用域Scope     作用域（scope）是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解它如何工作是非常重要的。     应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。     作用域是应用状态的基础。基于动态绑定，我们可
AngularJS权威教程 第5章 控制器controller
奋斗码农的博客
12-22 768
AngularJS权威教程 第5章 控制器controller     控制器在AngularJS中的作用是增强视图。在Hello World的例子中，我们并没有使用普通的控制器，而是使用了一个隐式控制器。     AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自 定义行为。     当我们在页面上创建一个新的
AngularJS权威教程 第1章 初始AngularJS
奋斗码农的博客
12-18 655
1.AngularJS 是什么     AngularJS的官方文档是这样介绍它的。         完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开      发比以往更简单、更快捷。     AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间
ASP.NET与AngularJS实战教程
"Hands-On With AngularJS Using ASP.NET"是一本由C#Corner和Mindcracker Network提供并授权的免费教程书籍，旨在帮助读者深入了解和实践如何在ASP.NET环境中集成和利用AngularJS。本书涵盖了AngularJS的核心概念和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值