前端框架——AngularJS学习
1.前端框架AngularJS入门
1.1 AngularJS简介
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。
1.2 AngularJS四大特征
1.2.1 MVC模式
Angular遵循软件工程的MVC模式，并鼓励展现，数据，和逻辑组件之间的松耦合。通过依赖注入(dependency injection)，Angular为客户端的web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的web应用。
Model：数据，其实就是angular变量($scope.XX)
View：数据呈现，Html+Directive(指令)
Controller：操作数据，就是function，数据的增删改查
1.2.2双向绑定
AngularJS是建立在这样的理念上：声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合表示业务逻辑。框架采用并扩展传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。
1.2.3依赖注入
依赖注入(Dependency Injection 简称DI)是一种设计模式，值某个对象依赖的其他对象无需手工创建，其依赖的对象由框架来自动创建并注入进来，其实就是最少知识法则；模块中所有的service和provider两类对象，都可以根据形参名称实现DI
1.2.4模块化设计
高内聚低耦合法则
(1) 官方提供的模块 ng,ngRoute,ngAnimate
(2) 用户自定义的模块 angular.module('模块名'，[])
1.3入门Demo
(1) 表达式：{{ }}
<html> <head> <title>angularJS入门小Demo-1 表达式</title> <script src="angular.min.js"></script> </head> <!-- 必须要加上ng-app指令，才能使用表达式 --> <body ng-app> <!-- 表达式{{}} --> {{100+100}} </body> </html>
结果：
(2) 双向绑定：ng-model=""
<html> <head> <title>angularJS入门小Demo-1 双向绑定</title> <script src="angular.min.js"></script> </head> <!-- 必须要加上ng-app表达式指令，才能使用表达式 --> <body ng-app> <!-- ng-model是绑定指令 其中填写变量名称--> 请输入姓名：<input ng-model="name"> {{name}} </body> </html>
结果：在输入框中输入任何值，后面也会随时变化
(3) 初始化指令：ng-init=""
<html> <head> <title>angularJS入门小Demo-3 初始化指令</title> <script src="angular.min.js"></script> </head> <!-- 加上ng-init初始化指令 --> <body ng-app ng-init="name='hello world'"> <!-- ng-model是绑定指令 其中填写变量名称--> 请输入姓名：<input ng-model="name"> {{name}} </body> </html>
结果：加载网页时，就直接初始化name="hello world"
(4) 控制器（重）ng-controller
<html> <head> <title>angularJS入门小Demo-4 控制器</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp", []);//[]中放的是其他模块，如果myApp模块引用了其他模块，需要在[]中引用 //通过模块创建控制器,定义控制器 app.controller("myController", function($scope){//$scope表示引用的参数，控制层与视图层之间交换数据的桥梁 $scope.add = function(){ // 可以把$scope想象成java中的public，可以全局访问；而不加$scope相当于private，只能在控制器中进行访问 return parseInt($scope.x) + parseInt($scope.y); } });//第一个参数：控制请名称；第二个参数：函数,表示的就是控制器的内容 </script> </head> <!-- 加上ng-controller指定控制器 --> <body ng-app="myApp" ng-controller="myController"> 第一个数：<input ng-model="x"> 第二个数：<input ng-model="y"> <!-- 简单逻辑直接可以使用表达式完成,复杂逻辑一般要在控制器中完成 --> {{add()}} </body> </html>
结果：
(5) 事件指令：ng-click
<html> <head> <title>angularJS入门小Demo-5 事件指令</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp", []);//[]中放的是其他模块，如果myApp模块引用了其他模块，需要在[]中引用 //通过模块创建控制器,定义控制器 app.controller("myController", function($scope){//$scope表示引用的参数，控制层与视图层之间交换数据的桥梁 $scope.add = function(){ // 可以把$scope想象成java中的public，可以全局访问；而不加$scope相当于private，只能在控制器中进行访问 $scope.z = parseInt($scope.x) + parseInt($scope.y); } });//第一个参数：控制请名称；第二个参数：函数,表示的就是控制器的内容 </script> </head> <!-- 加上ng-controller指定控制器 --> <body ng-app="myApp" ng-controller="myController"> 第一个数：<input ng-model="x"> 第二个数：<input ng-model="y"> <!-- 通过按钮触发方法 --> <button ng-click="add()">运算</button> <!-- 简单逻辑直接可以使用表达式完成,复杂逻辑一般要在控制器中完成 --> 运算结果：{{z}} </body> </html>
结果：
(6) 循环数组 ng-repeat
<html> <head> <title>angularJS入门小Demo-6 循环数组</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp", []);//[]中放的是其他模块，如果myApp模块引用了其他模块，需要在[]中引用 //通过模块创建控制器,定义控制器 app.controller("myController", function($scope){//$scope表示引用的参数，控制层与视图层之间交换数据的桥梁 $scope.list = [102,203,394,555]; });//第一个参数：控制请名称；第二个参数：函数,表示的就是控制器的内容 </script> </head> <!-- 加上ng-controller指定控制器 --> <body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html>
结果：
(7) 循环对象 ng-repeat {{entity.name}}
<html> <head> <title>angularJS入门小Demo-7 循环对象数组</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp", []);//[]中放的是其他模块，如果myApp模块引用了其他模块，需要在[]中引用 //通过模块创建控制器,定义控制器 app.controller("myController", function($scope){//$scope表示引用的参数，控制层与视图层之间交换数据的桥梁 $scope.list = [ {name:'张三',math:100, chinese:100}, {name:'李四',math:90, chinese:92}, {name:'王五',math:40, chinese:50} ]; });//第一个参数：控制请名称；第二个参数：函数,表示的就是控制器的内容 </script> </head> <!-- 加上ng-controller指定控制器 --> <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.math}}</td> <td>{{entity.chinese}}</td> </tr> </table> </body> </html>
结果：
(8) 内置服务(重) $http
<!DOCTYPE html> <html> <head> <head lang="zh-CN"> <meta charset="utf-8"> <title>angularJS入门小Demo-8 内置服务$http</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp", []);//[]中放的是其他模块，如果myApp模块引用了其他模块，需要在[]中引用 //通过模块创建控制器,定义控制器 app.controller("myController", function($scope, $http){//$scope表示引用的参数，控制层与视图层之间交换数据的桥梁 //这里就体现了依赖注入的特性，要使用$http，就将$http注入到控制器中。 $scope.findList = function() { $http.get("data.json").success( function(response) { $scope.list = response; } ); } //$scope.findList();将方法写在这里也是可以的，但是如果其他页面也使用该方法时，也会初始化 });//第一个参数：控制请名称；第二个参数：函数,表示的就是控制器的内容 </script> </head> <!-- 加上ng-controller指定控制器 --> <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.math}}</td> <td>{{entity.chinese}}</td> </tr> </table> </body> </html>
data.json
[
{"name":"张三","math":100, "chinese":100},
{"name":"李四","math":90, "chinese":92},
{"name":"王五","math":40, "chinese":50},
{"name":"赵六","math":70, "chinese":85}
]
结果：
浙公网安备 33010602011771号