AngularJS简介
AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维护。它的最新版本是1.3.14。
AngularJS四大特征
①MVC的模式
Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合,通过依赖注入,Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制,因此,后端减少了许多负担,产生了更轻的Web应用.
注意:Jquery操控的是DOM操作,操控整个页面的DOM,而AngularJS是操控变量进行操作,而视图绑定变量.
②双向绑定
AngularJS是建立在这样的信念上,既声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑.框架采用并扩展了传统HTML.通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步,因此,AngularJS使得对DOM的操作不在重要并提升了可测试性.
③依赖注入
依赖注入(Dependency,简称DI)是一种设计模式,指某个对象依赖的其他对象无需手动创建,只需要"吼一嗓子",则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少只是法则,模块中所有的service和provider俩类对象,都可以根据形参名称实现DI.
注意:spring的DI依赖注入是把一个bean注入给另一个bean,而另一个bean获取这个bean不需要new,不需要去创建.在AngularJS里面也是这样的.
④模块化设计
高内聚低耦合法则 高内聚:在一个模块之内的功能,都是一方面的功能,都是解决的功能都是类似的
低耦合:模块与模块之间少用关联和依赖
①官方提供的模板 ng(核心模块) , ngRoute(路由) , ngAnimate(动画效果)
②用户自定义的模块 angular.module('模块名',{})
AngularJS入门demo --->表达式
<html>
<head>
<title>angulargs demo</title>
<script src="angular.min.js"></script>
</head>
<body>
{{100+100}}
</body>
</html>注意body里面的ng-app表达式才会被识别,ng-app是常用的指令也是必须使用的指令,如果不加表达式不会被识别,,相当于启动引擎.
AngularJS入门demo --->双向绑定
<html>
<head>
<title>angulargs demo 双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入姓名<input ng-model="name"></input>
<input ng-model="name"></input>
{{name}}
</body>
</html>AngularJS入门demo --->初始化指令
<html>
<head>
<title>angulargs demo 初始化指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="name='张三丰'">
请输入姓名<input ng-model="name"></input>
<input ng-model="name"></input>
{{name}}
</body>
</html>AngularJS入门demo --->控制器
<html>
<head>
<title>angulargs demo 控制器</title>
<script src="angular.min.js"></script>
<script>
//建立模块
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">
第一个数字<input ng-model="x"></input>
第二个数字<input ng-model="y"></input>
{{add()}}
</body>
</html>AngularJS入门demo --->点击事件
<html>
<head>
<title>angulargs demo 事件指令</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app=angular.module("myApp",[]);
//创建控制器 $scope就是控制层与视图层之间交换数据的桥梁
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">
第一个数字<input ng-model="x"></input>
第二个数字<input ng-model="y"></input>
<button ng-click="add()">运算</button>
运算结果{{z}}
</body>
</html>AngularJS入门demo --->循环输出
<html>
<head>
<title>angulargs demo 循环数组输出</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app=angular.module("myApp",[]);
//创建控制器 $scope就是控制层与视图层之间交换数据的桥梁
app.controller("myController",function($scope){
//定义数组
$scope.list=[11,22,33,44,55,66];
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>AngularJS入门demo --->循环对象输出
<html>
<head>
<title>angulargs demo 循环对象输出</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app=angular.module("myApp",[]);
//创建控制器 $scope就是控制层与视图层之间交换数据的桥梁
app.controller("myController",function($scope){
//定义数组
$scope.list=[
{name:"张三",age:16,shuxue:100},
{name:"李四",age:160,shuxue:50},
{name:"王五",age:161,shuxue:60}
]
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>数学</td>
</tr>
<tr ng-repeat="x in list">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.shuxue}}</td>
</tr>
</table>
</body>
</html>