Announcement

Collapse
No announcement yet.

[CLOSED] [Frameworks#1] AngularJS

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    [CLOSED] [Frameworks#1] AngularJS

    Hi, i would like to create bindings for Angularjs, any guidance on how to proceed?

    #2
    Hello, and welcome to Bridge.NET forums!

    Glad to hear you are trying to use Bridge.NET with AngularJS. As of now, full AngularJS support is not yet implemented, but we are working to bring 100% support soon.

    Anyway, we'll try to come up with a sample usage of AngularJS with Bridge, even though no native framework support exists. I'll get back to you soon with a more definitive answer.

    By the way, you can see the supported frameworks on our main page, http://bridge.net/#frameworks.

    Comment


      #3
      Notice I am doing this with absolutely no AngularJS framework support, with just what bridge has as of now, but seems it's a decent rate of "rogue" command lines for using the AngularJS framework from Bridge.NET.

      As for "rogue" command lines I mean the ones I begin with "Script.Write" and variables of the "dynamic" type.

      This is Bridge's C# code:
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Text;
      using Bridge;
      using Bridge.Html5;
      
      namespace ClassLibrary1
      {
          [FileName("AngularHelloWorld")]
          public class AngularHelloWorld
          {
              public static void main()
              {
                  Console.Log("Angular code running.");
                  dynamic hwAp = new object();
                  Script.Write("hwAp = angular.module('helloWorldApp', []);");
      
                  Action<dynamic> ctrlFn = setBasket;
                  Script.Write("ctrlFn.$inject = ['$scope']");
                  hwAp.controller("HelloCtrl", ctrlFn);
              }
      
              private static void setBasket(dynamic scope)
              {
                  scope.basket = new[] {
                      new { name = "Orange", color = "orange" },
                      new { name = "Banana", color = "yellow" },
                      new { name = "Peach", color = "pink" },
                      new { name = "Lemon", color = "green" },
                      new { name = "Strawberry", color = "red" },
                      new { name = "Grape", color = "purple" }
                  };
              }
          }
      }
      And now, the HTML file. Just create it next to the angularHelloWorld.js file and open locally -- if using IE, allow the activex content and you'll be testing it.
      HTML Code:
      <!DOCTYPE html>
      <html ng-app="helloWorldApp">
       <head>
        <title>AngularTest</title>
        <script type="text/javascript" src="bridge.js"></script>
        <script type="text/javascript" src="https://code.angularjs.org/1.3.15/angular.js"></script>
        <script type="text/javascript" src="angularHelloWorld.js"></script>
       </head>
       <body>
        Hey, {{'world' + ' ' + "here."}}<br /> <!-- simple, non-bridge-related substitution -->
        Fuits in basket:<br />
        <ul ng-controller="HelloCtrl">
         <li ng-repeat="fruit in basket">
          {{fruit.name}}
          &nbsp;&nbsp;--&nbsp;&nbsp;
          {{fruit.color}}
         </li>
        </ul>
       </body>
       <script type="text/javascript">
        ClassLibrary1.AngularHelloWorld.main();
       </script>
      </html>
      Notice that the complexity here is due to the use of the view + controller concept in AngularJS. There's still room for improvement. Of course, we expect a much better developing experience once the AngularJS framework is ready.

      Your feedback is greatly appreciated by us.

      EDIT: As for creating bindings for AngularJS, I believe this means actually writing a support framework for AngularJS itself. We have in mind building a sample/bare framework to help developers build their own framework support in bridge, you can follow the issue in our github repository's issue tracker.

      EDIT 2: Here is a GitHub issue for AngularJS support.
      https://github.com/bridgedotnet/Frameworks/issues/1
      Last edited by Daniil; 2015-05-12 @ 07:17 AM. Reason: Added Angular JS issue link

      Comment


        #4
        Hello again! I've been playing around with AngularJS and here's how far I am:
        - Able to bind app, controller, model and repeat/filter from Bridge
        - Able to fully define and initialize a controller from Bridge

        Want to give it a try? Here's a demo with step-by-step instructions to build the example from AngularJS development branch.

        The final product is meant to become a NuGet package called Bridge.AngularJS.

        Comment


          #5
          Hello, any news about the Angular Demo?

          I tried to run it in VS2015.
          I added the AngularJS framework as C# source from git hub, and loaded the other necessary frameworks as nuget packages.
          The project compiles.

          But, at runtime, the browser gives this error:

          Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
          ReferenceError: provider is not defined
          at Bridge.define.statics.routeProviderFn (http://localhost:54640/js/phoneCat.js:91:13)
          at Object.invoke (https://ajax.googleapis.com/ajax/lib...lar.js:4219:17)
          at runInvokeQueue (https://ajax.googleapis.com/ajax/lib...lar.js:4125:35)
          at https://ajax.googleapis.com/ajax/lib...lar.js:4134:11
          at forEach (https://ajax.googleapis.com/ajax/lib...ular.js:326:20)
          at loadModules (https://ajax.googleapis.com/ajax/lib...ular.js:4115:5)
          at createInjector (https://ajax.googleapis.com/ajax/lib...lar.js:4041:11)
          at doBootstrap (https://ajax.googleapis.com/ajax/lib...lar.js:1455:20)
          at bootstrap (https://ajax.googleapis.com/ajax/lib...lar.js:1476:12)
          at angularInit (https://ajax.googleapis.com/ajax/lib...ular.js:1370:5)
          http://errors.angularjs.org/1.3.17/$injector/modulerr?p0=phonecatApp&p1=Ref….googleapis.com%2Fa jax%2Flibs%2Fangularjs%2F1.3.17%2Fangular.js%3A137 0%3A5)
          Last edited by gavi; 2015-12-31 @ 09:37 AM.

          Comment


            #6
            Hello @Gavi!

            Well, I've been working with AngularJS for some time and have it working up to play their demo tutorial. Well, had. A bug introduced in 1.10.3 broke it, so you should be able to run the demo if you use Bridge 1.10.2 and some older releases. We are rushing to release 1.10.4 with this issue addressed as you are the second person being affected by it. I believe that, if you build bridge from sources now, you also will be able to run the demo.

            Can you confirm this is the issue you're facing? We had this issue originally reporting the problem: AngularJS Demo Fn is not convert correctly
            But there might be a chance we are talking about different problems.

            So you can either:
            - use bridge 1.10.2 from NuGet and run the example
            - build from latest sources and run the example.

            EDIT: I've just fetched the updated code and it worked like a charm!
            Last edited by fabricio.murta; 2015-12-31 @ 01:21 PM.

            Comment


              #7
              Please see Retyped.

              Comment

              Working...
              X