AngularJS初探

红太狼 2022-07-17 04:14 119阅读 0赞

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

angularJS v1.4.6下载地址：[http://download.csdn.net/detail/qq\_33556185/9617586][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注解到参数上即可。

[  
][http_download.csdn.net_detail_qq_33556185_9617586]

[http_download.csdn.net_detail_qq_33556185_9617586]: http://download.csdn.net/detail/qq_33556185/9617586