angularjs1-2,作用域、代码压缩

简介:
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              {{name}}
              {{age}}
              {{sex}}
              <div ng-controller="secondController">
                  {{name}}
                  {{age}}
                  {{sex}}   //secondController作用域先在自己作用域查找,然后再去firstController查找,firstController也没有就去rootScope查找。
              </div>
          </div>
          {{name}}
          {{age}}
          {{sex}}
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          //代码压缩不会把字符串压缩,只会把函数的形参压缩,因此前面写全,后面可以简写。
          app.controller('firstController',['$scope',function($s){
             $s.name='张三2';
          }]);
          app.controller('secondController',['$scope','$rootScope',function($s,$r){
              $s.name='李四';
              $r.age='30';
          }]);
          app.run(['$rootScope',function($r){
            $r.name='ggggg';
            $r.age='3333';
            $r.sex='';
          }]);
          console.log(app);
      </script>
    </body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              {{name}}
              {{age}}
          </div>
          <div ng-controller="secondController">
              {{name}}
              {{age}}
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller('firstController',function($scope){
              $scope.name='张三';
          });
          app.controller('secondController',function($scope,$rootScope){
             // $scope.name='李四';
              $rootScope.age='30';
          })
      </script>
    </body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="../../angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              {{name}}
          </div>
          <div ng-controller="secondController">
              {{name}}
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller('firstController',function($scope){//scope的作用域是controller作用域
              $scope.name='张三';
          });
          app.controller('secondController',function($scope){
              $scope.name='李四';
          })
      </script>
    </body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="../../angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
             姓名: {{name}} <br>
             年龄:{{age}}
          </div>
          <div ng-controller="secondController">
              姓名:{{name}}
              年龄:{{age}}
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller('firstController',function($scope,$rootScope){//rootScope作用域是ng-app作用域
              $scope.name='张三';
              $rootScope.age='30';
          });
          app.controller('secondController',function($scope){
              $scope.name='李四';
          })
      </script>
    </body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="../angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              {{name}}
              {{age}}
              {{sex}}
              <div ng-controller="secondController">
                  {{name}}
                  {{age}}
                  {{sex}}   //里层的作用域会去找外层的作用域
              </div>
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller('firstController',function($scope){
              $scope.name='张三1';
              $scope.age='40';
          });
          app.controller('secondController',function($scope){
              $scope.name='李四';
              $scope.sex='';
          })
      </script>
    </body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="../angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div>
              <p>{{name}}</p>
          </div>
      </div>
      <script type="text/javascript">
          var m1 = angular.module('myApp',[]);
          m1.controller('Aaa',['$scope',function($scope){
                $scope.name = 'hello111';
           }]);
           m1.controller('Bbb',['$scope',function($scope){
                $scope.name = 'hi';
           }]);
          m1.run(['$rootScope',function($rootScope){
          //run方法初始化全局数据,只对全局作用域起作用。
              $rootScope.name = 'hello';
          }]);
          console.log( m1 );
      </script>
    </body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7224762.html,如需转载请自行联系原作者

相关文章
|
网络协议 网络安全 开发工具
阿里云DNS常见问题之手机内网打不开如何解决
阿里云DNS(Domain Name System)服务是一个高可用和可扩展的云端DNS服务,用于将域名转换为IP地址,从而让用户能够通过域名访问云端资源。以下是一些关于阿里云DNS服务的常见问题合集:
|
机器学习/深度学习 算法 JavaScript
密码学系列之四:一文搞懂序列密码
密码学系列之四:一文搞懂序列密码
1250 0
|
canal 存储 数据可视化
一文详解 Canal Instance 设计理念与定制开发思路
一文详解 Canal Instance 设计理念与定制开发思路
一文详解 Canal Instance 设计理念与定制开发思路
|
监控 Python
手把手教你用 Python 制作一场炫酷烟花秀
本篇文章,带大家用 Python 制作一个炫酷烟花秀,来迎接即将到来的元旦佳节。开始之前先看一下最终效果
手把手教你用 Python 制作一场炫酷烟花秀
|
8月前
|
Ubuntu 计算机视觉 C++
Ubuntu系统下编译OpenCV4.8源码
通过上述步骤,你可以在Ubuntu系统上成功编译并安装OpenCV 4.8。这种方法不仅使你能够定制OpenCV的功能,还可以优化性能以满足特定需求。确保按照每一步进行操作,以避免常见的编译问题。
202 43
|
12月前
|
存储 监控 安全
Star Tower:区块链创新的关键拼图与卓越优势
在当今科技浪潮中,Star Tower 作为区块链领域的新星,凭借智能计算节点、区块链网络、智能合约、客户端应用、网络通信协议和数据存储系统的卓越设计,实现了高效资源利用、数据安全、自动化执行、便捷交互、加密通信和高可用存储,展现出显著的技术优势,有望引领区块链技术迈向新高度。
268 12
|
10月前
|
数据采集 Web App开发 JavaScript
如何在Puppeteer中实现表单自动填写与提交:问卷调查
本文介绍了如何使用 Puppeteer 和代理 IP 技术实现在线问卷调查的自动填写与提交。Puppeteer 是一个基于 Node.js 的无头浏览器自动化库,能够模拟用户行为,填写表单并提交数据。通过配置代理 IP,可以提高匿名性和爬取效率,避免因频繁请求而被封禁。本文提供了详细的代码示例和技术分析,帮助读者理解和应用这一技术。
242 0
|
存储 人工智能 JSON
深入理解 go reflect - 反射基本原理
深入理解 go reflect - 反射基本原理
162 0
|
11月前
|
敏捷开发 数据可视化 测试技术
利用敏捷开发方法优化项目管理
【10月更文挑战第14天】敏捷开发方法论强调适应性和人本价值,通过迭代和增量的方式提升软件交付效率。本文介绍敏捷开发的核心原则、实施步骤及其在项目管理中的应用,包括透明化管理、快速响应变化、提高团队协作和持续改进等方面,旨在帮助团队更高效地运作。
|
开发者
0-hackbar最新版本(2.3.1)工具安装(超详细)
0-hackbar最新版本(2.3.1)工具安装(超详细)