未分类

www6766com如何使用angularJs_AngularJS_脚本之家

19 3月 , 2020  

本期更新,博主将给大家享受部分AngularJs常用的片段性质和方法,AngularJS
是由 Google 的职员和工人 Miško Hevery 从 2010年早先入手开拓。那是三个百般好的构想,该类型近期已由 Google正式援助,有一个全职的开销共青团和少先队三番三遍支付和维护那么些库。AngularJS 是一个JavaScript 框架。它是三个以 JavaScript
编写的库。由此,有一定JavaScript底工的对象会更易于通晓,个中的片段用法也可参照Javascript的运用方法。

一、AngularJS入门之指令与表明式

AngularJS 通过 指令 扩张了 HTML,且经过 表明式 绑定数据到 HTML。

1、ng-app:申明Angular所管辖的区域。平常写在body或html上,原则上叁个页面唯有三个;

2、ng-model:把成分值绑定到应用程序的变量中。

3、ng-bind:把应用程序变量中的数据绑定到 HTML视图中。可用表达式{{
}}代替;

{{name}}

4、ng-init:带头化 AngularJS应用程序中的变量。

5、表达式: {{}}
绑定表明式,能够分包文字、运算符和变量。但表明式在网页加载瞬间拜见到{{}},所以能够用ng-bind=""替代

{{ 5 +""+ 5 + ',Angular'}}

1、指令:AngularJS中,通过增添HTML的性质提供成效。所以,ng-带头的新属性,被大家改为指令

  AngularJS入门   {{name}}  我的第一个表达式: {{ 5 +""+ 5 + ',Angular'}}    // var input1 = document.getElementById;// var div = document.getElementById;// // input1.onkeyup = function(){// div.innerHTML = input1.value;// }// $.keyup{// $.html;// }); 

二、AngularJS中的MVC与功用域

[MVC三层布局]

1、Model:应用程序中用于拍卖数据的某些。。AngularJS中的Model特指的是:数据

View:客户观察的用于体现数据的页面;

Controller:应用程序中管理客户人机联作的部分。担当从视图读取数据,调整客商输入,并向模型发送数据。

2、干活规律
客户从视图层发出央求,controller选拔到央浼后转发给对应的model管理,model管理到位后回来结果给controller,并在view层反馈给顾客。

关键用于CRUD类应用,不相符游戏开拓和DOM操作

创设叁个Angular模块,即ng-app所绑定的有些,需传递多少个参数:

① 模块名称,即ng-app所急需绑定的称号。ng-app=”myApp”

② 数组:须求注入的模块名称,无需可为空。

var app = angular.module;

在Angular模块上,创设三个调控器Controller,须求传递八个参数

① Controller名称,即ng-controller需绑定的名目。ng-controller=”myCtrl”


Controller的布局函数:布局函数能够流传四个参数,包蕴$scope/$rootScope以至各类系统内置对象;

[AngularJS中的成效域]


$scope:有个别成效域,注解在$scope上的性子和方式,只好在近期Controller中利用;


$rootScope:根作用域,表明在$rootScope上的脾气和艺术,能够在ng-app所含有的任何区域选择(无论是不是同一Controller,或是还是不是在Controller满含范围中卡塔尔(قطر‎。

>>>
若未有行使$scope声明变量,而直白在html中动用ng-model绑定的变量成效域为:

1.假若ng-model在有些ng-controller中,则此变量会暗中同意绑定到当前Controller的$scope上;

2.万一ng-model未有在其它一个ng-controller钟,则此变量将绑定在$rootScope上;

app.controller("myCtrl",function{//$scope.name = "name1";$rootScope.age = 14;$scope.classes = {name:"H51701",num:"33"};});app.controller{});

三、Angular过滤器

AngularJS中,过滤器能够利用叁个管道字符增加到表达式和下令中。

>>> 系统内置过滤器:

currency格式化数字为货币格式。

filter从数组项中筛选三个子集。

lowercase格式化字符串为小写。

orderBy依据有个别表达式排列数组。

uppercase格式化字符串为大写。

      {{"aBcDeF"|uppercase}} {{"aBcDeF"|lowercase}} {{123456|currency}}  请输入筛选信息:   
姓名 年龄 成绩
{{item.name}} {{item.age}} {{item.score}}

{{“123456″|reverse}}

四、Angular服务Service

1、内置服务:

>>>使用内置服必须得在controlller中经过函数的参数注入进来!!!!

$location :重临当前页面包车型地铁 U奇骏L 地址;

$http: 服务器必要数据,相通于AJax;

$timeout :对应了 JS window.setTimeout 函数。

$interval :对应了 JS window.setInterval 函数。

     {{local}}

{{gongneng}}

将255转为16进制:{{hexafy}}

{{123|filt}}

{{123|filt1}}

factory 是贰个函数用于重返值,平常大家应用 factory
函数来测算或重临值。(factory使用上,与service差异超级小卡塔尔(قطر‎

       [功能]
 {{gongneng}}   255转成16进制为:{{num}}     angular.module .controller("ctrl",function{ $scope.gongneng = hexafy.gongneng; $scope.num = hexafy.myFunc .factory{ var obj = { gongneng : "将转入的数字,转为16进制", myFunc:function{ return x.toString; } }; return obj; }) 

www6766com,1、在AngularJS中,Service,factory都是根据provider达成的。

2、在provider中,通过$get(State of Qatar方法提供了factory的写法,用于重返value/service/factory。;

3、provider是两种自定义服务中,独一能够写进config配置阶段的一种。

万一服务,应当要在结构阶段实践,那么必得选用provider。不然,经常选用Service或factory

       [功能]
 {{gongneng}}   255转成16进制为:{{num}}     angular.module /*在配置阶段声明procide服务!*/ .controller("ctrl",function{ $scope.gongneng = hexafy.gongneng; $scope.num = hexafy.myFunc /*定义一个provider服务*/ .provider{// this.gongneng = "将转入的数字,转为16进制"; this.$get = function(){ var obj = { gongneng : "将转入的数字,转为16进制", myFunc : function{ return x.toString; } } return obj; } }) 

五、Angular中的$http

$http 是 AngularJS 中的壹当中央服务,用于读取远程服务器的多寡。

          H5-1701班级信息表      姓名

年龄

爱好

语文成绩

数学成绩

总分

六、Angular中的select

里面,x表示数组的各项。

暗许会将x直接绑定到option的value中。

而option显示的剧情,有目前的x for… 决定

内部,表示键值对,x为键,y为值。

暗许会将值y绑定到option的value中.

而option展现的内容,有眼下的x for… 决定

     *{ margin: 10px; }       您选择的是:{{name}}  

序号

姓名

{{$index +1}}

{{item}}

七、Angular中的DOM与事件

ng-disabled=”true/false” 当传入true时,控件禁止使用。传入false是,启用;

ng-show 暗许隐瞒 传入true时显示;

ng-hide 暗中认可突显 传入true是掩饰;

ng-click定义了AngularJS中的点击事件。

只得触发绑定在Angular功效域中的属性与办法。

     *{ margin: 10px; }    是否同意我是帅哥!  点我!   是否显示?  点我!   是否隐藏?  点我!  点我! {{ count }} 说一下感想吧!    angular.module .controller("ctrl",function{ $scope.count = 10; $scope.func = function; } }) 

八、Angular表单和输入验证

[AngularJS中的表单验证]

1、表单中,常用的验证操作:

$dirty表单有填写记录

$valid字段内容合法的

$invalid字段内容是违规的

$pristine 表单没有填写记录

$error 表单验证不经过的错误新闻

2、验证时,需给表单,及必要表明的input,设置name属性:

给form及input设置name后,会将form表单音信,暗中同意绑定到$scope作用域中。故,能够行使
formName.inputName.$验证操作 获得印证结果:

举个例子说:formName.inputName.$dirty = “true” 表单被填写过

formName.inputName.$invalid = “true” 表单输入违规

formName.inputName.$error.required = “true” 表单必填但未填

$error扶植的证实有:required/minlength/maxlength/pattern/email/number/date/url等。。。

3、为防止矛盾,举个例子利用type=”email”时,H5也会开展求证操作。如若只想接收AngularJS验证,能够选择质量,禁止使用H5自带验证作用;

     .row{ margin-bottom: 10px; } .row .col-xs-5{ text-align: center; } .suc{ border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba; box-shadow: inset 0 1px 1px rgba; } .suc:focus{ border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba, 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba, 0 0 6px #67b168; } .err{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba; box-shadow: inset 0 1px 1px rgba; } .err:focus{ border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba, 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba, 0 0 6px #ce8483; }        用户注册       {{user.pwd}} 

以上正是本文的全体内容,希望本文的剧情对咱们的读书也许干活能拉动一定的帮扶,同期也可望多多关照脚本之家!


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图