AngularJS前端MVC学习计算(2)——AngularJS验证、过滤器、指令

三.二、扩张表单成分的吩咐

3.壹.1、应用与模块(ng-app)

自行载入运维一个AngularJS应用,评释了ng-app的因素会成为$rootScope的源点
每种HTML文书档案只有1个AngularJS应用能被活动载入运营,文书档案中找到的首先个ngApp将被用来定义自动载入运转的应用的根成分。要在1个HTML文书档案中运营多少个利用,你不能够不运用angular.bootstrap来手工运行。AngularJS应用间不能够嵌套。

三.5.二、自定义机械钟

上个自定义钦命很不难,小编将上一个下令修改为能够动态变化的光阴及能够给挂钟指定参数与事件。

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1">

        <my-Timer color="blue" passed="0" interval="1000"></my-Timer>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {

            });

            //在模块app01上定义curentTime指令
            app01.directive("myTimer",function(){
                return {
                    template:"",  //模板
                    restrict:"AE",  //可应用范围
                    replace:true, //是否替换
                    scope:{
                        color:'@'
                    },
                    link:function(scope,elem,attr,controller){
                        var i=attr.interval||1000;
                        elem.text(new Date().toLocaleString()+"    已计时:"+attr.passed+"秒");  //向元素中设置文本为当前时间
                        //定时器,每隔指定的时间调用函数
                        setInterval(function(){
                            attr.passed=parseInt(attr.passed)+parseInt(i/1000);
                            elem.text(new Date().toLocaleString()+"    已计时:"+attr.passed+"秒");  //向元素中设置文本为当前时间
                        },i);
                    }
                };
            });
        </script>
    </body>

</html>

运行结果:

AngularJS 1

3.5、自定义指令

置于的通令就算再拉长也是个别的,对于特种的急需能够选取自定义指令,自定义指令能够打包常用操作也造福分享与交换,自定义指令的语法格式如下:

module.directive(‘指令名称’,function(){
    return {
      template:插入指令成分的模板
      restrict:允许指令应用的限定
      replace:告诉编写翻译器用命令模板取代定义该指令的成分
      transclude:是不是足以访问内部功用域以外的效能域
      scope:钦赐内部效能域
      link:链接函数
      controller:定义控制器来治本指令功能域和视图
      require:钦赐所要求的其余指令
   };
});

restrict:限制指令行为,允许指令应用的限制,取值,能够结合,如AE。

AngularJS 2

@:使用@(@attribute)来展开单向文本(字符串)绑定
= :使用=(=attribute)进行双向绑定变量
& :使用&来调用父效能域中的函数

二、过滤器

行使过滤器格式化数据,变换数据格式,在模板中动用三个插值变量。语法格式如下:

{{ express | filter:parameter1:p2:p3… | … | …}}

过滤器分了内置过滤器与自定义过滤器,过滤器的调用格局也分了在模板中调用与在函数中调用。

3.肆、别的内置指令

angular中提供了无数的嵌入指令,还如同:ng-{app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}

能够查阅帮忙文书档案获得详细的新闻。

3.2.4、ng-init

初始化

<p ng-init=”test=1″ ng-repeat=”a in animals”>
    {{a.name}} {{a.id+test}}
</p>

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <ul ng-init="nums=[1,1,2,2,3,3,4,4,5,5]">
                <li ng-repeat="i in nums track by $index">
                    {{i}}+1={{i+1}}
                </li>
            </ul>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
        </script>
    </body>
</html>

运作结果:

AngularJS 3

dupes错误表达:

AngularJS does not allow duplicates in a ng-repeat directive. This means
if you are trying to do the following, you will get an error.

ng-repeat不允许再一次。

<div ng-repeat=”row in [1,1,1]”>
<div ng-repeat=”row in [1,1,1] track by $index”>

ng-repeat依旧索要一个唯一的key

二.1.一、在模板中使用过滤器

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <p>
                货币:{{money}} ,{{money|currency}} ,{{money|currency:"¥"}}
            </p>
            <p>
                数字:{{money|number:1}} ,{{money | number:1 | currency:"$" }}
            </p>
            <p>
                大写:{{message|uppercase}}
            </p>
            <p>
                小写:{{message|lowercase}}
            </p>
            <p>
                json:{{user | json}}
            </p>
            <p>
                截取:{{message|limitTo:5|uppercase}}
            </p>
            <p>
                日期1:{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}
            </p>
            <p>
                日期2:{{birthday|date:'fullDate'}}
            </p>
            <p>
                排序:{{users|orderBy:'age':true}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.money=1985.678;
                $scope.message="Hello AngularJS!"
                $scope.user={name:"rose",age:18};
                $scope.birthday=new Date();
                $scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];
            });
        </script>
    </body>

</html>

运维结果:

AngularJS 4

3.2.5、ng-switch

依照功能域表达式动态切换把卓殊DOM成分包括在早就编写翻译的模版中。

AngularJS 5

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
            请输入颜色:<input ng-model="color" />
            <p ng-switch="color" ng-style="{'color':color}">
                红色
                绿色
                蓝色
                输入错误,请输入red,green,blue
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {});
        </script>
    </body>

</html>

运作结果:

AngularJS 6

二.壹.2、在剧本中调用过滤函数

在函数中调用过滤器的不二诀窍是:在控制中添加对$filter的依靠,$filter(“过滤函数名称”)(被过滤对象,’参数’)

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            {{money}}
            <hr/>
            {{moneyString}}
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope,$filter) {
                $scope.money=1985.897;
                //使用$filter服务查找currency函数,并调用
                $scope.moneyString=$filter("currency")($scope.money,'USD$');
            });
        </script>
    </body>

</html>

运维结果:

AngularJS 7

叁.一、援助AngularJS作用的通令

三、指令(directive)

指令(directive)是AngularJS模板标记和用于支持的JavaScript代码的三结合。AngularJS指令标记能够是HTML属性、成分名称可能CSS类,指令扩充了HTML的一言一行。指令能够分成:
a)、内置指令:帮忙AngularJS功用的一声令下、扩张表单成分的下令、把功能域绑定到页面成分的下令
b)、自定义指令,增添与壮大出新的授命。

ng-app那样的记号我们称为指令。模板通过指令提醒AngularJS实行须求的操作。
比如:ng-app指令用来文告AngularJS自动指引使用;ez-clock
指令用来公告AngularJS生成内定的钟表组件。

3.2.2、ng-class-even与ng-class-odd

AngularJS模板使你能够把该功能域内的数量直接绑定到所出示的HTML成分

ng-class-even与ng-class类似,ng-repeat中偶数时使用

ng-class-odd与ng-class类似,ng-repeat中奇数时选取

<p ng-repeat=”a in animals” ng-class-odd=”‘odd'”
ng-class-even=”‘even'”>
   {{a.name}}
</p>

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style>
            .bg1{
                background: lightcoral;
                color:white;
            }
            .bg2{
                background: lightpink;
                color: white;
            }
        </style>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <ul>
                <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">
                    {{u.name}}
                </li>
            </ul>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.users = [{
                    id: 1,
                    name: "tom",
                    sex: "男",
                    age: 19
                }, {
                    id: 2,
                    name: "rose",
                    sex: "女",
                    age: 18
                }, {
                    id: 7,
                    name: "jack",
                    sex: "男",
                    age: 16
                }, {
                    id: 9,
                    name: "lucy",
                    sex: "女",
                    age: 20
                }, {
                    id: 15,
                    name: "mark",
                    sex: "男",
                    age: 89
                }];
            });
        </script>
    </body>
</html>

运转结果:

AngularJS 8

3.2.6、ng-value

绑定给定的表明式到input[select]或 input[radio]的值上

<input type=”radio” ng-value=”‘值'” ng-model=”radioValue”
/>{{radioValue}}

演示代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
            <p>
                是否同意:
                <input type="radio" ng-value="'同意'" ng-model="isAllow" name="allow" />yes
                <input type="radio" ng-value="'不同意'" ng-model="isAllow" name="allow" />no
                <p>
                    {{isAllow}}
                </p>
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {});
        </script>
    </body>

</html>

 

示范结果:

AngularJS 9

只允许使用在radio与select上,checkbox无效。

3.2.1、ng-options

该指令允许你依照1个迭代表明式添加选项

<select ng-model=”color” ng-options=”c.name for c in colors”>

<option>–请选择–</option>

</select>

ng-model必供给钦点,暗中同意意况下被挑选的值正是眼下目的,没有value的项将被解决。

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <h3>基础下拉列表:</h3>
            <p>
                <select ng-model="user1" ng-options="u.name for u in users">
                    <option value="">--请选择--</option>
                </select>
                 {{user1}}
            </p>
            <h3>带分组的下拉列表:</h3>
            <p>
                <select ng-model="user2" ng-options="u.name group by u.sex for u in users">
                    <option  value="">--请选择--</option>
                </select>
                 {{user2}}
            </p>
            <h3>组合的下拉列表:</h3>
            <p>
                <select ng-model="user3" ng-options="(u.name+u.age+'岁') group by u.sex for u in users">
                    <option  value="">--请选择--</option>
                </select>
                 {{user3}}
            </p>
            <h3>自定义ng-model的值:</h3>
            <p>
                <select ng-model="user4" ng-options="u.id as u.name group by u.sex for u in users">
                    <option  value="">--请选择--</option>
                </select>
                 {{user4}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.users = [{
                    id: 1,
                    name: "tom",
                    sex: "男",
                    age: 19
                }, {
                    id: 2,
                    name: "rose",
                    sex: "女",
                    age: 18
                }, {
                    id: 7,
                    name: "jack",
                    sex: "男",
                    age: 16
                }, {
                    id: 9,
                    name: "lucy",
                    sex: "女",
                    age: 20
                }, {
                    id: 15,
                    name: "mark",
                    sex: "男",
                    age: 89
                }];
            });
        </script>
    </body>
</html>

 

运转结果:

 AngularJS 10

3.2.3、ng-bind-template

再正是绑定三个表明式块

<p ng-bind-template=”{{student1}} and {{student2}}”></p>

示例:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <div ng-bind="info1">{{info2}}</div>

            <div ng-bind-template="{{info1}} ? 答案是:{{info2}}"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.info1="1+1=";
                $scope.info2="2";
            });
        </script>
    </body>
</html>

 

结果:

AngularJS 11

二.一、内置过滤器

科学普及的内置过滤器有:

1)、currency(货币)

{{123.456 | currency:’¥’}}

2)、number(数字)

{{12.235| number:2}}

3)、uppercase , lowercase(大小写)格式化

{{“Hello”| uppercase}}

4)、json(数据)格式化

{{userObject| json}}

5)、limitTo(截取)格式化,数量限制 {{“StringObject” | limitTo : 3}}

6)、date 日期格式化

{{name | date : ‘yyyy-MM-dd hh:mm:ss’}}

‘yyyy’: 三人数字的年份(如AD 一 => 0001, AD 20拾 => 20拾)
‘yy’: 四位数字的年度,范围为(00-9玖)。(如AD 200一 => 0一, AD 2010 =>
拾)
‘y’: 1个人数字的年度,例如 (AD 一 => 1, AD 19玖 => 19玖)
AngularJS,’MMMM’: 月份 (January-December)
‘MMM’: 月份 (Jan-Dec)
‘MM’: 月份, padded (01-12)
‘M’: 月份 (1-12)
‘dd’: 日,范围为(01-31)
‘d’: 日 (1-31)
‘EEEE’: 星期,(Sunday-Saturday)
‘EEE’: 星期, (Sun-Sat)
‘HH’: 小时, 范围为(00-23)
‘H’: 小时 (0-23)
‘hh’: am/pm情势的钟点, 范围为(01-1二)
‘h’: am/pm形式的钟点, (一-1贰)
‘mm’: 分钟,范围为 (00-59)
‘m’: 分钟 (0-59)
‘ss’: 秒, 范围为 (00-59)
‘s’: 秒 (0-59)
‘.sss’ or ‘,sss’: 毫秒,范围为 (000-999)
‘a’: am/pm 标记
‘Z’: 四 位数字的时区偏移(+符号)(-1200-+1200)
‘ww’: ISO-860壹 年内的周数 (00-五三)
‘w’: ISO-8601 年内的周数 (0-53)

format 字符串也得以是以下预订义的地面化格式之一:
‘medium’: 等于en_US本地化后的 ‘MMM d, y h:mm:ss a’ (如:Sep 3, 20拾1二:05:08 pm)
‘short’: 等于en_US本地化后的 ‘M/d/yy h:mm a’ (如: 9/百分之三十 1二:0伍 pm)
‘fullDate’: 等于en_US本地化后的 ‘EEEE, MMMM d, y’ (如: Friday,
September 三, 2010)
‘longDate’: 等于en_US本地化后的 ‘MMMM d, y’ (如: September 三, 2010)
‘mediumDate’: 等于en_US本地化后的 ‘MMM d, y’ (如: Sep 三, 2010)
‘shortDate’: 等于en_US本地化后的 ‘M/d/yy’ (如: 9/十分三)
‘mediumTime’: 等于en_US本地化后的 ‘h:mm:ss a’ (如: 1贰:05:0八 pm)
‘shortTime’: 等于en_US本地化后的 ‘h:mm a’ (如: 1贰:0五 pm)
format 字符串能够分包固定值。那须要用单引号括起来 (如: “h ‘in the
morning'”)。如果要出口单引号,使种类中利用四个单引号(如: “h
‘o”clock'”)。

7)、orderBy(排序)格式化

orderBy:’age’:reverse
reverse是true表示降序、false表示升序

8)、filter(筛选&过滤)格式化

{{name | filter : ‘l’ | json}}

2.二、自定义过滤器

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <p>
            {{"Hello AngularJS and NodeJS" | cutString:15:'...'}}
            </p>
            <p>
                {{longString}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //向模块中添加过滤
            //用于裁剪字符,超过长度则截取,添加...
            app01.filter("cutString",function(){
                return function(srcString,length,addString){
                    if(srcString.length<length){
                        return srcString;
                    }
                    return srcString.substring(0,length)+addString;
                }
            });

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope,$filter) {
                $scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");
            });
        </script>
    </body>

</html>

运作结果:

AngularJS 12

练习1:

AngularJS 13

点击价格与名称能够展开排序,排序时显得向上或向下的箭头,在查找框中能够输入查询条件过滤数据。验证搜索框中的内容只好是字母与数字,不容许输入任何体系的字符。

练习2:

请自定义贰个过滤器完结敏感关键字过滤,在过滤器中得以准备3个敏感词数组,将敏感词替换来钦定的符号,私下认可为*号。
{{“This is some bad,dark evil text” | censor:”bad,dark,evil”:”happy”}}
彰显结果:
This is some happy,happy happy text

4、示例下载

 github仓库:https://github.com/zhangguo5/Angular02.git

叁.伍.壹、第1个自定义指令

演示代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1">

            <div my-Timer></div>
             <br/>
            <my-Timer></my-Timer>

        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", []);

            //在模块app01上定义curentTime指令
            app01.directive("myTimer",function(){
                return {
                    template:""+new Date().toLocaleString()+"",  //模板
                    restrict:"AE",  //可应用范围
                    replace:true //是否替换
                };
            });

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {

            });
        </script>
    </body>

</html>

运行结果:

AngularJS 14

因为使用了replace属性,所以div标签被替换了,别的restrict钦点为AE则标签能够看做成分与个性使用。

一、验证

angularJS中提供了诸多的证实指令,能够轻松的贯彻认证,只要求在表单元素上添加相应的ng属性,常见的如下所示:

<input Type=”text” ng-model=”” [name=””] [required=””]
[ng-required=””] [ng-minlength=””]
[ng-maxlength=””][ng-pattern=””][ng-change=””] [ng-trim=””]>

AngularJS 15

表单与表单元素都亟待经过name引用,请小心设置name的值。得到错误的详细参数能够在演示中看看。

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>验证</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <p>
                <label for="username">帐号:</label>
                <input type="text" id="username" name="username" ng-model="username" ng-required="true" />
                必填
            </p>
            <p>
                <label for="username">密码:</label>
                <input type="text" id="password" name="password" ng-model="password" ng-required="true" ng-pattern="/^[a-z]{6,8}$/" ng-trim="true"/>
                必填
                只允许6-8位小写字母
            </p>
            <p>
                密码的值:{{"["+password+"]"}}<br/>
                是否合法:form1.password.$valid={{form1.password.$valid}}<br/>
                是否非法:form1.password.$invalid={{form1.password.$invalid}}<br/>
                错误消息:form1.password.$error={{form1.password.$error}}<br/>
                是否修改:form1.password.$dirty={{form1.password.$dirty}}<br/>
                是否默认:form1.password.$pristine={{form1.password.$pristine}}<br/>
            </p>
            <p>
                表单信息:<br/>
                错误消息:form1.$error={{form1.$error}}<br/>
                是否合法:form1.$valid={{form1.$valid}}<br/>
                是否非法:form1.$invalid={{form1.$invalid}}<br/>
            </p>
            <p>
                <button ng-disabled="form1.$invalid">提交</button>
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {

            });
        </script>
    </body>

</html>

运作结果:

AngularJS 16

3.1.4、不绑定(ngNonBindable)

ngNonBindable指令告诉Angular编写翻译或绑定当前DOM成分的内容。那对于供给Angular忽略那么些成分中带有Angular指令和绑定的状态下很有用。那种境况能让您的网址实时展现源码。

<div>Normal: {{1 + 2}}</div><div
ng-non-bindable>Ignored: {{1 + 2}}</div>

脚本:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <p>
                被解析的表达式:1+2={{1+2}}
            </p>
            <p ng-non-bindable="true">
                不解析的表达式:1+2={{1+2}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
        </script>
    </body>

</html>

结果:

AngularJS 17

3.1.2、控制器(ng-Controller)

ngController指令给视图添加一个控制器,控制器之间能够嵌套,内层控制器能够使用外层控制器的对象,但转头不行。那是angular辅助基于“视图-模型-控制器”设计情势原则的严重性方面。

Angular中的MVC组件有:
模型 — 模型是3个域的天性集合;域被增大到DOM上,通过绑定来存取域属性。
视图 — 模板(实行数量绑定的HTML)会被突显到视图中。
控制器 —
ngController指令注解一(Wissu)个操纵器类;该类包涵了工作逻辑,在接纳后台使用函数和值来操控域中的属性。
小心,你也能运用$route服务概念3个路由来将控制器附加到DOM上。多个科学普及错误是在模板上海重机厂新使用ng-controller定义七个控制器。那将引起控制器被增大和实行一回。

3.1.3、包含(ng-Include)

获取、编写翻译并援引四个外表HTML片段(也足以是内部的)

私下认可意况下,模板U卡宴L被胁持为利用与行使文书档案相同的域名和研讨。那是经过调用$sce.getTrustedResourceUrl
完结的。为了从此外的域名和商业事务载入模板,你能够选拔 白名单化 或 包裹化
任一手段来作为可靠任值。参考 Angular的 强上下文转义。
其余,浏览器的 同源策略 和 交叉源财富共享(CO凯雷德S)
策略会愈来愈限制模板是还是不是能学有所成载入。例如,ngInclude
在装有浏览器上不可能举行交叉域请求,一些浏览不可能访问 file:// 等。

<ng-include src=”” [onload=””]
[autoscroll=””]></ng-include>
<ANY ng-include=”” [onload=””] [autoscroll=””]></ANY>
<ANY class=”ng-include: ; [onload: ;] [autoscroll: ;]”>
</ANY>

外表包罗:

表面包涵是指包罗二个单独的外表文件。

饱含时请小心中间页面地址要加引号,要求的是四个字符,要是不加会认为是四个变量。

header.html

<header>
    <h2>欢迎光临天狗商城</h2>
</header>

footer.html

<style>
    .cls1 {
        background: lightblue;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
</style>
<footer class="cls1">
    <h3>版本所有 违者必究</h3>
</footer>

d05.html

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <ng-include src="header"></ng-include>
            <ng-include src="'header.html'"></ng-include>
            <div ng-include="'footer.html'"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
            function regTest()
            {
                var reg1=new RegExp("\d","igm");
                var reg2=/\d/igm;

                var str="This is some bad,dark evil text";
                str=str.replace(/bad|dark|evil/igm,"Happy");
                console.log(str);

                //取出Hello Hello
                var str="<input value='Hello'/><input value='World'/>";
                //将value中的内容前后增加一个*
            }
            regTest();
        </script>
    </body>

</html>

运作结果:

AngularJS 18

中间含有:

先定义模板,钦点id与类型,模板中能够是即兴片段:

<script id=”p1″ type=”text/ng-template”>

引用模板,模板中得以应用angular表明式,引用的办法与外部蕴涵一样。

 

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <ng-include src="header"></ng-include>
            <ng-include src="'header.html'"></ng-include>

            <script id="template1" type="text/ng-template">
                您想购买的商品是:{{product}}
            </script>

            <ng-include src="'template1'" onLoad="product='SD卡'"></ng-include>
            <ng-include src="'template1'" onLoad="product='TF卡'"></ng-include>

            <div ng-include="'footer.html'"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
            function regTest()
            {
                var reg1=new RegExp("\d","igm");
                var reg2=/\d/igm;

                var str="This is some bad,dark evil text";
                str=str.replace(/bad|dark|evil/igm,"Happy");
                console.log(str);

                //取出Hello Hello
                var str="<input value='Hello'/><input value='World'/>";
                //将value中的内容前后增加一个*
            }
            regTest();
        </script>
    </body>

</html>

 

运转结果:

AngularJS 19

地点的结果都以“PCIe闪存卡”的来头是因为模板是先包涵再分析的,后定义的变量覆盖前边定义的,并不是一边蕴含一边渲染的。

3.3、事件

ng-blur 失去主题
ng-change 改变
ng-checked 被选择
ng-click 点击
ng-copy 复制
ng-cut 剪切
ng-dbclick 双击
ng-focus 获得核心
ng-keydown 按下键
ng-keyup 按键弹起
ng-mousedown 鼠标按下
ng-mouseenter 鼠标进入
ng-mouseleave 鼠标离开
ng-mousemove 鼠标移动
ng-mouseup 鼠标按下后反弹
ng-paste 粘贴
ng-submit 提交
ng-swipe-left 左滑动
ng-swipe-right 右滑动

稍稍异样的轩然大波供给引进外部模块帮助,如ng-swipe-left,首先添加引用:

<script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>

在概念模块时钦定要依靠的模块:

            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", ['ngTouch']);

 AngularJS 20

别的的步骤与利用普通事件相同了。

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style type="text/css">
            .circle{
                width: 100px;
                height: 100px;
                background: lightgreen;
                border-radius: 50px;
                position: absolute;
            }
        </style>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
            <h3 ng-init="left=200">left:{{left}}</h3>
            <div ng-swipe-left="left=left-10" ng-swipe-right="left=left+10"  class="circle" ng-style="{'left':left+'px'}"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", ['ngTouch']);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {});
        </script>
    </body>

</html>

运营结果:

AngularJS 21

相关文章