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 相关文章推荐
Js sort排序使用方法
Oct 17 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
sql注入与转义的php函数代码
2013/06/17 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
JS实现随机点名器
2020/04/12 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
小学生防溺水广播稿
2014/01/12 职场文书
出国留学计划书
2014/04/27 职场文书
小学班主任培训方案
2014/06/04 职场文书
研究生求职自荐书
2014/06/23 职场文书
地球一小时宣传标语
2014/06/24 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
PHP新手指南
2021/04/01 PHP
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS