AngularJS1.0——基本认识

2024-02-20 18:06:34

1. 简介

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

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

2. AngularJS四大特征

2.1 MVC模式

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

AngularJS1.0——基本认识

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的操作不再重要并提升了可测试性。

AngularJS1.0——基本认识

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>

运行结果：

AngularJS1.0——基本认识

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>

AngularJS1.0——基本认识

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>

AngularJS1.0——基本认识

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>

测试结果：

AngularJS1.0——基本认识 

4.5 循环指令——ng-repeat

语法：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>

运行结果：

AngularJS1.0——基本认识 

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>

测试结果：

AngularJS1.0——基本认识

6. 内置服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现数据访问

例如：

项目结构

AngularJS1.0——基本认识

代码： 

<!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>

运行结果：

AngularJS1.0——基本认识

AngularJS1.0——基本认识AngularJS1.0——基本认识 武汉小喽啰 发布了165 篇原创文章 · 获赞 7 · 访问量 5818 私信 关注
上一篇：Cause: java.lang.IllegalArgumentException: invalid comparison: java.util.Date and java.lang.String“


下一篇：java中的List简单介绍