将ANGULAR与后端请求结合
简单的结合，却是很多应用的基础。RESTFUL就此而生。瘦服务，富客户。
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Data Binding Example</title>
</head>
<body>
<div ng-controller="main">
<input type="text" ng-model="firstName" placeholder="firstname">
<input type="text" ng-model="lastName" placeholder="lastname">
<table>
<tr ng-repeat="p in employees">
<td>{{p.id}}</td>
<td><span>{{p.first}} {{p.last}}</span></td>
</tr>
</table>
</div>
<div ng-controller="logger">
<pre>
<p ng-repeat="e in events track by $index">{{$index}} - {{e}}</p>
</pre>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('main', ['$scope', '$http', '$rootScope', function($scope, $http, $rootScope) {
$scope.employees = [];
$scope.firstName = $scope.lastName = '';
$http.get('/employees').success(function(data) {
$scope.employees = data;
$rootScope.$emit('log', 'GET /employees success');
});
}]);
app.controller('logger', ['$scope', '$rootScope',function ($scope, $rootScope) {
$scope.events = [];
$rootScope.$on('log', function (event, data) {
$scope.events.push(data.trim());
});
}]);
</script>
</body>
</html>
将ANGULAR与后端请求结合的更多相关文章
- angular的post请求,SpringMVC后台接收不到参数值的解决方案
这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBod ...
- 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBod ...
- express搭建后端请求路由，前端进行访问对应的接口 后端解决跨域
代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...
- 实现Web请求后端Api的Demo，实现是通过JQuery的AJAX实现后端请求，以及对请求到的数据的解析处理，实现登录功能
本篇实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能需求描述:1. 请求后端Api接口地址2. 根据返回信息进行判断处理前端 ...
- 关于 Angular 跨域请求携带 Cookie 的问题
在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...
- Vue向后端请求课程展示
1.Vue结构 App.vue <template> <div id="app"> <router-link to="/index" ...
- flask 框架 前端和后端请求超时问题
部署模式 flask + Gunicorn + nginx 为什么要用Gunicorn + nginx ? 请看知乎大神们的回答:https://www.zhihu.com/question/3852 ...
- axios向后端请求解决跨域问题
我要向后端的请求的url是 http://192.168.3.25/ productInfo/insert 我是先用niginx转成localhost:8081 找conf/ nginx.conf , ...
- angular cli http请求封装+拦截器配置+ 接口配置文件
内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...
随机推荐
- 腾讯QQ群数据下载方法（7000万个qq群资料全泄漏）
仔细读完一定能找到自己需要的东西 据新华网报道,国内知名安全漏洞监测平台乌云20日公布报告称,腾讯QQ群关系数据被泄露,网上可以轻易就能找到数据下载链接,根据这些数据,通过QQ号可以查询到备注姓名.年 ...
- OC第一天-Xcode、工程组成及运行状态
Xcode 中iOS工程模版: 1.Application类型: Master-detail Application. 可以构建树形结构导航模式应用,生成的代码中包含了导航控制器和表示图控制器.(表示 ...
- <Error>: CGContextRestoreGState: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
转自这里 出 错原因:设置app的状态栏样式的使用使用了旧的方式,在info.plist里面设置了View controller- based status bar appearance为NO,默 ...
- Mac OSX用终端检测文件的sha1值
打开终端,输入shasum空格然后把文件拖进来回车即可;
- Quartz.NET快速上手第一课（官网文档翻译）
Quartz.NET快速上手第一课(官网文档翻译) 原文链接 在你使用调度者(scheduler)之前,你需要对它进行实例化(谁能猜到这呢?).在实例化scheduler时候,你需要使用ISchedu ...
- C#中子类调用父类的实现方法
这篇文章主要介绍了C#中子类调用父类的实现方法,通过实例逐步分析了类中初始化构造函数的执行顺序问题,有助于加深对C#面向对象程序设计的理解,需要的朋友可以参考下 本文实例讲述了C#中实现子类调 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- 问题解决：引入com.sun.management.OperatingSystemMXBean 出错
不能import com.sun.management.OperatingSystemMXBean 解决: Eclipse默认把这些受访问限制的API设成了ERROR.只要把Windows-Pref ...
- Brackets - 又一款牛x的WEB开发编辑器
Brackets官网下载: http://brackets.io/ Adobe Brackets是由Adobe主导开发一款主打web开发的编辑器. 是继TextMate,Sublime Text这两个 ...
- Sublime Text 3 使用备注
去年开始为了正规化自己的日常编辑工作,在dw,editplus,notap++,st里做了个选择,最终决定改曾经的dw为st. 毕竟dw是上个世纪的东西了,体积比较臃肿了.所以,在这里记录关于st的使 ...