AngularJS初探

原创 2016年08月31日 10:14:29

angularJS不依赖于jquery,只要引入它的js就可以使用了。此教程适用于使用angularJS做增删改查不知如何入手的新手。

angularJS v1.4.6下载地址:http://download.csdn.net/detail/qq_33556185/9617586

接下来开始angularJS之旅:

ng-app初始化angularJS应用

ng-controller是控制器

ng-repeat是迭代器,类似于Java或者C#里的foreach

{{对象.属性}} 双大花括号是angular的表达式,用来输出数据

ng-if是条件判断

	<div class="mt-20" ng-app="myApp" ng-controller="customersCtrl">
		<table class="table table-border table-bordered table-bg table-hover table-sort">
			<thead>
				<tr class="text-c">
					<th>名称</th>
					<th>key</th>
					<th>流程id</th>
					<th>流程文件</th>
					<th>流程图</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="text-c" ng-repeat="d in records">
					<td>{{ d.name}}</td>
					<td>{{ d.key }}</td>
					<td>{{ d.id }}</td>
					<td>{{ d.resourceName }}</td>
					<td>{{ d.diagramResourceName }}</td>
					<td>{{ d.state }}</td>
					<td>
					  <p ng-if='d.state=="运行中"'>
					   <input type="button" value="挂起" ng-click="operation(d.id,'suspend')" href="javascript:;">
					  </p>
					  <p ng-if='d.state=="已挂起"'>
					   <input type="button" value="激活" ng-click="operation(d.id,'fire')"  href="javascript:;">
					  </p>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
$http是angular的核心服务,用来发送http请求的(和jquery里的ajax用法功能一样),此服务发送参数会以json的形式发送,因此,springMVC里如果不设置接收参数为json,会接收不到参数。使用@RequestBody注解到参数上即可。
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    //查询
   $http.post("/activiti/user_process/findDefinitionProc")
    .success(function (response) {
    $scope.records = response.data;});
    
    //提交表单(增、删、改)
    $scope.operation = function (procId,type) {
       $http.post("/activiti/user_process/activiteOrSuspend",{id:procId,operation:type})
          .success(function (response) {
          window.location.reload();
       });
    };
});




版权声明:本文为博主原创文章,未经博主允许不得转载。

AngularJS中基于cookie的权限认证

单页应用(Single Page Apps)正在AngularJS的引领下统治着世界(好屌的样子)。我们在Web 2.0 时代学到的很多东西都已不再适用,在权限认证方面就感觉到了很大的不同。 对...
  • u013291076
  • u013291076
  • 2017年03月06日 15:28
  • 1395

angularJS 学习笔记2 初始化angularInit过程

整个DOMLoaded后,触发angularInit函数,执行各个模块的初始化过程。入口angularInit函数 (Angular.js L1278)function angularInit(el...
  • huyangyamin
  • huyangyamin
  • 2015年04月07日 17:15
  • 5331

Angularjs 初始化未加载完毕闪烁问题解决 ng-cloak

Html代码      h3 ng-repeat="aricle in list">a href="{{aricle.url}}">{{$index+1}}、{{aricle.titl...
  • seven_zhao
  • seven_zhao
  • 2016年01月26日 16:19
  • 2623

angularJS学习之路(二十一)---injector---初探依赖注入

首先看看injector 怎么用  js代码: var app = angular.module("myApp",[]); app.factory("game",function(){ ret...
  • u014737138
  • u014737138
  • 2015年11月24日 12:25
  • 681

AngularJS初探:搭建PhoneCat项目的开发与测试环境

AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat。这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作。 对于PhoneCat项目...
  • wangyufei3360
  • wangyufei3360
  • 2015年04月11日 11:39
  • 217

初探angularJS 一

初探angularjs 一  1  指令      ng-app  指令告诉AngularJS,div 元素是 AngularJS 应用程序的"所有者"。      ng-init       ...
  • u014374173
  • u014374173
  • 2017年02月10日 12:28
  • 138

AngularJS 初探(一)

代码部分来源于 http://www.runoob.com/angularjs/angularjs-tutorial.html 下面对一些 AngularJS 所能实现的功能进行简要介绍 首先是...
  • sinat_30665603
  • sinat_30665603
  • 2017年03月02日 15:16
  • 276

博文:“C/C++与Matlab混合编程初探”的源代码

  • 2014年07月16日 19:41
  • 996B
  • 下载

ODI_11G初探-简单数据传输

  • 2011年07月10日 12:07
  • 2.76MB
  • 下载

使用Ruby on Rails开发LBS网站初探示例代码

  • 2011年07月21日 20:05
  • 290KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS初探
举报原因:
原因补充:

(最多只允许输入30个字)