zoukankan      html  css  js  c++  java
  • angularJS依赖注入

    AngularJS的依赖注入有两种,一种是显式依赖注入,一种是隐式依赖注入,推荐用显式依赖注入,js压缩后不会因为参数问题而报错

    demo6.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div ng-app="myApp">
        <div ng-controller="myController">
            {{data}}
        </div>
        <div ng-controller="otherController">
            {{otherData}}
        </div>
    </div>
    <script type="text/javascript" src="../common/angular/angularjs.js"></script>
    <script type="text/javascript" src="demo6.js"></script>
    </body>
    </html>

    demo6.js

    /**
     * Created by Administrator on 2017/7/23.
     */
    var myApp = angular.module('myApp', [], function () {
    
        })
    
        //显式依赖注入 myFactory 工厂
        .factory('myFactory', ['$window', function (a) {
            console.log("window:" + a);
            return "myFactory";
        }])
    
        /**
         * 1.隐式依赖注入,直接写 function ($scope) 而且参数名称必须是$scope,$scope这个单词不能改
         */
        .controller('myController', function ($scope) {
            $scope.data = '张三';
        })
    
        /**
         * 2.显式依赖注入 第二个参数用数组 [] 的方式表示,$scope 就是后面functioin的参数a,$filter 就是参数b,多个参数以此类推
         * 推荐使用显示依赖注入,一般function(a,b,c)里面的参数名,最好与数组[]前面的变量名一致,方便阅读
         */
        .controller('myController', ['$scope', '$filter', 'myFactory', function (a, b, c) {
            a.data = '张三';
            console.log(a);
            console.log(b('json')([1, 2, 3]));
            console.log(c);
        }])
    
    
    /**
     * 定义了一个全局的函数 otherController ,可以通过otherController.$inject 的方式 显式依赖注入 $scope ,
     * 这里的 a 就是指 $scope
     * @param a
     */
    function otherController(a) {
        a.otherData = '李四';
    }
    otherController.$inject = ['$scope'];
  • 相关阅读:
    js语法中一些容易被忽略,但会造成严重后果的细节
    第三方技术方案大集合,收集一些好用、有意思的方法、网站
    jQuery的Promise 这里介绍的很详细
    获取当月|目标月最后一天
    bootstrap ui样例
    正则校验数字格式,并只能保留两个小数
    新建指定长度的数组,填入内容,内容都为固定值
    mobx 学习笔记
    (二)Android 基本控件
    (一)初识Android
  • 原文地址:https://www.cnblogs.com/skyessay/p/7223917.html
Copyright © 2011-2022 走看看