首页手记 Angularjs的学习（未完成）

Angularjs的学习（未完成）

标签：

JavaScript AngularJS

Angular的初识

Angular是一套基于MVC结构的JavaScript开发工具。

核心功能：对现有HTML编码已指令方式进行扩展，并是扩展后的HTML编码可以通过使用元素的神明的方式来构建动态内容。

Angular内部利用了两项技术特点：

数据的双向绑定；

数据的绑定，通过{{}}双括号，向页面的DOM元素插入数据，也可以通过添加元素属性的方式绑定Angular的内部指令，实现对元素的数据绑定，这两种形式的数据绑定都是双向同步的。

依赖注入。

依赖注入是Angular中一个特有的代码编写方式，其核心思想是在编写代码时，只需要关注为实现页面功能要调用的对象是什么，而不必了解它需要依赖于什么，像逻辑类中的$socpe对象，就是通过依赖注入的方式进行使用的。

Angular的第一个小例子：

<!DOCTYPE html>
<!--ng-app：通知引入的Angular文件框架，页面中的哪个部分开始接受它的管理。如在html标签里增加，表示Angular可以管理整个页面。-->
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
    </head>
    <!--ng-controller：声明Angular中控制器类的名称，并且其将管理声明处的全部元素。如此处是在body标签里声明，即可管理body里所有元素。-->
    <body ng-controller="myCtrl">
        {{helloWorld}}
    </body>
    <!-- 引用Angular的js文件-->
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        angular.module("myApp",[]).controller("myCtrl",['$scope',function($scope){
            $scope.helloWorld = "Hello World , My name is Angular.";
        }]);
    </script>
</html>

页面效果：

Angular与JavaScript表达式上的区别

Angular中所有表达式的值都来源于$scope，添加属性的方式，统一进行设置；JavaScript中可以由全局window对象调用表达式。
Angular中表达式的容错能力强，可以允许值出现null和undefined；JavaScript中会抛出异常代码。
Angular中调用JavaScript代码，需在控制器中定义一个方法，然后用表达式调用该方法即可；JavaScript代码中执行Angular的表达式，需要借助$eval()方法。
Angular需通过依赖注入$window对象替代window，因为每个控制器的代码只在它管辖的作用域中使用，通过这样写法，可以防止它与全局的window对象混淆，出现各类异常。

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
    </head>
    <body ng-controller="myCtrl">

        执行JavaScript表达式：<br/>
        <input type="text" ng-model="expr1"/>
        <button ng-click="testExprl(expr1)">计算</button>
        <br/><br/><br/>

        执行Angular表达式：<br/>
        <input type="text" ng-model="expr2"/>
        <span ng-bind="$eval(expr2)">计算</span>

    </body>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        angular.module("myApp",[]).controller("myCtrl",['$scope',function($scope){

            $scope.expr1 = 20;
            $scope.expr2 = '20 + 1 | number:0';

            $scope.testExprl = function(expr){
                alert(expr);
                var newV = parseInt(expr) + 1;
                $scope.expr1 = newV;
            }

        }]);
    </script>
</html>

点击“计算”

Angular控制器

在Angular中，控制器就像 JavaScript 中的构造函数一般，是用来增强 Angular作用域(scope) 的。当一个控制器通过 ng-controller 指令被添加到DOM中时，ng 会调用该控制器的构造函数来生成一个控制器对象，这样，就创建了一个新的子级作用域(scope)。在这个构造函数中，作用域(scope)会作为$scope参数注入其中，并允许用户代码访问它。

一般情况下，我们使用控制器做两件事：

初始化 $scope 对象
为 $scope 对象添加行为（方法）

控制器的任务就是操作$scope对象。

初始化 $scope 对象

当我们创建应用程序时，我们通常要为Angular的 $scope 对象设置初始状态，这是通过在 $scope 对象上添加属性实现的。这些属性就是供在视图中展示用的视图模型（view model），它们在与此控制器相关的模板中均可以访问到。

Angular允许我们在全局作用域下(window)定义控制器函数，但建议不要用这种方式。在一个实际的应用程序中，推荐在 Angular模块下通过 .controller 为应用创建控制器。

为 scope 添加属性来让模板可以访问数据模型。

为 $scope 对象添加行为

为 $scope 添加方法来让它提供相关的交互逻辑。

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/angular.js/1.4.6/angular.js" type="text/javascript"></script>
    </head>
    <body>
         <div ng-controller="DoubleCtrl">
            <input ng-model="num"> 翻倍后等于 {{double(num)}}
        </div>
    </body>
    <script type="text/javascript">
        var myApp = angular.module('myApp',[]);

        myApp.controller('DoubleCtrl', ['$scope', function($scope) {
            $scope.double = function(value) { return value?value * 2:0; };
        }]);
    </script>
</html>

$scope对象，及其属性、行为补充

ng-controller 指令用来为模板创建一个 scope；
把一个属性指定给 $scope 这样会创建或更新一个数据模型；
控制器的方法可以通过在 scope 中添加函数来创建；
控制器的方法和属性在模板/视图中都是可以获得的。

$scope的属性、方法继承

由于 ng-controller 指令会创建新的子级 scope ，这样我们就会获得一个与DOM层级结构相对应的的基于继承关系的 scope 层级结构；底层（内层）控制器的 $scope 能够访问在高层控制器的 scope 中定义的属性和方法。

<!doctype html>
<html>
  <head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        myApp.controller('ParentCtrl', ['$scope', function($scope){
          $scope.timeOfDay = 'morning';
          $scope.name = 'Parent';
        }]);
        myApp.controller('ChildCtrl', ['$scope', function($scope){
          $scope.name = 'Child';
        }]);
        myApp.controller('GrandChildCtrl', ['$scope', function($scope){
          $scope.timeOfDay = 'evening';
          $scope.name = 'GrandChild';
        }]);
    </script>
  </head>
  <body>
    <div ng-app="myApp" class="spicy">
        <div ng-controller="ParentCtrl">
            <p>Good {{timeOfDay}}, {{name}}!</p>

            <div ng-controller="ChildCtrl">
                <p>Good {{timeOfDay}}, {{name}} !</p>

                <div ng-controller="GrandChildCtrl">
                    <p>Good {{timeOfDay}}, {{name}}!</p>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

上面例子中我们在HTML模板中嵌套了三个 ng-controller 指令，这导致我们的视图中有4个 scope：

rootScope 所有作用域的“根”；
ParentCtrl 控制器管理的 scope，$parentScope = $rootScope.$new()，$rootScope.$new()的作用就是为$rootScope创建一个新的scope；
ChildCtrl 控制器管理的 scope，$childScope = $parentScope.$new()；
GrandChildCtrl 控制器管理的 scope，$grandScope = $childScope.$new()。

Angular的模板

实现方式

直接在页面中添加元素和Angular指令；

    ...
    <body ng-controller="myCtrl">
        <span>{{helloWorld}}<span>
    </body>
    ...
        angular.module("myApp",[]).controller("myCtrl",['$scope',function($scope){
            $scope.helloWorld = "Hello World , My name is Angular.";
        }]);
    ...

通过<script type="text/ng-template">构建一个用于绑定数据的模板，在模板内部添加数据绑定和元素的事件，再给元素添加src属性，导入模板，并且需使用ng-include指令。

<!doctype html>
<html ng-app="MyApp">
  <head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.angularjs.org/1.2.25/angular.min.js"></script>
  </head>
  <body>
    <!-- Angular类型的模板-->
    <script id="tpl" type="text/ng-template">
        姓名：{{name}} <br/> 邮箱：{{email}}
    </script>
    <!--
        ng-include：声明该元素的内容来源于其他模板
        src属性：指定对应模板名称，该值是个表达式，普通字符串需加引号
     -->
    <div ng-include class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'tpl'" ng-controller="MyCtrl"></div>
    <script type="text/javascript">
        var myApp = angular.module('MyApp', []);
        myApp.controller('MyCtrl', ['$scope', function($scope){
          $scope.name = 'Imooc';
          $scope.email = 'Imooc@test.com';
        }]);
    </script>
  </body>
</html>

构建模板内容常用的指令

ng-repeat 根据绑定数组成员的数量，复制页面中被绑定的元素，并在复制过程中添加元素响应的属性和方法。

<!doctype html>
<html ng-app="MyApp">
  <head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('MyApp', []);
        myApp.controller('MyCtrl', ['$scope', function($scope){
            $scope.data = [{
                name:"Test1",
                sex:"boy"
            },{
                name:"Test2",
                sex:"girl"
            }];
        }]);
    </script>
  </head>
  <body ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="stu in data">
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
        </li>
    </ul>
  </body>
</html>

ng-class

$scope对象属性直接绑定值为CSS类别名称

<div ng-class="red"></div>
等价于
<div class="{{rea}}"></div>

以字符串数组方式选择性添加CSS类别名称

<!--updateCss=true，添加CSS类别为red的样式； updateCss=false，添加CSS类别为green的样式-->
<div ng-class="{true:'red',false:'green'}[updateCss]"></div>

$scope.updateCss = true;

通过定义key/value对象的方式来添加多个CSS类别名称

/*CSS样式*/
.divborder{
    ...
}
.divcolor{
    ...
}
.divmargin{
    ...
}
<!-- 页面-->
<!--updateCss=true，添加CSS类别为red的样式； updateCss=false，添加CSS类别为green的样式-->
<div ng-class="{'divborder':a,'divcolor':b,'divmargin':c}"></div>
/*js代码*/
$scope.a= true;
$scope.b= true;
$scope.c= false;

ng-class-odd、ng-class-even

<!doctype html>
<html ng-app="MyApp">
  <head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('MyApp', []);
        myApp.controller('MyCtrl', ['$scope', function($scope){
            $scope.data = [{
                name:"Test1",
                sex:"boy"
            },{
                name:"Test2",
                sex:"girl"
            },{
                name:"Test3Test3",
                sex:"girl"
            }];

            $scope.focusHander = function(index){
                alert(index);
                $scope.focusLine = index;
            }
        }]);
    </script>
    <style type="text/css">
        ul{
            list-style-type:none;
        }
        .odd{
            background-color:red;
        }
        .even{
            background-color:green;
        }
        .focus{
            background-color:#cccccc;
        }
    </style
  </head>
  <body ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="stu in data" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="focusHander($index)" ng-class="{'focus':$index==focusLine}">
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
        </li>
    </ul>
  </body>
</html>

ng-class-odd和ng-class-even是专用于以列表方式显示数据，对应奇数行与偶数行的样式。

ng-show、ng-hide、ng-switch

<!doctype html>
<html ng-app="MyApp">
  <head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('MyApp', []);
        myApp.controller('MyCtrl', ['$scope', function($scope){
            $scope.switch = 1;
            $scope.isShow = true;
            $scope.isHide = false;
        }]);
    </script>
    <style type="text/css">
        ul{
            list-style-type:none;
        }
        .odd{
            background-color:red;
        }
        .even{
            background-color:green;
        }
        .focus{
            background-color:#cccccc;
        }
    </style
  </head>
  <body ng-controller="MyCtrl">
    <div ng-show={{isShow}}>ng-show显示111</div>
    <div ng-hide={{isHide}}>ng-hide显示222</div>
    <ul ng-switch on={{switch}}>
        <li ng-switch-when="1">tttt</li>
        <li ng-switch-when="2">ssss</li>
        <li ng-switch-default>更多</li>
    </ul>
  </body>
</html>