Làm thế nào để tích hợp AngularUI vào AngularJS?

Question 1

Xin lỗi vì câu hỏi ngớ ngẩn, mọi người có biết cách bắt đầu sử dụng AngularUI không? Tôi đã tải xuống từ Github và đọc hướng dẫn trong README nhưng vẫn không hiểu mình phải làm gì.

Question 2

Các bước tích hợp:

Bao gồm jQuery và jQuery-ui (được phân phát tốt nhất từ CDN)
Bao gồm góc cạnh (tốt nhất là bao gồm nếu từ CDN)
Bao gồm JS / CSS góc-ui (hiện chỉ được lưu trữ trong kho lưu trữ GitHub trong buildthư mục)
Bao gồm bất kỳ plugin jQuery nào cho các lệnh mà bạn định sử dụng
Khai báo các phụ thuộc trên các mô-đun góc-ui ( ui.directiveshoặc ui.filterstùy thuộc vào những gì bạn định sử dụng).

Hầu hết các bước được phác thảo chỉ là bao gồm các phụ thuộc JS / CSS. Phần "khó" duy nhất là khai báo các phụ thuộc trên một mô-đun ui. *, Bạn có thể làm như sau:

var myApp = angular.module('myApp',['ui.directives']);

Sau khi tất cả các phụ thuộc được bao gồm và một mô-đun được định cấu hình, bạn đã sẵn sàng sử dụng. Ví dụ: sử dụng chỉ thị ui-date đơn giản như (lưu ý ui-date):

<input name="dateField" ng-model="date" ui-date>

Đây là jsFiddle hoàn chỉnh hướng dẫn cách sử dụng chỉ thị ui-date: http://jsfiddle.net/r7UJ2/11/

Bạn cũng có thể muốn xem các nguồn của http://angular-ui.github.com/ nơi có các ví dụ trực tiếp về tất cả các hướng dẫn.

Question 3

Kể từ ngày 3 tháng 5 năm 2013, đây là các bước:

bao gồm

    <script src="angular.min.js"></script>
    <script src="ui-bootstrap-tpls-0.3.0.min.js"></script>

đăng ký ui

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

đảm bảo myFancyAppgiống như trong của bạn<html ng-app="myFancyApp">

Hãy để phép thuật bắt đầu.

Question 4

Tôi nghĩ thứ còn thiếu là các plugin - bạn phải thêm các tập lệnh jquery plugin và css để một số chỉ thị angle-ui hoạt động. Ví dụ, chỉ thị codemirror cần:

    <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" />

Thật ngạc nhiên đối với tôi là angle-ui.github.com không đề cập đến việc cần bao gồm các plugin.

Question 5

Xin chào, tôi đã viết một bài báo cụ thể về cách thực hiện việc này để làm nổi bật cú pháp PHP. Bài viết ở đây: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

Cốt lõi của mọi thứ là cấu hình đúng:

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"; ?>';
}

Đối với một cái gì đó giống như đoạn mã HTML sau:

<div ng-app="myApp">
    <div ng-controller="codeCtrl">
        <textarea ui-codemirror ng-model="code"></textarea>
    </div>
</div>

Bạn có thể xem toàn bộ jsfiddle của thiết lập tại đây: http://jsfiddle.net/jrobertfox/RHLfG/2/

pkozlowski.opensource nói đúng, có rất nhiều tệp mà bạn cần đưa vào hơn là có vẻ như từ tài liệu AngularUI (nếu bạn có thể gọi nó là tài liệu ...)

Dù sao tôi hy vọng điều này là hữu ích cho bạn hoặc những người khác.

Question 6

Hướng dẫn có trong tệp readme.md tại kho lưu trữ github chính thức của họ

Giao diện người dùng Angular

Ngoài ra, cách bạn có thể tìm hiểu cách tích hợp là mở tệp angle-ui js (ví dụ: ui-bootstrap-tpls-0.6.0.js) và trong dòng đầu tiên, bạn sẽ thấy câu lệnh sau

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

Dựa trên đoạn mã trên, bạn cần đưa 'ui.bootstrap' vào mô-đun của mình.

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