angularJS 入门基础


Posted in Javascript onFebruary 09, 2015

angular

所有用到的库, 全部用的CDN:

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            angular最强大的东西,数据的绑定binding

        </div>

        <div class="panel-body">

            <div id="bind" ng-controller="bf">

                <input type="text" ng-model="data" />

                {{data}}

                <script>

                    app.controller("bf", function($scope) {

                        $scope.data = "testData";

                        //$scope.$apply();

                    });

                </script>

            </div>

        </div>

    </div>

</body>

</html>

通过angular,展示数组对应的数据;.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            通过angular,展示数组对应的数据;

        </div>

        <div class="panel-body">

            <div id="arr-bind" ng-app="arr-app" ng-controller="arrCon">

                <style>

                    .s{

                        color:#f00;

                    }

                    li{

                        cursor: pointer;

                    }

                </style>

                <ul>

                    <li ng-repeat="i in lists" ng-click="bered($index)" ng-class="{s : $index == flag}">

                        {{i.name}}----{{i.age}}

                    </li>

                </ul>

                <script>

                    //angular.module("arr-app", []);

                    function arrCon($scope) {

                        $scope.flag = 0;

                        $scope.bered = function(i) {

                            $scope.flag = i;

                        };

                        $scope.lists = [

                            {name : "hehe",

                                age:10},

                            {

                                name : "xx",

                                age : 20

                            },

                            {

                                name : "yy",

                                age : 2

                            },

                            {

                                name : "jj",

                                age : 220

                            }

                        ]

                    };

                </script>

            </div>

        </div>

    </div>

</body>

</html>

.数据过滤器的DEMO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            数据过滤器;

        </div>

        <div class="panel-body" ng-controller="filte">

            {{sourCode}}

            <br>

            {{sourCode | up}}

        </div>

        <script>

            function filte($scope) {

                $scope.sourCode = "hehe lala dudu oo zz";

            };

            app.filter("up" ,function() {

                return function(ipt) {

                    return ipt.replace(/ (\w)/g,function($0,$1) {

                        return " "+$1.toUpperCase();

                    });

                }

            });

        </script>

    </div>

</body>

</html>

.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div id="factory" class="panel panel-default">

        <div class="panel-heading">

            angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;

        </div>

        <div  class="panel-body" ng-controller="factory">

            {{json}}

            <script>

                app.factory("ff", function() {

                    return {

                        "noting" : "json"

                    };

                });

                app.controller("factory", function($scope, ff) {

                    $scope.json = ff;

                });

            </script>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-title">

            angular的指令;

        </div>

        <div class="panel-body">

            <heh>do you content for?</heh>

            <script>

                app.directive("heh", function() {

                    return {

                        restrict : "AE",

                        replace : true,

                        transclude : true,

                        template : '<div> <button class="btn-danger" ng-transclude></button></div>'

                    };

                })

            </script>

        </div>

    </div>

</body>

</html>

.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示Tab插件的angular首先)::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            ng-switch的使用

        </div>

        <div class="panel-body" ng-controller="sw">

            <div ng-init="a=2">

                <ul ng-switch on="a">

                    <li ng-switch-when="1">1</li>

                    <li ng-switch-when="2">2</li>

                    <li ng-switch-default>other</li>

                </ul>

              </div>

              <div>

                  <button ng-click="a=1" class="btn btn-primary">test</button>

                  <button ng-click="a=2" class="btn btn-info">test</button>      

                  <button ng-click="a=3" class="btn btn-warning">test</button>

              </div>

        </div>

        <script type="text/javascript">

            app.controller("sw", function($scope) {

            });

        </script>

    </div>

</body>

</html>

ng-src和ng-href;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)

        </div>

        <div class="panel-body" ng-controller="srcCon">

            <a ng-href="{{logo}}" >

                <img ng-src="{{logo}}" />

            </a>

        </div>

        <script type="text/javascript">

            app.controller("srcCon", function($scope) {

                $scope.logo = "http://www.mainbo.com/templets/images/logo.gif";

            });

        </script>

    </div>

</body>

</html>

如何操作页面的样式,这个直接改绑定的数据模型就好了:

    <div class="panel panel-default">

        <div class="panel-heading">

            angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更?诺姆椒?把元素的属性赋值给一个变量,你只要改变这个变量即可)

        </div>

        <div class="panel-body">

            <hehe id="wh" ng-style="{width: w + 'px', height: h + 'px', backgroundColor: '#364'}">

                hehe--o(^?^)o哇;

            </hehe>

        </div>

        <script type="text/javascript">

            app.directive("hehe", function() {

                function compile() {

                };

                return {

                    link : function($scope, $element) {

                        var obj = angular.element($element);

                        //obj.find不好用;

                        var add = obj[0].getElementsByClassName("add")[0];

                        var reduce = obj[0].getElementsByClassName("reduce")[0];

                        angular.element(add).bind("click", function(){

                            $scope.h = $scope.h+10;

                            apply();

                        })

                        angular.element(reduce).bind("click", function(){

                            $scope.h = $scope.h-10;

                            apply();

                        });

                        function apply() {

                            $scope.$apply();

                        }

                        return compile;

                    },

                    controller : function($scope) {

                        $scope.w = 200;

                        $scope.h = 50;

                        //$scope.$apply();

                    },

                    restrict: 'AE',

                    replace : true,

                    scope : "=ng-style",

                    transclude : true,

                    template : '<div><div ng-transclude></div><button class="btn btn-default add">+</button><button class="btn btn-default reduce">-</button></div>'

                }

            })

        </script>

    </div>

angular中的模板如何使用,这个要配合路由器使用比较叼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            使用模板

        </div>

        <div class="panel-body" ng-controller="ngTpl">

                        <!---这个type要声明准确-->

            <script type="text/ng-template" id="tpl">

                {{ver}}

            </script>

                            <!---tpl是一个定值不是变量,要给变量要在scope中进行定义---->

            <div ng-include src="'tpl'"></div>

            <div class="well">

                <button ng-click="chan()">change</button>

            </div>

        </div>

        <script type="text/javascript">

            app.controller("ngTpl", function($scope) {

                function hehe(str) {

                    str = _.shuffle(str);

                    return str.join("")

                }; 

                $scope.ver = "var——ver--heehe";

                $scope.chan = function() {

                    $scope.ver = hehe( $scope.ver );

                };

            });

        </script>

    </div>

</body>

</html>

如何使用$scope.$watch实时改变绑定界面的模板:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            <span class="label label-danger">update</span>angular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;

        </div>

        <div class="panel-body" ng-controller="apply">

            {{hehe}}

            <input type="text" ng-model="m0" />

            <div class="well">

                the value set by $scope.$watch ==>> {{wat}}

            </div>

            <br>

            <button ng-click="up()" class="btn btn-default">

                applay;

            </button>

        </div>

        <script type="text/javascript">

            app.controller("apply", function($scope) {

                $scope.hehe = "lll________xxx";

                $scope.m0 = 1;

                ss = $scope;

                $scope.up = function() {

                    $scope.hehe = $scope.m0;

                    //可以,但是给了提示的报错, 谁知道为甚毛?

                    //$scope.$apply();

                    $scope.$digest();

                };

                             //给$scope.m0变量是无效的;

                $scope.$watch("m0", function(va) {

                    $scope.wat = va;

                })

            });

        </script>

    </div>

</body>

</html>

angular中自己定义的工具方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            angular中的工具方法列表

        </div>

        <div class="panel-body">

            <ul  class="nav nav-pills nav-stacked">

              <li role="presentation"><a href="###">angular.bind</a></li>

              <li role="presentation"><a href="###">angular.bootstrap</a></li>

              <li role="presentation"><a href="###">angular.copy</a></li>

              <li role="presentation"><a href="###">angular.element</a></li>

              <li role="presentation"><a href="###">angular.equals</a></li>

              <li role="presentation"><a href="###">angular.extend</a></li>

              <li role="presentation"><a href="###">angular.forEach</a></li>

              <li role="presentation"><a href="###">angular.fromJson</a></li>

              <li role="presentation"><a href="###">angular.identity</a></li>

              <li role="presentation"><a href="###">angular.injector</a></li>

              <li role="presentation"><a href="###">angular.isArray</a></li>

              <li role="presentation"><a href="###">angular.isDate</a></li>

              <li role="presentation"><a href="###">angular.isDefined</a></li>

              <li role="presentation"><a href="###">angular.isElement</a></li>

              <li role="presentation"><a href="###">angular.isFunction</a></li>

              <li role="presentation"><a href="###">angular.isNumber</a></li>

              <li role="presentation"><a href="###">angular.isObject</a></li>

              <li role="presentation"><a href="###">angular.isString</a></li>

              <li role="presentation"><a href="###">angular.isUndefined</a></li>

              <li role="presentation"><a href="###">angular.lowercase</a></li>

              <li role="presentation"><a href="###">angular.module</a></li>

              <li role="presentation"><a href="###">angular.noop</a></li>

              <li role="presentation"><a href="###">angular.reloadWithDebugInfo</a></li>

              <li role="presentation"><a href="###">angular.toJson</a></li>

              <li role="presentation"><a href="###">angular.uppercase</a></li>

            </ul >

            <div class="well">

                这些工具方法跟其他库差不多;

                angular.element是anguarLite选择元素的小JQ;

                <br>

                angular.module是模块元素的方法;

            </div>

        </div>

    </div>

</body>

</html>

ng-transclude的使用(这个是官方的案例),代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            ng-transclude的使用(这个是官方的案例):

        </div>

        <div class="panel-body" ng-controller="ExampleController">

            <div>

              <input ng-model="title"><br>

              <textarea ng-model="text"></textarea> <br/>

              <pane title="{{title}}">{{text}}</pane>

            </div>

        </div>

        <script type="text/javascript">

        app.directive('pane', function(){

              return {

                restrict: 'E',

                transclude: true,

                scope: { title:'@' },

                template: '<div style="border: 1px solid black;">' +

                            '<div style="background-color: gray">{{title}}</div>' +

                            '<ng-transclude></ng-transclude>' +

                          '</div>'

              };

          })

          .controller('ExampleController', ['$scope', function($scope) {

            $scope.title = 'Lorem Ipsum';

            $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';

          }]);

        </script>

    </div>

</body>

</html>

一下验证邮箱准确性的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;)

        </div>

        <script src="https://yearofmoo.github.io/ngMessages/angular-messages.js"></script>

        <div class="panel-body" ng-controller="fromvaild">

            如果不用ng-message组件的错误提示如下;

        <form name="userForm">

          <div class="field">

            <label for="emailAddress">Enter your email address:</label>

            <input type="email" name="emailAddress" ng-model="data.email" required />

            <!-- this stuff is WAY too complex -->

            <div ng-if="userForm.emailAddress.$error.required" class="error">

              You forgot to enter your email address...

            </div>

            <div ng-if="!userForm.emailAddress.$error.required &&

                         userForm.emailAddress.$error.email" class="error">

              You did not enter your email address correctly...

            </div>

          </div>

          <input type="submit" />

        </form>

        <br>

        <a href="https://yearofmoo.github.io/ngMessages/">老外写的DEMO</a>

        </div>

        <script type="text/javascript">

            app.controller("fromvaild", function($scope) {

                //$scope.myField.$error = { minlength : true, required : false };

            })

        </script>

    </div>

</body>

</html>

setTimeout和setInterval都是经过angular包装过的,返回的是延迟对象的实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>

</head>

<body ng-app="app">

    <script type="text/javascript">

           var app = angular.module("app",[]);

    </script>

    <div class="panel panel-default">

        <div class="panel-heading">

            $timeout和$interval,这两个服务;

        </div>

        <div class="panel-body" ng-controller="st">

            <div class="list-group">

                <a href="#" class="list-group-item active">

                    <h4 class="list-group-item-heading">setInterval</h4>

                    <p class="list-group-item-text">

                    $interval(fn, delay, [count], [invokeApply]);

                    </p>

                </a>

                <a href="#" class="list-group-item">

                    <h4 class="list-group-item-heading">timeout</h4>

                    <p class="list-group-item-text">

                    $timeout(fn, [delay], [invokeApply]);

                    </p>

                </a>

            </div>

            <div class="progress">

                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">

                    0%

                </div>

            </div>

            <button class="btn-default btn" ng-click="prog()">

                start

            </button>

        </div>

        <script type="text/javascript">

            app.controller("st", function($scope,$element,$interval) {

                var $el = $($element[0]).find(".progress-bar");

                console.log(arguments);

                //使用angular.element选中的元素用find找不到东西;

                $scope.prog = function() {

                    var df = $interval(function() {

                        var val = parseInt($el.html())+4;

                        if(val>=104) $interval.cancel(df);

                        $el.html( val+"%" ).width(val+"%");

                    },100);

                    console.log(df)

                    //console.log(aa = $interval)

                };

            });

        </script>

    </div>

</body>

</html>
Javascript 相关文章推荐
jquery dialog键盘事件代码
Aug 01 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
javascript中函数作为参数调用的方法
Feb 09 #Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 #Javascript
angularJS 中$scope方法使用指南
Feb 09 #Javascript
Javascript动态创建div的方法
Feb 09 #Javascript
angularJS 中$attrs方法使用指南
Feb 09 #Javascript
JavaScript实现获取dom中class的方法
Feb 09 #Javascript
angularJS 中input示例分享
Feb 09 #Javascript
You might like
curl实现站外采集的方法和技巧
2014/01/31 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
c语言常见笔试题总结
2016/09/05 面试题
募捐倡议书
2014/04/14 职场文书
单位工资证明范本
2015/06/12 职场文书