如何集成 Angularjs 和 Salesforce？答案

【问题标题】：How to integrate Angularjs and Salesforce?如何集成 Angularjs 和 Salesforce？
【发布时间】：2016-01-19 19:37:56
【问题描述】：

我正在尝试在 Salesforce 中测试一些示例 Angularjs 应用程序。当我测试它运行时

grunt serve

在我的浏览器上，它运行良好。所以我将代码放在 Visualforce 页面中，但它没有正确显示所有内容。似乎这是 #/ 和 $routeProvider 部分的问题。

我的 Visualforce 页面中的代码（来自 Yeoman 的角度生成器的初始代码）：

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="griApp">
    <div class="header">
        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#/">gri</a>
                </div>
                <div class="collapse navbar-collapse" id="js-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#/">Home</a></li>
                        <li><a ng-href="#/about">About</a></li>
                        <li><a ng-href="#/">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div ng-view=""></div>
    </div>
    <div class="footer">
        <div class="container">
            <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
        </div>
    </div>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/about.js"></script>
</body>

在我的真实代码中，我正确地使用了 URLFOR 来包含静态资源的文件。

我的 app.js 是：

angular
  .module('griApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

希望你能帮助我。

谢谢！

【问题讨论】：

需要更具体地了解实际发生的情况。控制台中的任何错误？ url 是否更改为预期的#/ 路径？如果是这样，那会发生什么？如果不是，会发生什么？
谢谢@charlietfl！控制台没有错误。网址更改正确。目前，什么也没有发生。但它应该为每个菜单选项显示不同的文本。我一直在寻找并尝试如何将 Angular 与 Salesforce 集成的示例，但我还没有成功。我怀疑问题可能出在$ routerProvider 中，在视图中。那个时候路由没有分配URLFor，我觉得也有可能是错的。
我不知道salesforce，但由于角度路由是基于哈希的，服务器只知道主页url。检查浏览器开发工具网络。我的猜测是模板路径需要修改但不确定
谢谢，感谢您的帮助！我会试试的。
你把 html 模板放在哪里 .. 它们是 ng-template 吗？

标签： angularjs salesforce visualforce

【解决方案1】：

我已经集成了 salesforce 和 angularjs。我已经创建了与每个页面对应的 Apex 组件，并将 html 内容放在 ngTemplate 中并通过 $templateCache 加载。

所以我的应用程序visualforce页面如下所示

 <apex:component controller="APTS_ApttusLabAngularJS">

     <script type="text/ng-template" id="name.html">
        <!-- include your html and refer this name.html in your route
     </script>

 </apex:component>

我建议您改用 stateProvider。

【讨论】：