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,如需转载请自行联系原作者

相关文章
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
JSON 数据格式 前端开发
|
JavaScript 前端开发 容器
|
索引 图形学
|
Web App开发 JavaScript
|
前端开发 JavaScript UED
AngularJS中的按需加载ocLazyLoad
初学者,有不足的地方希望各位指出   一、前言     ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好。
1601 0