首页 > Web开发 > 详细

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

时间:2017-07-23 15:50:29      阅读:199      评论:0      收藏:0      [点我收藏+]
<!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>

 

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

原文:http://www.cnblogs.com/yaowen/p/7224762.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!