[angularjs] AngularUI를 AngularJS에 통합하는 방법은 무엇입니까?

Program / 글쓴이

어리석은 질문에 대해 죄송합니다. 모두가 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 파일에 있습니다.

Angular UI

또는 통합 방법을 찾을 수있는 방법은 angular-ui js 파일 (예 : ui-bootstrap-tpls-0.6.0.js)을 여는 것입니다. 첫 번째 줄에서 다음 문을 볼 수 있습니다.

angular.module("ui.bootstrap", [...deps...])

위 코드를 기반으로 모듈에 ‘ui.bootstrap’을 삽입해야합니다.

  angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);

답변