2016-04-12 21 views
1

Mevcut DOJO uygulamasının bir parçasını Angular kullanarak yazmam gerek. Bir plunkr http://plnkr.co/edit/8pgdNwxFoxrDAQaQ4qfm?p=preview oluşturdum. Bu açısal modülü yüklemiyor. Neyi yanlış yapıyorum?DOJO uygulaması ile açısal

Bu plunkr, açısal denetleyiciden merhaba Dünya'yı görüntülemelidir.

<div data-dojo-type="dijit/layout/ContentPane" 
      data-dojo-props='isLayoutContainer: "true"' 
      title="Testing Angular with DOJO" 
      id="targetID" 
      selected="false"    
      href="page.html"> 

ben açısal modülü yüklemek ve denetleyici değişkenleri kullanmaya çalışır page.html içerecek şekilde aynı mekanizmayı takip Orada aynı sayfada bizim uygulamada Dojo'nun kullanan diğer birer bölümdür, Yani.

<body ng-app="myApp"> 
    <div ng-controller="myAppController as myAppCtrl"> 
    angular content here... {{ myAppCtrl.hello }} 
    </div> 
</body> 

Basit açısal modülü ve denetleyici Sen Dijits içine (HTML işaretlemesindeki) özel olarak dekore düğümleri dönüştürmek için dojo/parser kullanmaya gerek

(function() { 
    'use strict'; 

console.log("inside myApp js"); 

angular.module('myApp', []) 

     .run([function() { 
      console.log("inside angular module"); 
     }]) 

     .controller('myAppController', [function() { 
      var self = this; 
      self.hello = "Hello World!" 
      console.log("inside angular controller"); 
     }]) 
})(); 

cevap

1

Dünya merhaba gösterilecek.

Aşağıdaki kodda, parser.parse() numaralı telefonu ararken kullanımını görebilirsiniz.

Aletlerinizi başlangıçta görmek için dijit/registry'u kullanın.

Soru kodu, ContentPane numaralı modülde tanımlanmayan bazı özellikleri içermektedir, dolayısıyla onları aşağıdaki kodda kaldırdım.

ContentPane için mevcut yöntemi ve özellikleri görmek için lütfen resmi API'a bakın.

Bir çalışma örneğinin altında, Dojo'da kullanılmak üzere hazır iki widget görebileceğiniz konsola bakın. Gerçek uygulamasında

https://jsbin.com/joyuhesapo/edit?html,console,output

Eğer dojo/parse ile (Ben açısal ile oluştururken inanmak) HTML biçimlendirmesi ayrıştırmak gerekir.

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script data-dojo-config="async: true" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
    <script> 
     require([ 
      "dojo/parser", 
      "dijit/layout/ContentPane", 
      "dijit/form/Button", 
      "dijit/registry", 
      "dojo/domReady!"], function (
      parser, 
      ContentPane, 
      Button, 
      registry 
      ) { 
       parser.parse().then(function() { 
        var widgets = registry.toArray(); 
        widgets.forEach(function(widget){ 
         console.log(widget.id); 
        }); 
       }); 


      }); 

    </script> 

</head> 

<body> 
    <h1>Hello Angular + DOJO!</h1> 
    <button data-dojo-type="dijit/form/Button" type="button"> Just an example Click! </button> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Testing Angular with DOJO', isLayoutContainerIndicates : true"> 
     Panel Content 
    </div> 
</body> 

</html> 
+0

Bunu ayrıştırıcı olmadan yapmaya çalıştım ve iyi çalışıyor gibi görünüyor. http://plnkr.co/edit/hOLYbqzG6KP6nIEfyPd1?p=preview Ayrıştırıcıyı bu koda nasıl dahil edebilirim ve dijit'e ne tür bir fark getiriyor? –

+0

Bildiren bir yaklaşım kullanırsanız, çözümleyiciyi kullanmadan durumunuzda olduğu gibi, widget örneğinizi başlatamazsınız. Aşağıdaki örnekte olduğu gibi dojo/parser modülünü kullanarak ayrıştırıcıyı birleştirebilirsiniz. Ayrıştırıcı kullanmazsanız, dojo'yu widget'larınızda iniziare edemezsiniz, bu nedenle programlı bir onaylama yerine http://plnkr.co/edit/vTd5WcVtSG4yS6xUFHOU?p=preview – GibboK

+0

Yararlı bilgiler https: // dojotoolkit. org/belge/öğreticiler/1.10/bildirim / – GibboK