AngularJS实用入门

最新推荐文章于 2022-12-27 09:41:20 发布

小鬼哥

最新推荐文章于 2022-12-27 09:41:20 发布

阅读量186

点赞数

分类专栏：前端相关文章标签： AngularJS 前端框架

本文链接：https://blog.csdn.net/qq_41258204/article/details/83186645

版权

前端相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AngularJS的简介

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

一，AngularJS 四大特征

1.MVC模式

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

在这里插入图片描述

2.数据的双向绑定

双向的数据绑定允许模型和视图之间数据的自动同步

在这里插入图片描述

3.依赖注入

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

4.模块化设计

高内聚低耦合法则
1)官方提供的模块 ng、ngRoute(主要实现路由功能)、ngAnimate(实现一些动画效果)
2)用户自定义的模块 angular.module(‘模块名’,[ ])

二，AngularJs的下载
1.下载网址：http://www.angularjs.net.cn/download/

在这里插入图片描述

2.AngularJS的常用属性
在这里插入图片描述

ng-app 在任何元素上使用，代表 angular 应用作用域
ng-controller 指定控制器
ng-model 指定模型
ng-bind 或者 {{属性名}} 进行属性取值用于显示

三，AngularJs的常用操作

1.双向绑定 ng-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs数据双向绑定</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<!--ng-app指令是AngularJs程序执行的入口-->
	<body ng-app>
		<input  type="text" ng-model="name"/>
		<!--AngularJs的表达式:{{变量或方法等}}等价于ng-bind指令，进行属性取值，用于显示数据  -->
		{{name}}
	</body>
</html>

2.初始化指令 ng-init

我们如果希望有些变量具有初始值，可以使用 ng-init 指令来对变量初始化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs初始化指令</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<!--ng-app指令是AngularJs程序执行的入口    ng-init:可以在页面加载时，执行一些的操作-->
	<body ng-app ng-init="name='张三'">
		<input  type="text" ng-model="name"/>
		<!--AngularJs的表达式:{{变量或方法等}}等价于ng-bind指令，进行属性取值，用于显示数据  -->
		{{name}}
	</body>
</html>

3.控制器ng-controller

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs控制器</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
		
		<script type="text/javascript">
			//定义一个模块
			var app = angular.module('myApp',[]);
			
			//定义一个控制器  在定义一个控制器前，必须定义模块 
			//$scope是视图与控制器之间数据交换的桥梁
			app.controller('MyController',function($scope){
				$scope.add=function(){
					return  parseInt($scope.x) + parseInt($scope.y);
				}
			})
		</script>
	</head>
	<!--模块名和控制器名写上面自己定义的-->
	<body ng-app="myApp" ng-controller="MyController">
		X:<input  type="text" ng-model="x"/><br />
		Y:<input  type="text" ng-model="y"/><br />
		
		结果:{{add()}}
	</body>
</html>

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

4.事件指令 ng-click

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs事件指令</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
		
		<script type="text/javascript">
			//定义一个模块
			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" ng-init="val='运算'">
		X:<input  type="text" ng-model="x"/><br />
		Y:<input  type="text" ng-model="y"/><br />
		
		<!--ng-bind 或者 {{属性名}} 进行属性取值 用于显示-->
		<button ng-bind="val" ng-click="add()"></button><br />
		
		结果:{{z}}
	</body>
</html>

5.循环数组 ng-repeat

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJs事件指令</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>

		<script type="text/javascript">
			//定义一个模块
			var app = angular.module('myApp', []);

			//定义一个控制器  在定义一个控制器前，必须定义模块
			app.controller('MyController', function($scope) {
				$scope.array = [1, 2, 3, 4, 5]
			})
		</script>
	</head>
	<!--模块名和控制器名写上面自己定义的-->

	<body ng-app="myApp" ng-controller="MyController">
		<table>
			<tr ng-repeat="x in array">
				<td>{{x}}</td>
			</tr>
		</table>
	</body>

</html>

6.内置服务 $http

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http 来实现从后端获取数据。博主为了方便演示，数据不再从后端进行获取，创建一个data.json文件，存放一些数据，用于模拟从后端获取的数据。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJs内置服务$http</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>

		<script type="text/javascript">
			//定义一个模块
			var app = angular.module('myApp', []);

			//定义一个控制器  在定义一个控制器前，必须定义模块
			app.controller('MyController', function($http,$scope) {
				$scope.findAll = function(){
					$http.get('js/data.json').success(
						function(response){
							$scope.list = response;
					});
				}
			})
		</script>
	</head>
	<!--模块名和控制器名写上面自己定义的-->
	<body ng-app="myApp" ng-controller="MyController" ng-init="findAll()">
		<table>
			<tr>
				<td>姓名</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr ng-repeat="entity in list">
				<td>{{entity.name}}</td>
				<td>{{entity.shuxue}}</td>
				<td>{{entity.yuwen}}</td>
			</tr>
		</table>
	</body>

</html>

7.路由模块ngRoute的使用

我们在实际开发项目的过程中，许多页面的head和footer都是相同的，我们只需要改变body部分的内容。AngularJS中的ngRoute模块就是用来实现这一功能的。

在这里插入图片描述

在页面引入 angular 的 js ，route 的 js

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS的路由功能</title>
		<h1>页面的Head部分</h1>
		<a href="#/JavaEE">JavaEE</a>
		<a href="#/QKL">区块链</a>
		<a href="#/Python">Python</a>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
		<!--引入ngRoute模块的js文件-->
		<script type="text/javascript" src="js/angular-route.min.js"></script>
			
		<script type="text/javascript">
			//定义一个模块  注意：使用路由功能，必须引入ngRoute模块才能进行使用
			var app = angular.module('myApp',['ngRoute']);
			
			//设置路由对应的页面  otherwise：用于设置默认想要显示的页面
			app.config(['$routeProvider',function($routeProvider){
				$routeProvider.when('/QKL',{
					templateUrl:'区块链.html'
				}).when('/JavaEE',{
					templateUrl:'JavaEE.html'
				}).when('/Python',{
					templateUrl:'Python.html'
				}).otherwise({
					//默认显示的页面，必须是上面设置的路由中的其中一个
					redirectTo:'/Python'
				});
			}])
				
		</script>
	</head>
		
	<body ng-app="myApp">
		
		<!--用于显示不同页面的内容-->
		<!--ng-view用于显示路由调用的页面-->
		<div ng-view>
			
		</div>
	 
	</body>
	
		
	<footer>
		<h1>页面的Footer部分</h1>
	</footer>
</html>

注意事项：

在这里插入图片描述

分享示例代码在码云上的地址：https://gitee.com/xiaoguixiaogege/AngularJS

小鬼哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS实用入门

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

扫一扫

专栏目录