在 Sharepoint 应用网站上启动 AngularJS 单页应用

Question

我正在尝试创建一个单页应用程序以放置在我的共享点托管应用程序的 Default.aspx 页面中。到目前为止，我无法按照我的意愿绑定 $route 和 ng-view。

到目前为止，我已经尝试将一些 html 插入标准 Default.aspx 页面的 "PlaceHolderMain" 占位符中，当您在 [=43= 中打开一个新的 Sharepoint 应用程序项目时，您会看到该页面] 2013年，像这样：

<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'
            }
        }
    ];
}
})();

但是，当我尝试单击 link 将我带到 /TrainingApp/Training（TrainingApp 是应用程序网络 url）时，路由不会生效并且整个页面被重新路由，我收到 404。

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

如有任何帮助，我们将不胜感激。

training.html 和 splash.html 都存在并且只包含带有一些文本的 div。

Answer 1

尝试：

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

您可以通过添加以下内容从 url 中删除哈希 (#)：

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

在 Sharepoint 应用网站上启动 AngularJS 单页应用

Starting an AngularJS Single Page App on a Sharepoint app site

asp.net

sharepoint

angularjs

single-page-application