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

来源：互联网发布：淘宝一件代发如何发货编辑：程序博客网时间：2024/06/05 02:10

定义

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

语法

创建控制器

<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(常量)用来在配置阶段传递数值

阅读全文

0 0