将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>

时间: 2024-10-28 11:38:14

将ANGULAR与后端请求结合的相关文章

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法_AngularJS

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBody public Map<String, Object> save( @RequestParam(value = "isform", required = false) String isform) { System.out.println("isform value

Gracejs : 全新的基于koa2的前后端分离框架

Gracejs(又称:koa-grace v2) 是全新的基于koa v2.x的MVC+RESTful架构的前后端分离框架. 一.简介 Gracejs是koa-grace的升级版,也可以叫koa-grace v2. github地址: https://github.com/xiongwilee/koa-grace. 主要特性包括: 支持MVC架构,可以更便捷地生成服务端路由; 标准的RESTful架构,支持后端接口异步并发,页面性能更优; 一套Node环境经服务服务多个站点应用,部署更简单; 优

一个简单粗暴的前后端分离方案(转)

  项目背景 刚刚参加完一个项目,背景:后端是用java,后端服务已经开发的差不多了,现在要通过web的方式对外提供服务,也就是B/S架构.后端专注做业务逻辑,不想在后端做页面渲染的事情,只向前端提供数据接口.于是协商后打算将前后端完全分离,页面上的所有数据都通过ajax向后端取,页面渲染的事情完全由前端来做.另外还有一个紧急的情况,项目要紧急上线,整个web站点的开发时间只有两周,两周啊!于是在这样的背景下,决定开始一次前后端完全分离的尝试. 之前开发都是同步渲染和异步渲染混搭的,有些东西可以

浅谈Web中前后端模板引擎的使用

前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此文,为了自己备忘也好,为了还没用上前端模板引擎的同学的入门也好.(熟悉模板引擎的可以帮楼主看看文中有没有 BUG ..) 后端 MVC 说起模板渲染,楼主首先接触的其实并不是前端模板引擎,而是后端.后端 MVC 模式中,一般从 Model 层中读取数据,然后将数据传到 View 层渲染(渲染成 HT

Ionic 开发中遇到的常见问题及解决方案

前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案. 一些常识与技巧 list 有延迟,可以在ion-content处使用 overflow-scroll="true"尝试 在上用ng-click上是没效果的 标签内的事件会在整个label内被触发,点哪都触发 快捷修改背景色style="background-color: #212326;" 能用ng-if就用ng-

Angularjs中的页面访问权限怎么设置_AngularJS

在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangDuangDuang的效果,后端搭建框架数据结构和数据交互(数据交互前后端有交集),不管是.net.java or php都能一对多的提供前端服务,然而在新形式下项目中运用了前端框架,开发情况就不一样了,比如我要说的这是在angular框架下完成的开发,模式是后端提供服务和api文档,页面和数据交互及逻辑处理由前端完成,前端俨然是个完全的programer了,这个过程中就会遇到之前意想不到的问题(如果没有做过后端开发),比如

简单的异步 Web 方法

web|异步 何时采用异步 Web 方法 在确定是否适合在您的应用程序中采用异步 Web 方法时,有几个问题需要考虑.首先,调用的 BeginXXX 函数必须返回一个 IAsyncResult 接口.IAsyncResult 是从多个异步 I/O 操作返回的,这些操作包括访问数据流.进行 Microsoft Windows 套接字调用.执行文件 I/O.与其他硬件设备交互.调用异步方法,当然也包括调用其他 Web 服务.您可以从这些异步操作中得到 IAsyncResult,以便从 BeginXX

服务器端异步 Web 方法

web|服务器|异步 何时采用异步 Web 方法 在确定是否适合在您的应用程序中采用异步 Web 方法时,有几个问题需要考虑.首先,调用的 BeginXXX 函数必须返回一个 IAsyncResult 接口.IAsyncResult 是从多个异步 I/O 操作返回的,这些操作包括访问数据流.进行 Microsoft Windows 套接字调用.执行文件 I/O.与其他硬件设备交互.调用异步方法,当然也包括调用其他 Web 服务.您可以从这些异步操作中得到 IAsyncResult,以便从 Beg

ASP.NET服务器端异步Web方法

asp.net|web|服务器|异步 摘要:Matt Powell 介绍了如何在服务器端使用异步 Web 方法,来创建高性能的 Microsoft ASP.NET Web 服务. 简介 在九月份的第三篇专栏(英文)中,我谈到了利用 Microsoft¡ .NET Framework 的客户端功能通过 HTTP 异步调用 Web 服务的问题.这种调用 Web 服务的方法非常有用,使用时不必锁定您的应用程序或产生过多后台线程.现在我们了解一下在服务器端提供类似功能的异步 Web 方法.异步 Web