注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

微软MVP罗勇的博客

微软MVP罗勇,www.luoyong.me

 
 
 

日志

 
 

在Dynamics CRM中使用AngularJS之一  

2016-04-06 17:02:57|  分类: CRM探索 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复219或者20160406可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me 
正所谓长江后浪推前浪,前浪死在沙滩上,之前常用jQuery,最近接触到AngularJS,又喜新厌旧了,觉得这个不错,于是学起来,打算在Dynamics CRM中使用它。今天我首先写个简单的小例子来和大家一起学习下。
要使用AngularJS, 需要先下载这个JS类库,下载网址是 https://angularjs.org/ ,因为某些缘故,你可能会觉得官方网站不好使,翻墙就是了。我这里使用的是 v1.5.3 版本,虽然 2.0出来了,我还是暂时不使用它。官方网站:
在Dynamics CRM中使用AngularJS之一 - 罗勇 - 微软MVP罗勇的博客
 
当然还需要下载Bootstrap相关的东东,请参考我这篇文章下载:在Dynamics CRM中使用Bootstrap 。
上代码和效果图是最直观的,我这里代码如下:
<!DOCTYPE html>
<html lang="zh-cmn-Hans" ng-app="crmApp">
<head>
    <title>注释</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid" ng-controller="AnnotationController">
        <blockquote>这是微软MVP罗勇使用AngularJS和Bootstrap做出的效果!<small>Powered by AngularJS & Bootstrap</small></blockquote>
        <table id="notestable" class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>注释标题</th>
                    <th>注释内容</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>修改人</th>
                    <th>修改时间</th>
                    <th>是否包含附件</th>
                    <th>附件名称</th>
                    <th>附件大小(KB)</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="note in notes">
                    <td class="text-center">{{$index + 1}}</td>
                    <td>{{note.subject}}<span class='glyphicon glyphicon-paperclip' ng-show="note.isdocument"></span></td>
                    <td>{{note.notetext | limitTo:21}}</td>
                    <td>{{note["_createdby_value@OData.Community.Display.V1.FormattedValue"]}}</td>
                    <td>{{note.createdon | date:'yyyy-MM-dd'}}</td>
                    <td>{{note["_modifiedby_value@OData.Community.Display.V1.FormattedValue"]}}</td>
                    <td>{{note.modifiedon | date:'yyyy-MM-dd'}}</td>
                    <td>{{note.isdocument?'是':'否'}}</td>
                    <td>{{note.filename}}</td>
                    <td>{{note.filesize / 1024 | number:2}}</td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript" src="../js/angular.min.js"></script>
        <script type="text/javascript">
        (function(){
            var app = angular.module('crmApp', []);
            app.controller('AnnotationController', ['$scope',function ($scope) {
            $scope.notes = [
          {
              "@odata.etag": "W/\"2996583\"", "subject": "\u6ca1\u6709\u9644\u4ef6\u7684\u6ce8\u91ca\u6807\u9898", "notetext": "\u6ca1\u6709\u9644\u4ef6\u7684\u6ce8\u91ca\u5185\u5bb9", "mimetype": null, "filename": null, "filesize": null, "isdocument": false, "createdon": "2016-04-05T01:40:12Z", "_createdby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "modifiedon": "2016-04-05T01:40:12Z", "_modifiedby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "annotationid": "dd5fc955-cffa-e511-80ea-3863bb361ea0"
          }, {
              "@odata.etag": "W/\"2996584\"", "subject": "\u6709\u56fe\u7247\u9644\u4ef6\u7684\u6ce8\u91ca\u6807\u9898", "notetext": "\u6709\u56fe\u6807\u9644\u4ef6\u7684\u6ce8\u91ca\u5185\u5bb9", "mimetype": "image/jpeg", "filename": "logo.jpg", "filesize": 115236, "isdocument": true, "createdon": "2016-04-05T01:40:48Z", "_createdby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "modifiedon": "2016-04-05T01:40:48Z", "_modifiedby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "annotationid": "546f626b-cffa-e511-80ea-3863bb361ea0"
          }, {
              "@odata.etag": "W/\"2996585\"", "subject": "\u6709Word\u9644\u4ef6\u7684\u6ce8\u91ca\u6807\u9898", "notetext": "\u6709Word\u9644\u4ef6\u7684\u6ce8\u91ca\u5185\u5bb9", "mimetype": "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "filename": "CRM\u529f\u80fd\u5206\u7c7b.docx", "filesize": 20907, "isdocument": true, "createdon": "2016-04-05T01:41:30Z", "_createdby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "modifiedon": "2016-04-05T01:41:30Z", "_modifiedby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "annotationid": "7cffc584-cffa-e511-80ea-3863bb361ea0"
          }, {
              "@odata.etag": "W/\"3005687\"", "subject": "\u8fd9\u4e2a\u662f\u5185\u5bb9\u5f88\u957f\u7684\u6ce8\u91ca\u6807\u9898", "notetext": "\u5173\u6ce8\u672c\u4eba\u5fae\u4fe1\u548c\u6613\u4fe1\u516c\u4f17\u53f7\uff1a \u5fae\u8f6f\u52a8\u6001CRM\u4e13\u5bb6\u7f57\u52c7 \uff0c\u56de\u590d218\u6216\u800520160331\u53ef\u65b9\u4fbf\u83b7\u53d6\u672c\u6587\uff0c\u540c\u65f6\u53ef\u4ee5\u5728\u7b2c\u4e00\u95f4\u5f97\u5230\u6211\u53d1\u5e03\u7684\u6700\u65b0\u7684\u535a\u6587\u4fe1\u606f\uff0cfollow me\uff01\u6211\u7684\u7f51\u7ad9\u662f www.luoyong.me \u3002", "mimetype": null, "filename": null, "filesize": null, "isdocument": false, "createdon": "2016-04-05T11:43:01Z", "_createdby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "modifiedon": "2016-04-05T11:43:01Z", "_modifiedby_value@OData.Community.Display.V1.FormattedValue": "crm admin", "annotationid": "be5da98c-23fb-e511-80ea-3863bb361ea0"
          }
        ];
        }]);
        })();
        </script>
</body>
</html>

效果如下所示:
在Dynamics CRM中使用AngularJS之一 - 罗勇 - 微软MVP罗勇的博客
 
看起来还不错,布局使用的是Bootstrap。我们重点来看看变化。
1. 以ng开头的一些属性,比如ng-appng-controllerng-show, ng-repeat等等,他们各有用途,第一个定义作用域,就是说这个元素及其内部东西都归AngularJS管,第二个定义控制器,第三个定义元素是否显示,第四个用来定义循环。
2. {{ 和 }} 之间的是表达式,这个是JavaScript表达式的一个子集,可以用来写表达式。
3. 格式化数据很简单。有些内置的格式化数据,比如说 {{note.notetext | limitTo:21}} 是显示前面表达式的最前面21个字符,{{note.createdon | date:'yyyy-MM-dd'}} 是将日期格式化成想要的格式,{{note.filesize / 1024 | number:2}} 是将前面表达式计算结果格式化为四舍五入到两位小数。
4.HTML很整洁。简单的表达式和HTML就搞定。
当然我的一篇文章不可能全部介绍完毕。这里用到的数据是我们CRM中通过Web API返回的数据,我们知道返回的JSON数据,我这里用的是直接写入,没有从系统中获取,后续博文会讲怎么从CRM中获取,AngularJS对这个支持很好,使用起来非常方便。
敬请期待下一篇文章。

素格格新疆特产店--做新疆特产的搬运工。
本店由博主的新疆老婆开设,搬运各种上等的新疆特产,是自用,送礼,年货,孝敬长辈特别是(岳)父母的首选!
Dynamics CRM 2015/2016新特性之十五:CRM On<wbr>line升级和产品计价更多选择 - 罗勇 - 微软MVP罗勇的博客
  评论这张
 
阅读(586)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017