本文详细介绍了AngularJS的基础使用，包括先决条件、初步使用、双向绑定、初始化、控制器、点击事件、循环遍历、条件判断、选择、布尔属性指令等。此外，还深入讲解了内置服务如$http、$location、$sce和$interval的用法，以及变量监听和过滤器的应用，帮助读者全面掌握AngularJS核心概念。
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}}
-
-
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>
-
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>
-
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>
-
Angular获取行索引
-
在Angular中ng-repeat中获取索引只需要$index
-
举例单击事件删除行
-
<td> <button type = "butten" ng-click = "deleTableByRow($index)">删除</butten> <--在deleTableByRow()方法中可以直接传入参数$index来获取行索引--> </td>
-
Angular条件判断
-
使用ng-if=""来对参数进行判断
-
举例
-
<span ng-if="num!=3">显示num不等于3的情况</span>
-
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>
-
Angular关于布尔属性的指令
-
angularjs提供了两个Boolean指令
-
ng-true-value该指令的含义为，当Boolean类型为true时，所对应的value值为多少
-
举例勾选菜单(勾选返回的值为1)
-
<input type="checkbox" ng-model="entity.status" ng-true-value="1">
-
-
ng-false-value该指令的含义为，当Boolean类型为false时，所对应的value值为多少
-
举例勾选菜单(不勾选返回的值为0)
-
<input type="checkbox" ng-model="entity.status" ng-true-value="0">
-
Angular的ng-checked指令(是否必输)
-
该指令用于input标签中的checkbox标签，用来显示复选框是否需要勾选
-
使用方式为ng-checked = “布尔值”
-
举例是否为必输项
-
必输项 <input type="checkbox" ng-checked="true" /> 非必输项 <input type="checkbox" ng-checked="false" />
-
Angular的bg-bind-html指令(显示html的内容)
-
当后台返回数据是html数据，但要在界面解析该html，那就不能使用表达式了，需要使用指令来完成
-
举例后台返回表头数据
-
<div class = "..." ng-bind-html = "item.title"> <--数据处理--> </div>
-
Angular的自定义模块使用($scope)
-
$scope的使用贯穿了Augular应用
-
$scope与数据模型相关联，同时也是表达式执行的上下文的**“交通工具”**
-
s c o p e 在 ∗ ∗ 视图层 ∗ ∗ ( V i e w ) 和控制层 ( C o n t r o l l e r ) 之间建立了通道，而基于作用域视图在我们修改了 ∗ ∗ 数据 ( n g − m o d e l 所绑定的数据 ) ∗ ∗ 之后会立即更新 scope在**视图层**(View)和控制层(Controller)之间建立了通道，而基于作用域视图在我们修改了**数据(ng-model所绑定的数据)**之后会立即更新 scope在∗∗视图层∗∗(View)和控制层(Controller)之间建立了通道，而基于作用域视图在我们修改了∗∗数据(ng−model所绑定的数据)∗∗之后会立即更新scope
-
$scope在发生改变的同时也会立刻重新渲染视图
-
操作步骤
-
定义模块
-
使用方式：angular.module(“模块名称”,[])
-
参数说明：
- 模块名称为标签中的ng-app属性所定义的值
- []是一个数组，元素为其他模块，若该模块的使用不需要引入其他模块，则为空
-
举例定义一个名称为myApp的模块
-
var app = angular.module("myApp",[]);
-
-
-
引入模块
-
在body标签中进行引入
-
举例引入名称为myApp的模块
-
<body ng-app = "myApp">
-
-
-
定义控制器Controller
-
var app = angular.module("myApp",[]); -
使用方式：定义模块变量(app).controller(“控制器名称”,function($scope){})
-
参数说明：
- 控制器名称是要在body标签中引入的名称
- 函数类型参数为$scope，编写业务逻辑对数据进行控制
-
-
引入控制器
-
在body标签中进行引入
-
举例引入myController控制器
-
<body ng-app = "myApp" ng-controller="myController">
-
-
-
Angular的内置服务
$http
-
前端实现对数据的实现，我们就需要从后端进行获取，一般采用内置服务$http来实现数据访问
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <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>
$location
-
该服务可以分析浏览器地址栏中的URL，可以在应用中较为方便的使用URL中的内容，在地址栏中修改URL会影响 l o c a t i o n 服务，而在 location服务，而在 location服务，而在location中修改URL，也会影响到地址栏中
-
基本用法
-
search方法
-
使用该服务最常用的方法，该方法可以获取到地址栏的参数，通常使用search()方法
- 使用方法：$location.search();
-
search方法也可以修改url的参数部分
- 使用方法：$location.search(‘字段名称’,‘修改数值’);
-
可以一次性修改多个
-
使用方法：
-
$location.search({ id: '666', taskContract: 'abc' })
-
-
-
可以删除属性(若存在则删除，若不存在，则相当于没有修改过)
- 使用方法：$location.search(‘id’, null)；
-
注意事项：
- 该方法会返回一个json对象，要获取指定的参数对应的值
- 举例：获取json对象中id的值
- var id = $location.search().id
- 举例：获取json对象中id的值
- 地址栏的?前需要加#，是angularJS的地址路由的书写形式
- 该方法会返回一个json对象，要获取指定的参数对应的值
-
-
absUrl()
- 获取当前完成的url路径
- 使用方法：$location.absUrl();
- 获取当前完成的url路径
-
host()
- 获取当前url的主机名
- 使用方法：$location.host();
- 获取当前url的主机名
-
port()
- 获取当前url端口
- 使用方法：$location.port();
- 获取当前url端口
-
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 = "<em style='color:red'>手机</em>"; $sce.trustAsHtml(data)
$interval
-
该服务是用来处理一些间歇性的事情的
-
使用方式：
- $interval(执行的函数,间隔的毫秒数,运行次数);
- 运行此时可以缺省，即表示无限循环执行该函数
-
cancel
-
取消执行可以使用cancel方法
-
使用方式：
-
$interval.cancel(time);
-
-
-
举例秒杀服务
-
$scope.second = 10; time= $interval(function(){ if($scope.second>0){ $scope.second =$scope.second-1; }else{ $interval.cancel(time); alert("秒杀服务已结束"); } },1000);
-
-
我们可以通过$interval来实现倒计时的功能
AngularJS中的变量监听
-
在Angular中，对于变量的监听使用 s c o p e 中的 scope中的 scope中的watch()方法
-
使用方式： s c o p e . scope. scope.watch(‘变量’,function(newValue,oldValue){});
-
$scope.$watch('entity.goods.category1Id',function(newValue,oldvalue){ itemCatService.findByParentId(newValue).success(function(data) { $scope.itemCat2List = data; }); });
-
扫一扫
1627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
