AngularsJS入门
1. 简介：
* 它诞生于2009年，由Misko Hevery等人创建，后为Google所收购。它拥有诸多特性，最为核心：MVC、模块化、自动化双向数据绑定、依赖注入等；
2. 四大特征：
1. MVC模式：
* 它遵循MVC模式，并鼓励展现，数据，和逻辑组件之间的松耦合，通过依赖注入，它为客户端的Web应用带来了传统服务器的服务。
* Model：数据，其实就是angular变量（$scope.XX）
* View:数据的呈现，Html+Directive(指令);
* Controller:操作数据，就是function,数据的增删改查
2. 双向绑定：
* AngularJS建立在这样的信念上：声明式事务编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。
* 框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。
* 因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。
3. 依赖注入
* 是一种设计模式，指某个对象的其他对象无需手工创建。
* 此对象在创建时，其依赖的对象由框架来自动创建并注入进来，运用最少知识法则；
* 模块中所有的service和provider两类对象，都可以根据形参名称实现DI.
4. 模块化设计
* 高内聚低耦合法则：高内聚是在一个模块中解决的问题都是相关联的，低耦合是模块与模块之间关联尽可能少； [评价一个程序设计是否优良的重要判断标准]
* 官方提供的模块：ng[核心]、ngRoute、ngAnimate[动画]
* 用户自定义的模块： angular.module('模块名',[])
angularJS入门小程序
1. 表达式：
1. 程序演示:
<html>
<head>
<title> angularJS入门小程序小DEMO-1表达式</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100}}
</body>
</html>
2. 分析：
* 显示结果:100
* 必备因素：
1. 导入angular.min.js包
2. body标签添加属性：ng-app ：
* 告诉子元素指令是归angulars的
* 定义了AngularJS应用程序的根元素
* 在网页加载完毕时，ng-app会自动引导(自动初始化)应用程序
3. 表达式的写法： {{表达式}}
* 注意：表达式可以是变量或者运算式
2. 双向绑定
1. 程序演示：
<html>
<head>
<title> angularJS入门小程序小DEMO-2 双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入姓名：<input ng-model="name">
<input ng-model="name">
{{name+name}}
</body>
</html>
2. 分析：
* ng-model指令用于绑定变量 ，这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时的输出变量；
3. 初始化指令：
1. 程序演示：
<html>
<head>
<title> angularJS入门小程序小DEMO-2 双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入姓名：<input ng-init="name='陈大海'">
<input ng-model="name">
{{name+name}}
</body>
</html>
2. 分析：
* ng-init:可以使某些变量具有初始值，或者初始时就可以调用某些方法；
4. 控制器和事件指令
1. 程序演示：
1. 演示1：
<html>
<head>
<title> angularJS入门小程序小DEMO-4 控制器和事件</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 ng-model="y">
{{add()}}
</body>
</html>
2. 演示2：
<html>
<head>
<title> angularJS入门小程序小DEMO-4 控制器和事件</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 ng-model="y">
<button ng-click="add()">运算</button>
运算结果：{{z}}
</body>
</html>
2. 分析：
1. 控制器：
* ng-controller:用于指定所使用的控制器
* $scope:它的使用贯穿AngularJS App应用，有了它就可以在视图和控制器之间建立一个通道，基于作用域视图在修改数据时会立刻更新$scope,同样的$scope发生改变时也会立刻重新渲染视图；
2. 事件指令：
* ng-click:是最重要的单击事件指令，在点击时触发控制器的某个方法；
3. 注意：
1. 导入angular.min.js包
2. 在body体内
* 需要给标签添加绑定属性-双向绑定：ng-model；
* 需要展示值-表达式： {{}}
3. 在<body>标签上需添加值-添加模块和控制器：
* ng-app="" ng-controller=""
4. 在<script>标签内添加模块和控制器，以及事件：
* 模块： var app= angular.module("myApp",[])
* 创建控制器： app.controller("myController",function($cope)）)
* 创建事件1：
* $scope.add=function(){
* return parseInt($scope.x)+parseInt($scope.y);
* }
* 创建事件2：
* 给函数运行结果赋值，通过$.scope与html页面相连接；
* 由于函数add()被button的单击事件所控制，当点击后触发该事件；
* 将计算得到的值展示在表达式中；
5. 循环数组
1. 程序演示：
<html>
<head>
<title> angularJS入门小程序小DEMO-6 循环数组</title>
<script src="angular.min.js"></script>
<script>
<!--建立模块 -->
var app=angular.module("myApp",[]);
<!--创建控制器 $scope就是控制层与视图层之间交换数据的桥梁-->
app.controller("myController",function($scope){
$scope.list=[102,203,394,555];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
2. 分析：
* 循环的时候注意：
1. <tr>标签内添加<tr ng-repeat="x in list">
2. 显示时必须要使用表达式格式：{{x}}
6. 循环对象
1. 程序演示：
<html>
<head>
<title> angularJS入门小程序小DEMO-7 循环对象</title>
<script src="angular.min.js"></script>
<script>
<!--建立模块 -->
var app=angular.module("myApp",[]);
<!--创建控制器 $scope就是控制层与视图层之间交换数据的桥梁-->
app.controller("myController",function($scope){
$scope.list=[
{name:'张三',shuxue:100,yuwen:100},
{name:'李四',shuxue:90,yuwen:90},
{name:'王五',shuxue:89,yuwen:60}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<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>
2. 分析：
1. list是数组，用[]包括数据，对象使用{},数组内可以有很多个对象，对象也可以有且有很多个数组，相互可以嵌套
2. 对象的属性进行表示的时候，使用"对象名.属性值"来显示，切记外面需要加" {{}} " 表达式；
7. 内置服务
1. 程序演示：
<html>
<head>
<title> angularJS入门小程序小DEMO-8 内置服务</title>
<script src="angular.min.js"></script>
<script>
<!--建立模块 -->
var app=angular.module("myApp",[]);
<!--创建控制器 $scope就是控制层与视图层之间交换数据的桥梁-->
app.controller("myController",function($scope,$http){
$scope.findList=function () {
$http.get("data.json").success(
function (response) {
$scope.list=response;
});}
/*
* $scope.findList();
* 这里也可以使用此方法
* */
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<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>
2. 分析：
* 在展示层：使用ng-init调用初始化方法，使用循环遍历对象，表达式接收对象
* 在控制层：使用$scope与展示层沟通数据，使用$http与其他地方进行沟通数据(如与后端数据沟通)，$scope创建findList方法，该方法被初始化调用，同时，该方法通过$http接收数据，如果成功则将数据赋值给list数组；
如果对您有一点帮助，请点个关注支持吧！^ ^
扫一扫
3043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
