AngularJS第五课（模块，动画，依赖注入）

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/comefuture/p/8305965.html

文章标签：

#javascript #ViewUI

本文介绍了AngularJS中如何使用模块来组织应用程序，并详细讲解了如何添加控制器及避免使用全局函数。此外，还提供了使用AngularJS动画库实现平滑过渡效果的具体实例。

定义

用模块来定义一个应用程序
模块是应用程序中不同部分的容器，比如是控制器的容器

语法

创建控制器

<script>
    var app=angular.module('appName',[]);
</script>

添加控制器

实例：

<script>
    var app=angular.module('appName',[]);
    app.controller('controllerName',function(){
        //函数部分
    });
</script>

其中【】表示依赖关系。

避免使用全局函数

载入库

在<head>部加载库，因为模块需要在库加载完成之后才会实现。

动画

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;

}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

首先需要引入angularJS的动画库：apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js

然后申明应用程序：ng-app=”ngAnimate”

如果设置了应用程序的名字，那么：

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

PS：ngAnumate并不是操纵了HTML元素，而是监听元素，在元素发生改变的时候，采用AngularJS的方式表现出来。

依赖注入

五个核心组件

value：传递值
factour：返回值
provider：通过 provider 创建一个 service、factory等(配置阶段)。
constant：constant(常量)用来在配置阶段传递数值

转载于:https://www.cnblogs.com/comefuture/p/8305965.html