AngularJS实用基础知识_入门必备篇(推荐)
前言
今天来和大家学习一下AngularJS……
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序。
AngularJS 学习起来非常简单。
一、AngularJS指令与表达式
【AngularJS常用指令】
1、ng-app:声明Angular所管辖的区域，一般写在body或HTML上，原则上一个页面只有一个。
2、ng-model:把元素值（比如输入域的值）绑定到应用程序的变量中。
eg:<input type="text" ng-model="name"/>
3、ng-bind:把应用程序变量中的数据绑定到HTML视图中，可用表达式替代。
eg:<div id="div1" ng-bind="name">
</div>等效于<div id="div1" >{{name}}</div>
4、ng-init:初始化 AngularJS应用程序变量。
eg:<body data-ng-app="" ng-init="name=123">
5、表达式：{{}}绑定表达式，可以包含文字，运算符和变量。
但是表达式在网页加载瞬间会看到{{}}，所以可以用ng-bind=""替代。
eg:{{ 5 + "" + 5 + ',Angular' }}
【基本概念】
指令：AngularJS中，通过扩展HTML的属性提供功能。
所以，ng-开头的新属性，被我们成为指令。
二、AngularJS中的MVC中的作用域
【MVC三层架构】
1、model(模型):
应用程序中用于处理数据的部分。（保存或修改数据到数据库、变量等）。AngularJS中的Model特指的是：数据。
View(视图):用户看到的用于显示数据的页面。
Controller(控制器):应用程序中处理用户交互的部分。负责从视图读取数据，控制用户输入，并向模型发送数据。
2、工作原理：
用户从视图层发出请求，controller接收到请求后转发给对应的model处理，model处理完成后返回结果给controller，并在View层反馈给用户.
3、创建一个Angular模块，即ng-app所绑定的部分 ,需传递两个参数：
①模块名称：即ng-app所需要绑定的名称，ng-app="myApp"
②数组：需要注入的模块名称，不需要可为空。
eg:var app= angular.module("myApp",[]);
在Angular模块上，创建一个控制器Controller，需要传递两个参数。
①Controller名称，即ng-controller需要绑定的名称。ng-controller="myCtrl"
②Controllerd的构造函数：构造函数可以传入多个参数，包括$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上。
三、AngularJS过滤器
AngularJS中，过滤器可以使用一个管道字符（|）添加到表达式和指令中。
>>>系统内置过滤器：
currency:格式化数字为货币格式。
filter:从数组项中选择一个子集。
lowercase:格式化字符串为小写。
orderBy:根据某个表达式排列数组。
uppercase:格式化字符串为大写。
eg:
<p>{{"aBcDeF"|uppercase}}</p>
<p>{{"aBcDeF"|lowercase}}</p>
<p>{{123456|currency}}</p>
【自定义过滤器】
.filter('reverse',function(){ //可以注入依赖
return function(text){
if(!angular.isString(text)){
return "您输入的不是字符串！"
}else{
return text.split("").reverse().join("");
}
}
})
四、AngularJS中的 http && select && DOM操作
一、AngularJS中的http
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
二、AngularJS中的select
①使用数组作为数据源，其中，x表示数组的每一项。
默认会将x直接绑定到option的value中，而option显示的内容，由前面的x for...决定。
eg:
<section ng-model= "name" ng-options="x.site for x in sites"></section>
②使用对象作为数据源，其中，（x,y）表示键值对，x为键，y为值。
默认会将值y绑定到option的value中，而option显示的内容，由前面的x for...决定。
eg:
<section ng-model= "name" ng-options="x for (x,y) in sites"></section>
三、AngularJS中的DOM操作
①ng-disabled="true/false"
当传入true时，控件禁用。传入false时，启用。
<label>
<input type="checkbox" ng-model="mySwitch">是否同意
小希真萌！
</label>
<button ng-disabled="!mySwitch" class="btn btn-primary">点我!</button>
<p></p>
②ng-show
默认隐藏 传入true时显示
<label>
<input type="checkbox" ng-model="mySwitch1">是否
显示？
</label>
<button ng-show="mySwitch1" class="btn btn-primary">点我!</button>
<p></p>
③ng-hide
默认显示 传入true是隐藏
<label>
<input type="checkbox" ng-model="mySwitch2">是否隐藏？
</label>
<button ng-hide="mySwitch2" class="btn btn-primary">点我!</button>
<p></p>
④ng-click
定义了AngularJS中的点击事件。
只能触发绑定在Angular作用域中的属性与方法。
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
<button ng-click="func()">说一下感想吧！</button>
DOM操作附录：
eg:
先导入JS文件angular.js！！！
<script src="libs/angular.js"></script>
JS代码：
angular.module("app",[])
.controller("ctrl",function($scope,$rootScope){
$scope.count = 10;
$scope.func = function(){
alert("小希真萌！");
}
})
五、AngularJS中的表单验证
1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息
2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作 得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……
3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用<form novalidate></form>属性，禁用H5自带验证功能。
六、AngularJS中的动画
AngularJS中使用动画 ：
提供了动画效果，可以配合 CSS使用。
1、AngularJS 使用动画需要引入angular-animate.js库！
2、如果页面中没有自定义的模块（ng-app），可以直接绑定系统模块ng-app="ngAnimate"；
如果页面中已有自定义模块，可以在自定义模块后注入"ngAnimate"模块。
eg:angular.module("app",["ngAnimate"])
3、当调用相关指令控制元素显示隐藏时，会自动添加对应的class类；
ng-show/ng-hide 会移除/添加ng-hide
ng-if/ng-switch/ng-repeat等其他指令，需要分别设置显示后和隐藏后的class样式；
显示后：.ng-enter-active,.ng-leave{}
隐藏后：.ng-enter,.ng-leave-active{}
七、AngularJS中的路由
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
eg:angular.module("app",["ngRoute"])
3.即将超链接改为路有格式：
eg:<a href="#/page1" rel="external nofollow" >page1</a>
4.在config中，注入$routeProvider，进行路由配置：
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/page1',{template:'这是page1页面'})
.when('/page2',{template:'这是page2页面'})
.when('/page3',{template:'这是page3页面'})
.otherwise({redirectTo:'/'});
})
5、在页面的合适位置，添加ng-view，用于承载打开的页面
<div ng-view></div> <ng-view></ng-view>
【路由参数对象中可选属性】
1.tempalte：自定的HTML模板，会加载在ng-view中
2.tempalteUrl:导入外部的HTML模板，为了避免冲突外部的HTML只需要保留body内部的代码即可；
3.redirectTo：重定向于某个页面，一般用于.otherwise()中；
4.controller：在当模板上执行的controller函数，生成新的scope
以上这篇AngularJS实用基础知识_入门必备篇(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
使用AngularJS对表单提交内容进行验证的操作方法
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine
-
详解angularJS自定义指令间的相互交互
AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用.默认值为false不能使用嵌套,true为可以使用嵌套.在哪个标签上使用ng-transclude就在哪个标签内进行嵌套. 代码示例:(将hello.hi标签进行替换同时span标签嵌套div内) <script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('
-
AngularJS实现select的ng-options功能示例
本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res
-
详解使用angularjs的ng-options时如何设置默认值(初始值)
这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b
-
详细AngularJs4的图片剪裁组件的实例
本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考.希望此文章对各位有所帮助. jQuery里有一个强大的图片剪裁插件,叫cropper.js.这是大神的GitHub地址:https://github.com/fengyuanchen/cropper 首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件.npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到
-
AngularJS中使用three.js的实例详解
AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr
-
AngularJS常见过滤器用法实例总结
本文实例讲述了AngularJS常见过滤器用法.分享给大家供大家参考,具体如下: 过滤器用来格式化需要展示给用户的数据.在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器.以下是常用的过滤器. 大小写过滤器 {{ name | uppercase }} 大写过滤器 {{ name | lowercase}} 小写过滤器 实例:(大写过滤器) <div ng-controller='myController'> 姓氏: <input type="text&quo
-
AngularJS使用ocLazyLoad实现js延迟加载
最近开发一个系统遇到了一个问题,用angular路由一个html片段,该片段需要使用一个js插件来实现一个富文本编辑器.关键问题在于必须要在片段加载后通过js与dom元素进行绑定.一开始想当然以为直接把js代码写在代码段里不久ok了,然而经过实验,路由将html片段插入页面时只能读取css,无法解析并执行js代码. google了半天发现了很多angular+requireJs的解决方案,但我觉得对于我这个场景并不适合,因为requirejs本质是一个模块加载器,按需加载只是他的副业,我们用它应
-
AngularJS实用基础知识_入门必备篇(推荐)
前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q
-
Python基础知识_浅谈用户交互
1.raw_input(): raw_input()是python 的内建函数,通过读取控制台的输入与用户实现交互. raw_input()可以让用户输入字符串(即等待用户输入内容),并存放到一个变量里. #!/usr/bin/env python # -*- coding:utf-8 -*- #将用户输入的内容赋值给变量user user = raw_input("请输入用户名:") #将用户输入的内容赋值给变量pwd pwd = raw_input("请输入密码:&quo
-
ThinkPHP3.1基础知识快速入门
在当今众多的MVC框架中,ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架,其遵循Apache2开源协议发布,自从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,尤其注重开发体验及易用性,并且拥有众多的原创功能和特性,为WEB应用开发提供了强有力的支持.是众多PHP开发人员的首选.本文就ThinkPHP3.1基础知识做一简述. 1.目录结构 ThinkPHP最新版本可以在官方网站(http://thinkphp.cn/down/framewor
-
servlet基础知识_动力节点Java学院整理
Servlet是一门专门用于开发动态web资源的技术,Sun公司在其API中提供了一个Servlet接口(当然,我们不会去直接实现这个接口,而是去继承其实现类会更好),因此,狭义的Servlet是指这个接口,广义的Servlet是指任何实现了这个Servlet接口的类. 使用Servlet开发一个动态web资源,其实就是开发一个Java程序向浏览器输出数据. Servlet其实就是一个运行在服务器上得Java程序,Servlet是J2EE十三门技术中的一种,因此我们不能去看J2SE的API文档,
-
AngularJS 最常用的八种功能(基础知识)
AngularJS 使用基础知识 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repeat="person in pers
-
3000字扫盲shell基础知识(新手必备)
不论前端还是后端,再学会Linux的基础上,还应该学会写一些简单的Shell.不止是工作,日常中想做一些东西,如果手动做就很累人也费时间,如果你会用Shell脚本处理就很简单了,本文普及的shell的一些基础知识.后面还会持续更新. shell基础语法之变量 shell 变量命名 变量只能由大小写字母,数字和下划线组成. 变量名称不能以数字开头. 变量可以存储数字类型或者字符串类型. 变量赋值等号两边不能有空格. 字符串的变量可以用单引号或者双引号括起来. 定义变量: ➜ ~ name="xia
-
C语言入门之基础知识详解
一.思维导图 内容不限于此思维导图 二.环境搭建 对于老手,自动跳过这一趴吧,或者也可以看一下我有没有啥纰漏,毕竟小白需要这一趴. 编译器很多,大部分老师会在学生学习C语言的时候推荐使用VC,不带语言提示器的那种,说是可以提高学生的编码能力.我也不知道到底是不是这么一回事儿.我推荐使用VS,这样学的快,函数记不住的问题很严重吗?项目的车轮碾压过去,再记不住也得记住吧!!! 更何况这个系列到后面是会有需要用文本文件编程写项目的阶段. 下载VS2019社区版,不要标新立异选那些最新版的,出了问题到时
-
Asp.net基础知识扫盲篇
asp.net基础知识篇-中文扫盲篇 1..NET是什么? .Net全称.NET Framework是一个开发和运行环境, 该战略是微软的一项全新创意, 它将使得"互联网行业进入一个更先进的阶段, .NET不是一种编程语言. 简单说就是一组类库框架, .NET开发支持C#.VB.NET.J#.Jsript和Managed C++等. C#是.NET Framework框架支持的一种主力开发语言, 可用于开发ASP.NET网站, Windows 程序,控制台程序,甚至于手机软件 2.ASP.NET
-
sql注入之必备的基础知识
什么是SQL注入(SQL Injection) 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响)动态SQL命令,或作为存储过程的输入参数,这类表单特别容易受到SQL注入式攻击. mysql常用注释 # --[空格]或者是--+ /*-*/ 在注意过程中,这些注释可能都需要进行urlencode. mysql认证绕过 ;%00 ' or 1=1 # ' /*!or */
-
EJB基础知识(入门必看)
什么是EJB 可移植的,可重用的,可伸缩的业务应用程序的平台 为什么选择EJB 1. 易用性, 由EJB容器提供许多的服务, 开发人员只需要关注业务本身即可 2. 集成解决方案套装, 由应用服务器提供大量服务 3. 开放的JavaEE标准 4. 广泛的厂商支持 5. 稳定, 高质量的代码基础 6. 集群, 负载均衡, 故障转移 7. 易于开发允许可重用的组件 EJB容器提供的服务 1. 集成 2. 池化 3. 线程安全 4. 状态管理(针对有状态会话bean) 5. 消息服务器(针对消息驱动be