AngularUI를 AngularJS에 통합하는 방법은 무엇입니까?
어리석은 질문에 대해 죄송합니다. 모두가 AngularUI 사용을 시작하는 방법을 알고 있습니까? Github에서 다운로드하고 README의 지침을 읽었지만 여전히해야 할 일을 이해하지 못합니다.
통합 단계 :
- jQuery 및 jQuery-ui 포함 (CDN에서 가장 잘 제공됨)
- 각도 포함 (CDN의 경우 포함하는 것이 가장 좋습니다)
- angular-ui JS / CSS 포함 (현재
build폴더 의 GitHub 저장소에서만 호스팅 됨 ) - 사용하려는 지시문에 대한 jQuery 플러그인을 포함하십시오.
- angular-ui 모듈에 대한 종속성을 선언합니다 (
ui.directives또는ui.filters사용할 계획에 따라 다름).
설명 된 대부분의 단계는 JS / CSS 종속성을 포함하는 것입니다. 유일한 "까다로운"부분은 ui. * 모듈에 대한 종속성을 선언하는 것입니다. 다음과 같이 할 수 있습니다.
var myApp = angular.module('myApp',['ui.directives']);
모든 종속성이 포함되고 모듈이 구성되면 바로 사용할 수 있습니다. 예를 들어, ui-date 지시문을 사용하는 것은 다음과 같이 간단합니다 ui-date.
<input name="dateField" ng-model="date" ui-date>
다음은 ui-date 지시문을 사용하는 방법을 보여주는 완전한 jsFiddle입니다. http://jsfiddle.net/r7UJ2/11/
http://angular-ui.github.com/ 의 소스 에서 모든 지시문에 대한 라이브 예제를 살펴보고 싶을 수도 있습니다 .
2013 년 5 월 3 일 현재 단계는 다음과 같습니다.
포함
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
UI 등록
angular.module('myFancyApp', ['ui.bootstrap']);
메이크업은 반드시 myFancyApp동일하다 당신의<html ng-app="myFancyApp">
마법이 시작되게하십시오.
누락 된 것은 플러그인이라고 생각합니다. 일부 angular-ui 지시문이 작동하려면 jquery 플러그인 스크립트와 CSS를 추가해야합니다. 예를 들어 codemirror 지시문에는 다음이 필요합니다.
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />
angular-ui.github.com이 플러그인을 포함 할 필요가 있다고 언급하지 않는다는 것이 놀랍습니다.
안녕하세요 저는 PHP 구문 강조를 위해이 작업을 수행하는 방법에 대한 기사를 작성했습니다. 기사는 여기에 있습니다 : http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/
핵심은 올바른 구성을 얻는 것입니다.
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true
}
});
function codeCtrl($scope) {
$scope.code = '<?php echo "Hello World"; ?>';
}
다음 HTML 스 니펫과 같은 경우 :
<div ng-app="myApp">
<div ng-controller="codeCtrl">
<textarea ui-codemirror ng-model="code"></textarea>
</div>
</div>
여기에서 설정의 전체 jsfiddle을 볼 수 있습니다. http://jsfiddle.net/jrobertfox/RHLfG/2/
pkozlowski.opensource가 맞습니다. AngularUI 문서에서 볼 수있는 것보다 포함해야 할 파일이 훨씬 많습니다 (문서라고 부를 수 있다면 ...).
어쨌든 나는 이것이 당신이나 다른 사람들에게 도움이되기를 바랍니다.
지침은 공식 github 저장소의 readme.md 파일에 있습니다.
Alternatively, the way you can find out how to integrate is to open the angular-ui js file (example: ui-bootstrap-tpls-0.6.0.js) and in the first line, you will notice the following statement
angular.module("ui.bootstrap", [...deps...])
Based on the above code, you need to inject 'ui.bootstrap' into your module.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);
참고URL : https://stackoverflow.com/questions/12472244/how-to-integrate-angularui-to-angularjs
'Program Tip' 카테고리의 다른 글
| 빈 jQuery 선택 결과 테스트 (0) | 2020.10.10 |
|---|---|
| 기본 제약을 추가하기위한 명령 (0) | 2020.10.10 |
| Python 3 용 패키지를 설치하려면 pip 또는 pip3? (0) | 2020.10.10 |
| (인터페이스가 아닌) 추상 클래스의 프록시를 생성하기위한 java.lang.reflect.Proxy의 대안 (0) | 2020.10.10 |
| Eclipse의 다른 Java 프로젝트에서 가져 오기 (0) | 2020.10.10 |