【Angular1】基础使用及各类方法

【Angular1】基础使用及各类方法
Angular的先决条件
- 在head标签中引入angular.min.js文件
Angular的初步使用
- 在body标签中添加ng-app
- angularJS中表达式的形式是一对嵌套的大括号{{表达式的内容}}
Angular的双向绑定
- 在保证配置完成之后在进行双向绑定
- Angular的双向绑定的使用是通过ng-model实现的
  - 举例input
    
    用户名：<input ng-model="username" /><br> 密码：<input ng-model="password" type="password" /><br> //下方的username和password会实时的根据input中输入进行更新 {{username}}-{{password}}
    1
    2
    3
    4
Angular的初始化
- 在body标签中使用ng-init进行初始化，可以对页面刚开始呈现时所需要显示的字段进行编辑
- 举例input
  - <body ng-app ng-init="username='张三'"> //在页面刚开始显示时用户名的值为张三用户名：<input ng-model="username" /><br> 密码：<input ng-model="password" type="password" /><br> {{username}}-{{password}} body>
    1
    2
    3
    4
    5
    6
Angular控制器和点击事件
- 在单击事件中绑定方法，并在控制器中定义方法
- 举例两数之和
  - <body ng-app="myApp" <--myApp对应的是script中angular.module定义的myApp--> ng-controller="myController" <--myController对应的是script中的myController-->> num1<input ng-model="x" /> + num2<input ng-model="y" /> <button ng-click="add()"<--绑定事件-->>=button>{{z}} body> <script> var app = angular.module("myApp", []); app.controller("myController", function ($scope) { $scope.add = function () {//在控制器中定义方法 $scope.z = parseInt($scope.x) + parseInt($scope.y); } }) script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
Angular循环遍历指令
- 在控制器中创建需要遍历的集合，在body中使用ng-repeat来遍历list集合
- ng-repeat=“变量 in 集合名称”(集合名称不一定非要是list)
- 举例遍历名称
  - <body ng-app="myApp" ng-controller="myController"> <div ng-repeat="name in list"><--循环遍历list集合--> {{name}} div> body> <script> var app = angular.module("myApp", []); app.controller("myController", function ($scope) { $scope.list = ["张三", "李四", "王五"];//创建list集合 }) script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
Angular获取行索引
- 在Angular中ng-repeat中获取索引只需要$index
- 举例单击事件删除行
  - <td> <button type = "butten" ng-click = "deleTableByRow($index)">删除butten> <--在deleTableByRow()方法中可以直接传入参数$index来获取行索引--> td>
    1
    2
    3
    4
Angular条件判断
- 使用ng-if=""来对参数进行判断
- 举例
  - <span ng-if="num!=3">显示num不等于3的情况span>
    1
Angular选择
- 使用ng-options指令指定select内容的数据源指令
- 语法：ng-options=“变量.属性1 as 变量.属性2 for 变量 in 数据集合”
- 变量是一个实体类，是数据库中的一条数据，as前面的部分是值value(举例：id)，as后面的部分是显示的文本(举例：name)
- 举例查询数据(1，北京；2，上海)数据集合为itemList
  - <select ng-options = "item.id(举例：1) as item.name(举例：北京) for item in itemList">select>
    1
Angular关于布尔属性的指令
- angularjs提供了两个Boolean指令
- ng-true-value该指令的含义为，当Boolean类型为true时，所对应的value值为多少
- 举例勾选菜单(勾选返回的值为1)
  - <input type="checkbox" ng-model="entity.status" ng-true-value="1">
    1
- ng-false-value该指令的含义为，当Boolean类型为false时，所对应的value值为多少
- 举例勾选菜单(不勾选返回的值为0)
  - <input type="checkbox" ng-model="entity.status" ng-true-value="0">
    1
Angular的ng-checked指令(是否必输)
- 该指令用于input标签中的checkbox标签，用来显示复选框是否需要勾选
- 使用方式为ng-checked = “布尔值”
- 举例是否为必输项
  - 必输项 <input type="checkbox" ng-checked="true" /> 非必输项 <input type="checkbox" ng-checked="false" />
    1
    2
    3
    4
Angular的bg-bind-html指令(显示html的内容)
- 当后台返回数据是html数据，但要在界面解析该html，那就不能使用表达式了，需要使用指令来完成
- 举例后台返回表头数据
  - <div class = "..." ng-bind-html = "item.title"> <--数据处理--> div>
    1
    2
    3
Angular的自定义模块使用($scope)
- $scope的使用贯穿了Augular应用
- $scope与数据模型相关联，同时也是表达式执行的上下文的**“交通工具”**
- $sco p e 在 * * 视图层 * * (Vi e w) 和控制层 (C o n t ro ll er) 之间建立了通道，而基于作用域视图在我们修改了 * * 数据 (n g - m o d e l 所绑定的数据) * * 之后会立即更新$ scope
- $scope在发生改变的同时也会立刻重新渲染视图
- 操作步骤
  - 定义模块
    
    使用方式：angular.module(“模块名称”,[])
    
    参数说明：
    
    模块名称为标签中的ng-app属性所定义的值
    []是一个数组，元素为其他模块，若该模块的使用不需要引入其他模块，则为空
    
    举例定义一个名称为myApp的模块
    
    var app = angular.module("myApp",[]);
    1
  - 引入模块
    
    在body标签中进行引入
    
    举例引入名称为myApp的模块
    
    <body ng-app = "myApp">
    1
  - 定义控制器Controller
    
    var app = angular.module("myApp",[]);
    1
    
    使用方式：定义模块变量(app).controller(“控制器名称”,function($scope){})
    
    参数说明：
    
    控制器名称是要在body标签中引入的名称
    函数类型参数为$scope，编写业务逻辑对数据进行控制
  - 引入控制器
    
    在body标签中进行引入
    
    举例引入myController控制器
    
    <body ng-app = "myApp" ng-controller="myController">
    1
Angular的内置服务

 $http
- 前端实现对数据的实现，我们就需要从后端进行获取，一般采用内置服务$http来实现数据访问
- ```
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script src="angular.min.js">script>
<script type="text/javascript">
	var app = angular.module("myApp",[]);
	app.controller("myController",function($scope,$http){
		$scope.findList = function(){
			$http.get("data.json").success(function(response){
				$scope.list	= response ;
			});
		}
	});
script>
head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
	<div ng-repeat="o in list">
		姓名：{{o.name}}  年龄：{{o.age}}
	div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
```
$location
- 该服务可以分析浏览器地址栏中的URL，可以在应用中较为方便的使用URL中的内容，在地址栏中修改URL会影响 $l oc a t i o n 服务，而在$ location中修改URL，也会影响到地址栏中
- 基本用法
  - search方法
    
    使用该服务最常用的方法，该方法可以获取到地址栏的参数，通常使用search()方法
    
    使用方法：$location.search();
    
    search方法也可以修改url的参数部分
    
    使用方法：$location.search(‘字段名称’,‘修改数值’);
    
    可以一次性修改多个
    
    使用方法：
    
    $location.search({ id: '666', taskContract: 'abc' })
    1
    2
    3
    4
    
    可以删除属性(若存在则删除，若不存在，则相当于没有修改过)
    
    使用方法：$location.search(‘id’, null)；
    
    注意事项：
    
    该方法会返回一个json对象，要获取指定的参数对应的值
    举例：获取json对象中id的值
    var id = $location.search().id
    
    地址栏的?前需要加#，是angularJS的地址路由的书写形式
  - absUrl()
    
    获取当前完成的url路径
    使用方法：$location.absUrl();
  - host()
    
    获取当前url的主机名
    使用方法：$location.host();
  - port()
    
    获取当前url端口
    使用方法：$location.port();
  - hash()
    
    获取当前url的哈希值
    可以修改url的哈希值部分
    使用方法：$location.hash();
  - path()
    
    获取当前url的子路径(当前url#后面的内容，不包含参数)
    可以修改替换url的哈希值部分($location.path(‘/testreplace’).replace()😉
    使用方法：$location.path();
  - protocol()
    
    获取当前url协议
    使用方法：$location.protocol();
  - url()
    
    获取当前url路径(当前url#后面的内容，包含参数和哈希值)
    可以修改url的子路径部分
    使用方法：$location.url();
$sce
- 该服务主要用于angularJS的信任政策，在做高亮查询的时候，如果不用该服务做信任，前端页面是不能正确显示内容的
- 如果要实现对HTML的信任政策，需要用到服务提供的一个方法trustAsHtml,该方法的作用是将一个文本类型的HTML转换成一个解析运行之后的HTML，类似的还有trustAsJs方法
- ```
var data = "手机";
$sce.trustAsHtml(data)
1
2
```
$interval
- 该服务是用来处理一些间歇性的事情的
- 使用方式：
  - $interval(执行的函数,间隔的毫秒数,运行次数);
  - 运行此时可以缺省，即表示无限循环执行该函数
- cancel
  - 取消执行可以使用cancel方法
  - 使用方式：
    
    $interval.cancel(time);
    1
- 举例秒杀服务
  - $scope.second = 10; time= $interval(function(){ if($scope.second>0){ $scope.second =$scope.second-1; }else{ $interval.cancel(time); alert("秒杀服务已结束"); } },1000);
    1
    2
    3
    4
    5
    6
    7
    8
    9
- 我们可以通过$interval来实现倒计时的功能
AngularJS中的变量监听
- 在Angular中，对于变量的监听使用 $sco p e 中的$ watch()方法
- 使用方式： $sco p e .$ watch(‘变量’,function(newValue,oldValue){});
  - $scope.$watch('entity.goods.category1Id',function(newValue,oldvalue){ itemCatService.findByParentId(newValue).success(function(data) { $scope.itemCat2List = data; }); });
    1
    2
    3
    4
    5
AngularJS的过滤器–filter
- 使用方式：
  - app.filter("过滤器名",[ '需要引入的服务',function(需要引入的服务){ return function(data){ } }]);
    1
    2
    3
    4
    5
- 注意：
  - 第一个需要引入的服务参数需要使用引号括起来，表示该服务需要加载进来
  - function中的参数不需要，因为这个函数需要使用该服务，需要传进来参数
  - data表示过滤前的内容
  - 返回值就是经过过滤后的内容
- filter的使用
  - <div class="attr" ng-bind-html="item.title | trustHtml">div>
    1
相关阅读:
Kafka消费者组重平衡（一）
【毕业设计】基于Django与深度学习的股票预测系统
 【云原生】SpringCloud系列之服务调用OpenFeign（基本概念和使用步骤）
记录一次坑｜包版本不一致产生的问题的排查过程
 Dubbo架构设计及入门案例
 Django（根据Models中模型类反向生成数据库表）—— python篇
 HTML登录页面
 SpringMVC之自定义注解
 ChatGPT-4o模型功能介绍
 集合_HashMap_初始容量为什么是2的n次方数
原文地址：https://blog.csdn.net/ASW262623/article/details/126039954

Angular的先决条件

Angular的初步使用

Angular的双向绑定

Angular的初始化

Angular控制器和点击事件

Angular循环遍历指令

Angular获取行索引

Angular条件判断

Angular选择

Angular关于布尔属性的指令

Angular的ng-checked指令(是否必输)

Angular的bg-bind-html指令(显示html的内容)

Angular的自定义模块使用($scope)

操作步骤

定义模块

引入模块

定义控制器Controller

引入控制器

Angular的内置服务

$http

$location

基本用法

search方法

absUrl()

host()

port()

hash()

path()

protocol()

url()

$sce

$interval

cancel

AngularJS中的变量监听

AngularJS的过滤器–filter

filter的使用