欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

angularJS 入门基础

程序员文章站 2022-03-31 23:47:48
angular 　　 所有用到的库, 全部用的cdn： (adsbygoogle = window.adsbygoogle || []).push({}); angular 　　 所有用到的库, 全部用的cdn： 复制代码 代码如下:     .angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:. 复制代码 代码如下: angular 　　            
       
            angular最强大的东西,数据的绑定binding        
       
           
                                {{data}}                            
       
   
通过angular,展示数组对应的数据;. 复制代码 代码如下: angular 　　            
       
            通过angular,展示数组对应的数据;        
       
           
                               
                       
  •                         {{i.name}}----{{i.age}}                    
    •                
                           
       
   
.数据过滤器的demo： 复制代码 代码如下: angular 　　            
       
            数据过滤器;        
       
            {{sourcode}}            
            {{sourcode | up}}        
           
.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;： 复制代码 代码如下: angular 　　            
       
            angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;        
                    {{json}}                    
   
   
       
            angular的指令;        
       
            do you content for?                    
   
.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示tab插件的angular首先):： 复制代码 代码如下: angular 　　            
       
            ng-switch的使用        
       
           
               
                       
  • 1
    •                    
  • 2
    •                    
  • other
    •                
             
             
                                                                         
       
           
ng-src和ng-href; 复制代码 代码如下: angular 　　            
       
            ng-src和ng-href的使用(如果使用src或者href的话,html初始化的时候就会加载,肯定是不行的)        
       
                                               
           
如何操作页面的样式,这个直接改绑定的数据模型就好了： 复制代码 代码如下:    
       
            angular对样式进行操作;(jq是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)        
       
                            hehe--o(^▽^)o哇;                    
           
angular中的模板如何使用,这个要配合路由器使用比较叼: 复制代码 代码如下: angular 　　            
       
            使用模板        
       
                                                                           
           
                           
       
           
如何使用$scope.$watch实时改变绑定界面的模板: 复制代码 代码如下: angular 　　            
       
            updateangular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;        
       
            {{hehe}}                        
                the value set by $scope.$watch ==>> {{wat}}            
           
                   
           
angular中自己定义的工具方法 复制代码 代码如下: angular 　　            
       
            angular中的工具方法列表        
       
                         
  • angular.bind
    •              
  • angular.bootstrap
    •              
  • angular.copy
    •              
  • angular.element
    •              
  • angular.equals
    •              
  • angular.extend
    •              
  • angular.foreach
    •              
  • angular.fromjson
    •              
  • angular.identity
    •              
  • angular.injector
    •              
  • angular.isarray
    •              
  • angular.isdate
    •              
  • angular.isdefined
    •              
  • angular.iselement
    •              
  • angular.isfunction
    •              
  • angular.isnumber
    •              
  • angular.isobject
    •              
  • angular.isstring
    •              
  • angular.isundefined
    •              
  • angular.lowercase
    •              
  • angular.module
    •              
  • angular.noop
    •              
  • angular.reloadwithdebuginfo
    •              
  • angular.tojson
    •              
  • angular.uppercase
    •                        
                    这些工具方法跟其他库差不多;                 angular.element是anguarlite选择元素的小jq;                
                    angular.module是模块元素的方法;            
           
       
    ng-transclude的使用(这个是官方的案例)，代码如下: 复制代码 代码如下: angular 　　            
           
                ng-transclude的使用(这个是官方的案例):        
           
               
                 
                 
                  {{text}}            
           
               
    一下验证邮箱准确性的例子: 复制代码 代码如下: angular 　　            
           
                ngpaste以及ngmouseup和ngkeyup,ngmodeloptions....等方法参考官方的使用,要用查api就好了,(官方的要fq哦;)        
                   
                如果不用ng-message组件的错误提示如下;        
             
                                                   
                  you forgot to enter your email address...            
               
                  you did not enter your email address correctly...            
             
                     
           
            老外写的demo        
               
    settimeout和setinterval都是经过angular包装过的，返回的是延迟对象的实例: 复制代码 代码如下: angular 　　            
           
                $timeout和$interval,这两个服务;        
           
               
                                       

    setinterval

                       

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

                                                           

    timeout

                       

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

                                   
               
                   
                        0%                
               
                       
               
    (window.slotbydup = window.slotbydup || []).push({ id: "u5885040", container: "_1pz2y0vjj2c", async: true }); 赞 (0) 打赏 微信扫一扫 (window.slotbydup = window.slotbydup || []).push({ id: "u6658917", container: "_p8103m6d7j9", async: true }); 相关文章: (window.slotbydup = window.slotbydup || []).push({ id: "u6564666", container: "_bbbktl89l5b", async: true }); angularJS中router的使用指南 这几天看了angularjs和backbone，大看了解了knockout和emberjs，刚刚上网看到了一个angular的rou... [阅读全文] 对比分析AngularJS中的$http.post与jQuery.post的区别 很多时候我们需要用ajax提交post数据，angularjs与jq类似，也有封装好的post。 但是jquery的post明显比... [阅读全文] 详解AngularJS的通信机制 现在几乎满世界的人都在问! 外面有人么? 这里是 uss angularjs, 我们遇到麻烦了，我们的服务讲得是克灵贡语（k... [阅读全文] AngularJS基础学习笔记之控制器 angularjs控制器用来控制angularjs applications的数据。 　　angularjs控制器就是普通的jav... [阅读全文] AngularJS语法详解（续） src和href属性 angularjs中src应写成ng-src，href应写成ng-href 例如： 复制代码 代码如下: ... [阅读全文] (window.slotbydup = window.slotbydup || []).push({ id: "u5889887", container: "_967xsr7kio", async: true }); (window.slotbydup = window.slotbydup || []).push({ id: "u6564666", container: "_bbbktl89l5b", async: true }); (window.slotbydup = window.slotbydup || []).push({ id: "u5885081", container: "_awd7yc8ppa", async: true }); 版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。 发表评论 验证码：...

    angular 　　

    所有用到的库, 全部用的cdn：

    复制代码 代码如下:

        <script src=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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 = "";
                });
            </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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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="">
    <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=">
        <script src=">
        <link href="" rel="stylesheet">
        <script src="" 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>

    上一篇： python基于watchdog库全自动化监控目录文件

    下一篇： angularJS结合canvas画图例子

    推荐阅读