Question

我正在尝试在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: '/'
      });
  });

希望你能帮助我。

谢谢！

Answer 1

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

所以我的app 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。

如何集成Angularjs和Salesforce？

1 个答案: