• 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(常量)用来在配置阶段传递数值
  • 相关阅读:
    Note:《Microsoft Windows Workflow Foundation 入门:开发人员演练》
    泛型集合类型,赋予集合业务意义,增强集合的抽象使用
    IIS7.0 for developer
    【代码保留】成对值类(PairCollection和Pair
    《SOA中国路线图》下载
    【代码保留】Quarter类
    复合控件和事件(6)——一点优化
    全方位掌握 NSIS 的使用[转]
    HTML Entities Examples
    如何对Outlook添加右键菜单
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305965.html
Copyright © 2020-2023  润新知