在 SharePoint 应用程序网站上启动 AngularJS 单页应用程序

Question

我正在尝试创建一个单页应用程序，以位于我的 SharePoint 托管应用程序的"默认.aspx"页面中。到目前为止，我无法让 $route 和 ng-view 随心所欲地绑定。

到目前为止，我已经尝试将一些html插入标准默认.aspx页面的"PlaceHolderMain"占位符中，当您在Visual Studio 2013中打开新的Sharepoint App项目时，如下所示：

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div>
    <p id="message">
        <!-- The following content will be replaced with the user name when you run the app - see App.js -->
        initializing...
    </p>
</div>
<div data-ng-app="app">
    <div data-ng-controller="MainController as vm">
        <a href="/TrainingApp/training">link </a>
        <br />
        <div data-ng-view></div>
    </div>
</div>

我已经设置了应用程序和控制器，如下所示：

应用模块：

(function () {
'use strict';
// create app
var app = angular.module('app', [
  // ootb angular modules
  'ngRoute',      // app route (url path) support
  'ngSanitize',   // fixes HTML issues in data binding
  'ngCookies'
]);
// startup code
app.run(['$route', function ($route) {
}]);
})();

控制器：

(function () {
'use strict';
var controllerId = 'MainController';
angular.module('app').controller(controllerId,
    ['$rootScope', '$route', MainController]);
//create controller
function MainController($rootScope, $route) {
    var vm = this;
    this.string = "hello";
}
})();

模块路由配置如下：

(function () {
var app = angular.module('app');
//get all the routes
app.constant('routes', getRoutes());
//configure routes and their resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
    routes.forEach(function (route) {
        $routeProvider.when(route.url, route.config);
    });
    $routeProvider.otherwise({ redirectTo: '/' });
}
//build the routes
function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'App/Layout/splash.html',
                title: 'Splash'
            }
        },
        {
            url: 'training',
            config: {
                templateUrl: 'App/Layout/training.html',
                title: 'Training'
            }
        }
    ];
}
})();

但是，当我尝试单击将我带到/TrainingApp/Training的链接（TrainingApp是应用程序Web url）时，路由不会生效，整个页面被重新路由，我得到404。

是否需要增加页面上应用模块的范围？是否需要在母版页的某处添加 ng-app 指令？

任何帮助将不胜感激。

训练.html和飞溅.html都存在，并且只包含带有一些文本的div。

Answer 1

尝试：

<a href="#/TrainingApp/training">link </a>

您可以通过添加以下内容从 URL 中删除哈希 （#）：

 $locationProvider.html5Mode(true); to your getRoutes();