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