• Angularjs简单的$http通信


    关于Angularjs的简单通信,Angularjs主要是由$http服务和后端进行通信,而Controller主要是控制界面的展示,demo代码如下:

    <!DOCTYPE html>
    <html ng-app="myApp">
    	<head>
    		<meta charset="UTF-8">
    		<title ng-bind="title"></title>
    	</head>
    	<body ng-controller="demoCtrl">
    		<table border="1" cellspacing="1" cellpadding="1">
    			<tr>
    				<th>序号</th>
    				<th>url</th>
    				<th>name</th>
    			</tr>
    			<tr ng-repeat="dt in dataTotal track by $index">
    				<td ng-bind="$index + 1"></td>
    				<td ng-bind="dt.url"></td>
    				<td ng-bind="dt.name"></td>
    			</tr>
    		</table>
    	</body>
    </html>
    <script type="text/javascript" src="js/angular/angular.js"></script>
    <script>
    	var app = angular.module('myApp', []);
    	app.controller('demoCtrl', ['$rootScope', '$scope', 'demoService', function($rootScope, $scope, demoService) {
    		$rootScope.title = '测试例子';
    		console.log($rootScope.title);
    		demoService.info().then(function(data) {
    			console.log(data.data.data[0].url)
    			$scope.dataTotal = data.data.data;
    			console.log("dataTotal:");
    			console.log($scope.dataTotal);
    		});
    	}]);
    	app.service('demoService', ['$http', function($http) {
    		var user = {};
    		
    		user.info = function() {
    			return $http.get('test.json').success(function(resp) {
    				console.log("data is:")
    				console.log(resp.data)
    				var data1 = {
    					name: '谷歌',
    					url: 'www.google.com'
    				}
    				return resp.data.push(data1);
    			});
    		};
    		
    		return user;
    	}]);
    </script>
    

      Angularjs用的是MV*模式,Controller + Model + View , 这和java里面的spring框架很像,如果学过Java再来学习前端框架Angularjs,相信会很容易,Angularjs里面的service相当于spring 里的bean文件。 而且其二者的中心思想都是依赖注入,对于我这样的前端小白来说,简单的应用实现,还是没什么问题,真正的深入Angularjs,可能还要一段时间,这段时间更新下相关的demo,给自己加深印象吧。

          

  • 相关阅读:
    halcon中variation_model_single实例注释.
    vc 实现打印功能
    用VisualC++建立SOAP客户端应用(一)
    第六章
    OpenCV】透视变换 Perspective Transformation(续)
    第六章
    OpenCV仿射变换+投射变换+单应性矩阵
    【最新图文教程】WinCE5.0中文模拟器SDK(VS2008)的配置
    Visual Studio 2008 使用 WinCE 5.0 Emulator
    Win32 CMD批处理命令
  • 原文地址:https://www.cnblogs.com/Uncle-Maize/p/7388751.html
Copyright © 2020-2023  润新知