首页 > 代码库 > angularjs1-2,作用域、代码压缩

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>

 

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