AngularJS1.0——基本认识

最新推荐文章于 2024-05-14 18:16:42 发布

武汉小喽啰

最新推荐文章于 2024-05-14 18:16:42 发布

阅读量2.8k

点赞数 3

分类专栏： # AngularJS1.0 文章标签： AngularJS1.0

本文链接：https://blog.csdn.net/weixin_43318134/article/details/104144144

版权

AngularJS1.0 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1. 简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等

2. AngularJS四大特征

2.1 MVC模式

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

2.1.1 M——Model

数据,其实就是angular变量($scope.XX);

2.1.2 V——View

数据的呈现,Html+Directive(指令);

2.1.3 C——Controller

操作数据,就是function,数据的增删改查

2.2 双向绑定

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。

2.3 依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象，都可以根据形参名称实现DI。

2.4 模块化

高内聚低耦合法则
1）官方提供的模块 ng、ngRoute、ngAnimate
2）用户自定义的模块 angular.module('模块名',[ ])

3. 基本语法

3.1 表达式

在angularJs中表达式形式是一对嵌套的大括号{{表达式内容}}，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> angularJs demo01-表达式 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="angular.min.js"></script>
 </head>

 <body ng-app>
	{{10+100}}
 </body>
</html>

运行结果：

3.3 双向绑定ng-model

在angularJS中双向绑定是通过指令ng-model来完成的，ng-model代替了name属性，语法格式为 ng-model="变量名"，例如；

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> angularJs demo02-双向绑定 </title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="angular.min.js"></script>
 </head>

 <body ng-app>
	请输入用户名：<input ng-model="username"  /> </br>
	请输入密码：<input ng-model="pass"  /> </br>
	{{username}} - {{pass}}
 </body>
</html>

4. 指令

4.1 ng-app介绍

我们发现，在body标签中加上ng-app之后，angular的表达式就可以正常执行了，那么ng-app是什么玩意儿了？ng-app是angularjs中一个比较重要的指令，是使用angularJs必须要用到的一个指令。

4.2 双向绑定指令——ng-model

ng-model是双向绑定指令

<input ng-model="username"  />

4.2 初始化指令——ng-init

当我们希望在页面加载之后，对一些变量什么的进行初始化赋值等操作就可以使用该指令

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> angularJs demo03-初始化指令 </title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="angular.min.js"></script>
 </head>

 <body ng-app ng-init="username = '张三'">
	{{username}}
 </body>
</html>

4.3 控制器指令——ng-controller

ng-controller用于指定所使用的控制器。

4.4 事件指令

4.4.1 点击事件——ng-click

<button ng-click="add()">

例如：求两个数之和

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> angularJs demo05-事件指令 </title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="angular.min.js"></script>
  <script>
	var app = angular.module("myApp",[]);
	app.controller("myController",function($scope){
		$scope.add = function(){
			$scope.z = parseInt($scope.x) + parseInt($scope.y);
		}
	});
  </script>
 </head>

 <body ng-app = "myApp" ng-controller="myController">
	
	num1<input ng-model="x"> + num2<input ng-model="y"> <button ng-click="add()">=</button> {{z}}

 </body>
</html>

测试结果：

如果要一个指令调用多个方法，用分号隔开即可，例如；

4.5 循环指令——ng-repeat

4.5.1 语法

1）循环集合：ng-repeat="变量 in 集合"

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> angularJs demo05-事件指令 </title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="angular.min.js"></script>
  <script>
	var app = angular.module("myApp",[]);
	app.controller("myController",function($scope){
		$scope.list = ["张三","李四","王五"];
	});
  </script>
 </head>

 <body ng-app = "myApp" ng-controller="myController">
	<div ng-repeat="name in list">
		{{name}}
	</div>
 </body>
</html>

运行结果：

2）循环对象 ng-repeat="(key,value) in 对象"

例如：

js定义变量：

$scope.obj = {"name":"张三","age":22,"birth":new Date()};

前端使用变量：

<div ng-repeat="(key,value) in obj">
	<span >{{key}}-{{value}}</span>
</div>

运行结果：

4.5.2 获取行索引

在angularjs中在ng-repeat中获取索引只需要 $index就可以了，例如：

4.6 条件指令ng-if

语法：ng-if="条件"

例如：

<span ng-if="grade != 3">
	这里显示	                                     
</span>

4.7 ng-options指令

该指令用于指定select内容的数据源的指令

语法：ng-options = "变量.属性1 as 变量.属性2 for 变量 in 数据集合"

注意：变量是一个实体类，是数据库中的一条记录，as前面的部分是值value，as后面的部分是显示的文本。其中属性1和属性2分别表示实体中的两个字段属性

例如：

<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List">														
</select>

效果如图：

4.8 布尔指令

angular提供了两个Boolean指令，可以供我们使用

4.8.1 ng-true-value

该指令的含义是当为true的时候，其value是多少

语法：ng-true-value="值"

例如：当勾选的时候，值为1

<input type="checkbox" ng-model="entity.status" ng-true-value="1">

4.8.2 ng-false-value

该指令的含义是当为false的时候，其value是多少

语法：ng-false-value="值"

例如：当不勾选的时候，值为0

<input type="checkbox" ng-model="entity.status" ng-true-value="0">

4.9 ng-checked指令

该指令用于<inpput type='checkbox' />标签，用来显示该复选框是否需要勾选上

语法：mg-checked="布尔值"

例如：

<input  type="checkbox" ng-checked="true" />

4.10 ng-bind-html指令

该指令用于显示html内容。

应用场景是，后台返回的数据是html数据，要在界面解析该html，那么就不能使用表达式了，需要使用该指令来完成，例如：

5. 自定义模块

5.1 $scope

$scope 的使用贯穿整个 AngularJS App 应用，它与数据模型相关联，同时也是表达式执行的上下文。有了$scope 就在视图和控制器之间建立了一个通道，基于作用域视图在修改数据时会立刻更新 $scope，同样的$scope 发生改变时也会立刻重新渲染视图。

通俗的讲，$scope是控制层与视图层之间交换数据的桥梁，也就是说，通过其绑定的数据，在视图层可以直接访问，同时，在视图层通过ng-model绑定的变量，在控制层也是通过$scope获取的

5.2 操作步骤

5.2.1 定义模块

语法：angular.module("模块名称",[]);

参数解释：

参数一：模块名称

参数二：数组，元素是其他模块；如果该模块不需要引入其他模块，就是一个空数组

例如：

var app = angular.module("myApp",[]);

5.2.2 引入模块

模块的引入需要在ng-app中指定，例如;

<body ng-app = "myApp">

5.2.3 定义控制器

语法：app.controller("控制器名称",function($scope){ });

参数解释：

参数一：控制器名称

参数二：函数类型，写业务逻辑

例如：

app.controller("myController",function($scope){
		$scope.add = function(){
			return parseInt($scope.x) + parseInt($scope.y);
		}
	});

注意：app是模块名称

5.2.4 引入控制器

<body ng-app = "myApp" ng-controller="myController">

案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> angularJs demo03-控制器 </title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="angular.min.js"></script>
  <script>
	var app = angular.module("myApp",[]); 
	app.controller("myController",function($scope){
		$scope.add = function(){
			return parseInt($scope.x) + parseInt($scope.y);
		}
	});
  </script>
 </head>

 <body ng-app = "myApp" ng-controller="myController">
	
	num1<input ng-model="x"> + num2<input ng-model="y"> = {{add()}}

 </body>
</html>

测试结果：

6. 内置服务

6.1 $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>

运行结果：

6.2 $location

$location服务分析浏览器地址栏中的URL（基于window.location），让我们可以在应用中较为方便地使用URL里面的内容。在地址栏中更改URL，会响应到$location服务，而在$location中修改URL，也会响应到地址栏中

6.2.1 基本用法

1）search方法

我们使用该服务，最常用的目的就是获取地址栏的参数，这时候通常使用内置的search()方法

语法： $location.search();

注意：

1. 该方法返回一个json对象，要获取指定的参数对应的值，

例如：var id= $location.search()['id']

或者var id= $location.search().id

2. 地址栏的?前要加# ，则是angularJS的地址路由的书写形式，例如：http://localhost:9102/admin/goods_edit.html#?id=149187842867969

2）absUrl()

获取当前完整的url路径

语法：$location.absUrl():

3）host()

获取当前url的主机名

语法：$location.host():

4）port()

获取当前url端口

语法：$location.port():

6.2.2 其他api

1）查看

//查看$location的内容
var all = $location;
console.log(all)
 
 
//获取当前url的哈希值  
var hash = $location.hash()
console.log(hash)
//输出内容：''
 
 
//获取当前url的子路径(也就是当前url#后面的内容,不包括参数)  
var path = $location.path()
console.log(path)
//输出内容：/root/contract/edit[12]
 
 
//获取当前url的协议
var protocol = $location.protocol();
console.log(protocol)
//输出内容：http
 
 
//获取当前url路径(当前url#后面的内容,包括参数和哈希值):  
var url = $location.url();
console.log(url)
//输出内容：/root/contract/edit?id=123&page=1&taskContract=HADTASK

2）修改

//1.修改url的子路径部分:  
$location.url('/testUrl');
console.log(url)
//输出内容：http://localhost/#!/testUrl 
 
//2.修改url的参数部分
//第一个参数表示url参数的属性名
$location.search('id', '123')
// 结果：http://localhost/#!/root/contract/businesscontract?id=123
 
//第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增
$location.search('name', 'test')
// 结果: http://localhost/#!/root/contract/businesscontract?id=123&name=test
 
//3.一次性修改多个参数  
$location.search({
    id: '666',
    taskContract: 'abc'
})
//结果：http://localhost/#!/root/contract/businesscontract?id=666&taskContract=abc
 
//4.第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过  
$location.search('id', null)
//结果：http://localhost/#!/root/contract/businesscontract?page=1&taskContract=HADTASK&makeContract=HADMAKE
 
//5.修改url的哈希值部分  
$location.hash('testhash');
//目前我的页面测试路径找不到报错了
 
//6.修改替换url的哈希值部分  
$location.path('/testreplace').replace()
//结果：http://localhost/#!/testreplace?taskContract=abc#testhash

6.3 $sce服务

该服务主要用于做angularJs的信任策略的，比方说，我们用solr做高亮查询的时候，如果不用该服务做信任，前端界面是不能正确显示高亮内容的，显示的结果就是如图所示内容；

要实现对HTML的信任策略，需要用到起提供的一个方法trustAsHtml，该方法的作用是将一个文本类型的HTML转换成一个解析运行之后的HTML，与之类似的还有trustAsJs方法。

例如：

var data = "<em style='color:red'>手机</em>";
$sce.trustAsHtml(data)

6.4 $interval服务

在AngularJS中$interval服务用来处理间歇性处理一些事情

6.4.1 语法

语法格式：

 $interval(执行的函数,间隔的毫秒数,运行次数);

运行次数可以缺省，如果缺省则无限循环执行

6.4.2 cancel方法

取消执行用cancel方法

$interval.cancel(time);

6.4.3 demo案例

$scope.second = 10; 
time= $interval(function(){ 
  if($scope.second>0){ 
	$scope.second =$scope.second-1;  			
  }else{
	  $interval.cancel(time); 		  
	  alert("秒杀服务已结束");
  }
},1000);

页面用表达式显示$scope.second的值即可实现倒计时的功能

7. angularJs中的变量监听

在angular中，对变量的监听使用$scope中的$watch方法

语法：$scope.$watch('变量',function(newValue,oldValue){});

例如：

	$scope.$watch('entity.goods.category1Id',function(newValue,oldvalue){
		itemCatService.findByParentId(newValue).success(function(data) {
			$scope.itemCat2List = data;
		});
	});

8. angularJs的过滤器——filter

8.1 语法

app.filter("过滤器名",[ '需要引入的服务',function(需要引入的服务){ 
    return function(data){
        
    }
}]);

注意：

1. 第一个“需要引入的服务”参数需要用引号括起来，表示该服务需要加载进来

2. function中的参数不需要，是因为这个函数需要使用该服务，需要传进来

3. data表示过滤前的内容，也就是被过滤的内容。

4. 返回值就是过滤后的内容

例如：定义一个html的信任策略过滤器

// 定义过滤器
app.filter("trustHtml",['$sce',function($sce){
	
	// data 表示被过滤的内容
	return function(data) {
		return $sce.trustAsHtml(data);
	}

}]);

8.2 使用

过滤器的使用很简单，只需要用竖线“ | 过滤器名称”来调用即可，例如：

<div class="attr" ng-bind-html="item.title | trustHtml"></div>

武汉小喽啰

关注

3
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
AngularJS1.0——基本认识

1. 简介 AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等2.AngularJS四大特征2.1MVC模式 Angula...
复制链接

扫一扫