Angular가 실행하려면 웹 서버가 필요합니까?그래서 브라우저에 로컬 파일의 url을 지정하면 Angular가 작동합니까?
제 말은 Angular가 RESTFul apis를 연결할 필요가 없도록 mock-up data를 사용할 수 있도록 허용한다는 것을 읽었다는 것입니다.UX 디자이너가 화장품만 보고 웹 서버에 접속할 필요가 없는 사용 사례를 생각해 볼 수 있습니다.다른 사용 사례도 생각해 볼 수 있습니다.
그래서 Angular work는 브라우저에 C:\temp\index.html과 같은 로컬 파일의 URL을 지정하고 js 파일은 c:\temp 또는 c:\temp\js라고 말합니다.
그래서 실제로 해봤는데, 여기 하나의 애플리케이션 파일에 모두 들어있습니다(분리해야 한다는 것을 알고 있습니다).
<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-controller="myNoteCtrl">
<h2>My Note</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
</div>
<script >
// was in separate file but pasted in for demo purposes
var app = angular.module("myNoteApp", []);
</script>
<script >
// was in separate file but pasted in for demo purposes
app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved:" + $scope.message);};
});
</script>
</body>
</html>
결과적으로 Chrome과 Firefox에서는 문제가 없으며 IE는 처음에는 콘텐츠를 차단하지만 실행을 허용할 수 있습니다.
교차 오리진 도메인 오류가 발생하므로 로컬 시스템의 파일 경로를 통해 각도가 있는 응용 프로그램에만 액세스할 수는 없습니다.
솔루션은 http-server(node.js를 설치해야 함)를 설치하는 것입니다.이렇게 하면 컴퓨터에 http-server local을 생성할 수 있으며 개발 및 테스트 목적으로 온라인으로 호스팅된 것처럼 Angular 응용 프로그램에 액세스할 수 있습니다.
예, 로컬 파일을 실행할 수 있지만 서버에서 데이터가 필요한 경우 실행 중인 브라우저 버전과 유형에 따라 브라우저에서 해당 파일을 차단해야 합니다.
PhoneCat Tutorial App: Running the Development Web Server 아래 Angularjs Tutorial 공식 설명 드립니다.
Angular 응용 프로그램은 순수하게 클라이언트 측 코드이며 파일 시스템에서 직접 웹 브라우저에서 여는 것이 가능하지만 HTTP 웹 서버에서 제공하는 것이 좋습니다.특히, 보안상의 이유로, 대부분의 현대 브라우저는 파일 시스템에서 페이지가 직접 로드될 경우 자바스크립트가 서버 요청을 할 수 없도록 합니다.
해야 하는 {{mymessage}}디브 안에서는 웹 서버가 필요 없습니다.
에는.templatengview합니다. 그렇지 합니다와 함께 이 제기됩니다. 그렇지 않으면 다음 오류가 발생합니다.
요청이 파일을 로드할 수 없습니다.교차 오리진 요청은 프로토콜 체계(http, data, chrome, chrome-extension, https, chrome-extension-resource)에만 지원됩니다.
angularjs routing 학습을 위해 loading 템플릿이 필요하다면, 나는 a를 찾았습니다.web server exe사용하기 쉬운 - HFS.지금까지 Angular를 배우기 위한 저의 요구사항을 충족시켰습니다.JS.
참고문헌
그래서 제가 한 방법은 임시 서비스를 만들고 URL/파일 대신 로드하는 것입니다.
예:
//tempUser.js
angular.module("app").constant("tempUser", {
firstname : "Joe",
lastname : "Smith"
});
//userService.js
angular.module("app").factory("userService", function ($q, tempUser) {
return {
load : load
};
function load(id) {
//TODO: finish impl
return $q.when(tempUser);
}
});
이렇게 하면 컨트롤러가 웹 서비스에서 로드하는 것처럼 계속 작동할 수 있습니다.
angular.module("app").controller("UserDetailCtrl", function (userService) {
userService.load().then(function (user) {
$scope.user = user;
});
});
다른 사람들이 말했듯이 http 역할을 적절히 수행하는 것이 가장 좋습니다.그러나 다른 해결 방법이 있습니다.
괄호(파일에 있는 동안 오른쪽 상단의 번개를 클릭)와 같은 일부 편집기는 코드를 브라우저에 올바르게 제공할 수 있습니다.다른 사람들에게는 이를 수행하는 플러그인이 있을 수 있습니다.
업데이트: 아래의 제 제안은 Angular에 충분히 효과적이었습니다.JS 1, 하지만 FYI만으로는 Angular 2에는 부족합니다.참고 항목Chrome에서 동일한 오리진 정책 사용 안 함
또한 Chrome을 사용하는 경우 플래그를 사용하여 실행할 수 있습니다. 즉, 바로 가기 경로의 .exe 부분 뒤에 추가할 수 있습니다.구체적으로 원하는 것은 다음
--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
따라서 다양한 원본의 파일에 액세스하려고 할 때 오류가 발생하지 않습니다.한 번은 플러그인이 있었는데 작동이 안 됐어요.기본값이 아닌 보안상의 이유가 있기 때문에 서핑을 할 때 항상 사용하는 메인 바로 가기에는 사용하지 않는 것이 좋습니다.- 위험을 무릅쓰고 사용합니다.
언급URL : https://stackoverflow.com/questions/31275527/does-angular-need-a-web-server-to-run-so-would-angular-work-if-i-give-browser-a
'programing' 카테고리의 다른 글
| jQuery 또는 자바스크립트만으로 버튼을 다른 페이지로 리디렉션하는 방법 (0) | 2023.10.16 |
|---|---|
| 자바스크립트 효율성: 'for' vs 'for each' (0) | 2023.10.16 |
| 카운트 및 그룹별 MySQL 쿼리 (0) | 2023.10.16 |
| 사용자 지정 셸에서 Windows용 GitHub과 함께 제공되는 posh-git을 사용하는 방법은 무엇입니까? (0) | 2023.10.16 |
| AngularJS: 여러 파일에서 컨트롤러를 만드는 방법 (0) | 2023.10.16 |