Angular 통합 방법UI에서 AngularJS로?
바보 같은 질문 죄송합니다. 여러분 Angular를 어떻게 사용하는지 아시나요?UI요? Github에서 다운받아 README의 설명을 읽었는데도 어떻게 해야 할지 모르겠어요.
통합 절차:
- jQuery 및 jQuery-ui 포함(CDN에서 최적으로 제공됨)
- Include angular (CDN에서 온 경우 포함시키는 것이 가장 좋습니다)
- JS/포함( angular-ui JS/CSS의 )
build□□□□□□□□★ - 사용할 디렉티브의 jQuery 플러그인을 포함합니다.
- 모듈angular-ui 모듈)에 대한 합니다.
ui.directives★★★★★★★★★★★★★★★★★」ui.filters(을)
개략적인 순서의 대부분은 JS/CSS 의존관계를 포함하는 것에 관한 것입니다.유일한 "교묘한" 부분은 UI에 대한 의존성을 선언하는 것입니다.* 모듈에서는 다음과 같이 할 수 있습니다.
var myApp = angular.module('myApp',['ui.directives']);
모든 의존관계가 포함되어 모듈이 구성되면 바로 사용할 수 있습니다.를 들어,은 다음과 같습니다, ui-date isice for 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가 맞습니다.여러분이 포함해야 할 파일이 Angular에서 보는 것보다 훨씬 많습니다.UI 설명서(문서라고 부를 수 있는 경우...)
순서는 공식 github 저장소에 있는 readme.md 파일에 있습니다.
또는 angular-ui js 파일(예: ui-bootstrap-tpls-0.6.0.js)을 여는 방법으로 첫 번째 줄에 다음 문이 나타납니다.
angular.module("ui.bootstrap", [...deps...])
위의 코드를 기반으로 모듈에 'ui.bootstrap'을 삽입해야 합니다.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);
언급URL : https://stackoverflow.com/questions/12472244/how-to-integrate-angularui-to-angularjs
'sourcetip' 카테고리의 다른 글
| AJAX 페이지는 어떻게 스크래핑합니까? (0) | 2023.02.17 |
|---|---|
| Rails가 리소스 내부의 매개 변수를 복제했습니다. (0) | 2023.02.17 |
| 클라이언트에 Firebase에서 원하는 데이터에 액세스할 수 있는 권한이 없습니다. (0) | 2023.02.17 |
| 테스트 시 리액트 상태 갱신의 원인이 되는 코드를 행동으로 정리해야 합니다. (0) | 2023.02.13 |
| ngIf 및 ngSwitch 각도JS (0) | 2023.02.13 |