Sharepoint 앱 사이트에서 AngularJS 단일 페이지 응용 프로그램 시작

Question

Sharepoint 호스팅 응용 프로그램의 Default.aspx 페이지에 단일 페이지 응용 프로그램을 만들려고합니다. 지금까지 원하는대로 $ route 및 ng-view를 바인딩 할 수 없습니다. 당신은 비주얼 스튜디오 2013에서 새 SharePoint 응용 프로그램 프로젝트를 열 때

은 지금까지 나는과 같이, 당신이 얻을 표준 Default.aspx 페이지의 "PlaceHolderMain"자리에 일부 HTML을 연결 시도 :

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

다음과 같이

나는 응용 프로그램 및 컨트롤러를 설정 한 6,

컨트롤러 : 다음과 같이

(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/교육 (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();