zoukankan      html  css  js  c++  java
  • 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的方式表现出来。

    依赖注入

    五个核心组件

    1. value:传递值
    2. factour:返回值
    3. provider:通过 provider 创建一个 service、factory等(配置阶段)。
    4. constant:constant(常量)用来在配置阶段传递数值
  • 相关阅读:
    IDEA忽略某些文件
    Mac操作:Mac系统移动鼠标显示桌面(移动鼠标到角落)
    Mac流程图的软件
    Mac 电脑无法登陆 账号了
    学习如何管理-录视频
    项目倒入maven 遇到的问题只有 main 了
    下载代码的时候 SSH与http的区别
    Mac修改hosts方法
    MAC版本的UltraEdit破解方法
    intelliJ 社区版-找不到 plugins选项
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305965.html
Copyright © 2011-2022 走看看