1
AngularJs를 사용하고 있습니다. Hello world를 출력 할 간단한 컨트롤러를 작성하기 시작했습니다. 내 cribsControler.js 코드에서AngularJs에서 수정 한 후 내 .js 스크립트를 업데이트 할 수 없습니다.
이 좋아 보였다 :
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.hello = 'hello world';
});
그것은했다. 그런 다음 아래 예제에 표시된 세부 정보를 표시하도록 코드를 변경했습니다.
는
angular.module('ngCribs', ['ui.bootstrap']);
cribsController.js
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.cribs = [
{
"type": "condo",
"price": 22000,
"address": "nameOfStreet1",
"description": "description1"
},
{
"type": "hose",
"price": 54000,
"address": "nameOfStreet2",
"description": "description2"
},
{
"type": "cotage",
"price": 1000,
"address": "nameOfStreet3",
"description": "description3."
}
];
});
index.html을
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<title></title>
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<pre>{{ cribs | json}}</pre>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
</html>
언제 EDI app.js 저장하고 브라우저에서 실행 한 것보다 빈 페이지가 있습니다. 보기 페이지 소스를 클릭 한 다음 스크립트 링크 : <script src="scripts/cribsController.js"></script>을 클릭하면 "Hello World"에서 표시 세부 정보로 업데이트되지 않았습니다.
실제로 업데이트하려면 어떻게해야합니까? 아니면 내 코드에 오류가 있습니까?
브라우저 캐시를 지우려면 ..... 데이터가 저장되어 있는지 확인하십시오. –
cribsController.js에서'module ('ngCribs')'를 삭제하십시오. 단순히 angular.controller 부분과 로직을 남겨 둡니다. 이미 app.js에서 앱의 이름을 선언했습니다. – stormec56
@ stormec56, 그렇게하는 데는 아무런 문제가 없습니다. 모듈 선을 제거하면 사실 그것을 깨뜨릴 가능성이 높습니다. – Ankh