angularJS 入门基础  更新时间:2015年02月09日 11:14:21   投稿:hebedich   这篇文章主要介绍了angularJS 入门基础的相关资料,需要的朋友可以参考下 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                                                               test                   test                        test                                   ng-src和ng-href; 复制代码 代码如下: angular                                                ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)                                                                             如何操作页面的样式,这个直接改绑定的数据模型就好了: 复制代码 代码如下:                         angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)                                             hehe–o(^▽^)o哇;                                 angular中的模板如何使用,这个要配合路由器使用比较叼: 复制代码 代码如下: angular                                                使用模板                                                                                                                         change                                 如何使用$scope.$watch实时改变绑定界面的模板: 复制代码 代码如下: angular                                                updateangular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;                             {{hehe}}                                         the value set by $scope.$watch ==>> {{wat}}                                                     applay;                                 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组件的错误提示如下;                               Enter your email address:                                                   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%                                                         start                                 您可能感兴趣的文章: AngularJS 2.0入门权威指南 AngularJS入门教程之学习环境搭建 Angularjs 基础入门 AngularJS快速入门 AngularJs 60分钟入门基础教程 AngularJS入门教程(二):AngularJS模板 AngularJS入门知识之MVW类框架的编程思想探讨 AngularJS入门心得之directive和controller通信过程 AngularJS入门(用ng-repeat指令实现循环输出 Angular开发者指南之入门介绍 angularJS 入门基础 相关文章 AngularJS监听路由变化的方法 本篇文章主要介绍了AngularJS监听路由变化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 使用angular帮你实现拖拽的示例 下面小编就为大家带来一篇使用angular帮你实现拖拽的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 三种AngularJS中获取数据源的方式 这篇文章主要介绍了三种AngularJS中获取数据源的方式,需要的朋友可以参考下 2016-02-02 Bootstrap与Angularjs的模态框实例代码 这篇文章主要介绍了Bootstrap与Angularjs的模态框实例代码,需要的朋友可以参考下 2017-08-08 AngularJS 模块详解及简单实例 本文主要介绍AngularJS 模块,这里帮大家整理了相关资料,详细介绍了AngularJS的基础知识,有需要的朋友可以参考下 2016-07-07 AngularJS动态加载模块和依赖的方法分析 这篇文章主要介绍了AngularJS动态加载模块和依赖的方法,结合实例形式分析了AngularJS使用ocLazyLoad实现动态加载的相关操作技巧,需要的朋友可以参考下 2016-11-11 简述Angular 5 快速入门 这篇文章主要介绍了简述Angular 5 快速入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 AngularJs学习第八篇 过滤器filter创建 这篇文章主要介绍了AngularJs学习第八篇 过滤器filter创建的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 2016-06-06 angular 内存溢出的问题解决 这篇文章主要介绍了angular 内存溢出的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 微信小程序实现左右联动的实战记录 联动菜单是大家在开发小程序经常会遇到的一个功能,下面这篇文章主要给大家介绍了关于微信小程序实现左右联动的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧 2018-07-07 最新评论

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>

您可能感兴趣的文章:

  • AngularJS 2.0入门权威指南
  • AngularJS入门教程之学习环境搭建
  • Angularjs 基础入门
  • AngularJS快速入门
  • AngularJs 60分钟入门基础教程
  • AngularJS入门教程(二):AngularJS模板
  • AngularJS入门知识之MVW类框架的编程思想探讨
  • AngularJS入门心得之directive和controller通信过程
  • AngularJS入门(用ng-repeat指令实现循环输出
  • Angular开发者指南之入门介绍
张贴在3