agular-极四维博客

AngularJS入门及示例

AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。双向绑定（同变量值同步变化）：<html><head><title>入门小 Demo-1</title><script src="angular.min.js"></script></head><body ng-app ng-init="myname='蔡徐坤'"> {{100+100}}请输入你的姓名：<input ng-model="myname"> <input ng-model="myname"><br>{{myname}},你好</body></html>控制器controller与事件：<html> <head> <title>控制器</title> <script src="angular.min.js"></script> <script> var app = angular.module('myApp', []); //定义了一个名叫 myApp 的模块 []写引入其他模块的名字 //定义控制器 $scope作用域控制层与视图层的数据桥梁 app.controller('myController', function($scope) { $scope.add = function() { // 获取视图层的变量转换成int 否则+会作为拼接字符串连接符 return parseInt($scope.x) + parseInt($scope.y); } }); </script> </head>  <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x"> y:<input ng-model="y"> 运算结果：{{add()}} </body></html>ng-click事件与ng-repeat循环数组与对象数组：<html> <head> <title>事件指令</title> <script src="angular.min.js"></script> <script> var app = angular.module('myApp', []); //定义了一个叫 myApp 的模块 //定义控制器 app.controller('myController', function($scope) { $scope.add = function() { $scope.z = parseInt($scope.x) + parseInt($scope.y); } $scope.list = [100, 200, 300]; //定义数组 /* 循环对象定义 */ $scope.alist = [{ name: '张三', shuxue: 100 }, { name: '李四', shuxue: 88 }]; //定义数组 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x"> y:<input ng-model="y">  <button ng-click="add()">计算</button> 结果：{{z}}  <table> <tr ng-repeat="a in list"> <td>{{a}}</td> </tr> </table>  <table> <tr ng-repeat="a in alist"> <td>{{a.name}}</td><td>{{a.shuxue}}</td> </tr> </table> </body></html>$http内置服务：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>内置服务</title> <meta charset="utf-8" /> <script src="angular.min.js"></script> <script> var app = angular.module('myApp', []); //定义了一个叫 myApp 的模块 //内置服务$http需要再方法中注入 app.controller('myController', function($scope, $http) { $scope.findAll = function() { // get/post请求 $http.post('data.json').success( function(response) { $scope.list = response; } ); } //由于body调用了该controller 因此必定会调用下行方法而执行上述代码但放init中就不必担心别的页面每次调用也会执行 // $scope.findAll(); }); </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>测试的json数据data.json：[{"name":"张三","shuxue":100,"yuwen":93},{"name":"李四","shuxue":88,"yuwen":87},{"name":"王五","shuxue":77,"yuwen":56},{"name":"赵六","shuxue":67,"yuwen":86}]总结：var app = angular.module('myApp', []) //在js中定义模块app.controller('myController', function($scope) {} //给模块创建名为myController的控制器$scope //前端与控制层数据的桥梁ng-app="myApp" //在body标签里绑定模块将body交给angular管理ng-init="findAll() //初始化变量或者在载入时调用方法可见第一个demong-controller="myController" //定义控制器{{}} //调用变量或者运算式<input ng-model="x"> //为标签绑定变量ng-click //单击事件a in list //in作为list遍历a.name //点调用对象属性$http.post('data.json').success(function(response){return response}) //http服务发送请求MVC模式首先在base.js中创建模块，这里命名为appvar app=angular.module('tieba',['pagination']); //[]内为引入的模块不需要可留空在服务js中写service：app.service('tiebaService',function($http){ //读取列表数据绑定到表单中 this.findAll=function(){ return $http.get('../tieba/findAll.do'); }});在控制层js中写controller： //控制层app.controller('tiebaController' ,function($scope,$controller ,tiebaService){ //引用service跟内置服务 $controller('baseController',{$scope:$scope});//继承 baseController //读取列表数据绑定到表单中 $scope.findAll=function(){ tiebaService.findAll().success( function(response){ $scope.list=response; } ); } });

TAG agular

2019/07/20 01:02 2904 0

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

AngularJS入门及示例

搜索

控制面板

最新留言

文章归档