angular之入门基础

简介: angular之入门基础

一、angular


1,angular 的有引入:必须在文档流之前引入(需要注意的是 angular 和原生的js 不互通)


2,angular 是由谷歌开发的框架,奇特点是对于DOM的操作变的更加的简介;代码量大大的降低了,对数据的操作变的更加的灵活(通过控制数据的变化,间接的控制了DOM节点。脏检查(一旦某一个数据发生变化,angular就会在第一时间检测到这个元素,angular一直在实时检查中),angular的模块化也让开发变的更加的方便简洁);


3.angular 指令


ng-app="":绑定在标签上,声明一个angular的应用程序,证明这个标签里可以写入angular代码。一个页面只允许一个ng-app出现。


ng-init=“”在标签里声明数据。


4.{{ }} 绑定数据到Dom节点,但在其绑定大框好前加字符串会显示在前台。


5.ng-bind 绑定数据到Dom节点

dd73673528484a5bb14b11187251d3ba.png


6.ng-model 数据的双向绑定。并可实时监控并实时输出


e40745799b8c4589906105ce64da54f8.png


7.ng-show:相当于dispaly 的block 和none (true为显示,false为隐藏);


1b376fe10fc54e538c9213ee5f4466fe.png


8.ng-repeat:循环

6c16b66065274154aa04707dab9f4733.png

9.ng-click=“” angular的事件

1241e8bdd1e4406e94a58ed29d7192fc.png

10.angular 控制器


(1)let app = angular.module('myApp',[]);获取angular 的应用程序


(2)声明控制器


app.controller('mainCtr',function( $secope ){})


// 用angular控制器声明创建的变量和函数,最后要用angular的方式去调用他们


// $scope 声明所有变量 能被dom节点调用


59da4671166e4d81bac164c1d488d9ef.png11.angular 控制器中创建的angular变量和函数只能作用域当前控制器及其子控制器。

在其他的子控制器里,调用不了其他子控制器


793b770b9562415abb79438c00f2fba0.png


12.自定义过滤器(去重)


d581ab3d990b472eb4717fe16c5c2f8e.png



13.angular 配置路由


(1)获取angular 应用程序,并加入路由模块


(2)要配置angular路由,必须要引入angular路由的js文件,而且这个文件必须和当前引入的angular。js是同一个版本


(3)文档里必须用a标签引入


(4)js路由模块里必须由专用的路由来调用


14.angular 配置模块


angular的模块开发,在js中引入模块,在DOm节点中进行模块调用


(1)获取angular的应用程序


(2)用模块函数directive 进行调用,传两个值,第一个值为调用模块名称,需要与html文档一样,第二个为一个匿名函数

b22f560a780b44bd8cd8e447165e5eff.png


15.angular 的http请求

(1)获取应用程序

(2)设置控制器传参两个值,$scope,$http



dccc2571d698412cbe1787c1a90ec2fe.png


16.勾选框 显示后台数据

97e85cebf6434313b08f4345d6c8d5c2.png


17.过滤器


(1)angular 的过滤器是用管道字符 | 添加到表达式和指令中

(2)lowercase 将字符串格式转化为小写字母

42f49fd08274415f897e279c279cec88.png



(3)currency 将单个的数字格式转化为货币(如果数字存在于字符串中,则不会被过滤)


7ccdf1418c634eb7b3c78b71dabb41b2.png


(4)fillter 从数组选项中根据指定条件选择一个子集

e5f890a2968e42eb9a743163d2c611d6.png

(5)uppercase 将字符串格式化为大写字母

8f20226dbd144c0b9b85ee897e656a37.png


( 6 )date 过滤器,将数字作为毫秒数,转化成时间格式


{{ 554545454564 | date:" yyyy-MM-dd HH:mm:ss " }}


( 7 )number 按照规定格式过滤数字


如果这个数字小数点后的位数 3那么,最多取 三位,除非对位数进行设置哦,比如:number:4

c18cbc0c937c436fbf9e2a910a6d7a9e.png


( 8 )limitTo:截取,例如:从前面往后开始截取8位;如果要从后面开始往前截取,则将limitTo 的值给成负数就好。

055e0f0cff9d41b8bbf0e434ea48c0fd.png

(9)orderby 按照规定的字段升序排序。值为true的时候为降序,false的时候为升序

4648645e7f284ba9a31ee44aff454526.png

(10) 将字符反转


0e82e05a669d468b957946faf339c4bb.png

720fb28ff4b84bf595a9d73613aafd94.png


目录
相关文章
|
6月前
1分钟入门angular动画效果animations,敲简单滴哟~~☺
1分钟入门angular动画效果animations,敲简单滴哟~~☺
|
JavaScript 前端开发 Java
【Angular教程】路由入门
【Angular教程】路由入门
359 0
【Angular教程】路由入门
|
3月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
50 0
|
6月前
1分钟入门angular动画效果animations,敲简单滴哟~~
1分钟入门angular动画效果animations,敲简单滴哟~~
1分钟入门angular动画效果animations,敲简单滴哟~~
|
前端开发 JavaScript
Angular框架入门指南
Angular框架入门指南
232 0
|
前端开发 JavaScript
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
457 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
|
JavaScript
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
392 0
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
初露锋芒 Angular6 入门项目 - 4 下
初露锋芒 Angular6 入门项目 - 4 下
121 0
|
缓存 API 数据库
初露锋芒 Angular6 入门项目 - 4 上
初露锋芒 Angular6 入门项目 - 4 上
165 0
|
JavaScript 前端开发 测试技术
初露锋芒 Angular6 入门项目 - 3
初露锋芒 Angular6 入门项目 - 3
142 0