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 相关文章推荐
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
详解webpack打包vue时提取css
May 26 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
Node.js 多线程完全指南总结
Mar 27 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
小偷PHP+Html+缓存
2006/12/20 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
浅析使用Python搭建http服务器
2019/10/27 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
关于开学的感想
2015/08/10 职场文书
小学体育课教学反思
2016/02/16 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python