前端框架AngularJS简介及入门
AngularJS简介
基于开源Web应用程序框架构建而来。最初由开发者MISKO Hevery与Adam Abrons在2009年推出该框架。目前该框架由谷歌负责维护，并已发布至最新版本1.3.14
AngularJS四大特征
①MVC的模式
Angular采用了软件工程领域的MVC模式，并强调了组件间的松耦合设计；借助依赖注入机制，在客户端构建了更为轻量化的Web应用程序。该框架通过模块化的方式展现了数据与业务逻辑的关系，并未对传统的服务架构施加限制；这种设计使得开发团队能够更加专注于业务核心功能的同时，在后台减少了不必要的处理压力；这样的架构最终帮助开发者实现了更为高效的开发体验
注意：JQuery执行的是DOM操作，在管理整个网页层面的DOM元素方面具有特定功能；而AngularJS则负责处理数据层面的操作，并实现视图与业务逻辑的关联；在数据管理方面与视图绑定变量相辅相成。
②双向绑定
基于这样的理念认为声明式编程适合开发用户界面以及构建应用逻辑结构；指令式编程则主要用于表示业务逻辑。该框架继承并发展了传统HTML技术。通过双向数据绑定能够适应动态内容；双向绑定确保模型与视图之间自动同步运行；因此AngularJS使对DOM的操作不再是关键点并且增强了测试性。
③依赖注入
注入依赖的设计模式(DI缩写)是一种用于描述组件间交互的方式
请记住：Spring的依赖注入（DI）机制是将一个Bean对象注入到另一个Bean中，并且接收者Bean无需new关键字即可访问提供者Bean的实例，也无需手动创建实例。在AngularJS中也遵循同样的机制。
④模块化设计
遵循高内聚低耦合原则，在同一个模块内的所有功能都涵盖各个具体的功能领域，并且主要集中在同一个目标上。
低耦合:模块与模块之间少用关联和依赖
①官方提供的模板 ng(核心模块) , ngRoute(路由) , ngAnimate(动画效果)
②用户自定义的模块 angular.module('模块名',{})
AngularJS入门demo --->表达式
<html>
<head>
<title>angulargs demo</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
代码解读注意
- 表达式的写法是使用{{变量/运算式}}的形式来表示。
- 通过ng-app指令向子元素发送指示给angularJs进行识别。
- ng-app指令指定Root Element。
- 自动生成并启动应用程序通常会在网页加载完毕时发生。
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>
代码解读