I am creating an PoC app using Adobe AIR with AngularJS, the main idea behind this is that the first version will run as stand-alone and then we will host it somewhere to make it web-based. When I started to test ng-model, ng-click and some other basic notations, it seems that AIR doesn't like them and is unable to angularize the DOM. My guess is that the way that AIR parses and renders the DOM is different from what is expected from AngularJS, although it supposes to use Webkit(and it actually behaves like Safari, CSS3 wise).
Is there a way to force angular to wait to compile? Any ideas are appreciated. Thanks!
I guess I am just encouraging the AIR haters or whoever downvoted my valid question but he/she didn't have an answer or more questions. So, just because I didn't want to re-work creating this on MXML/AS3 and then rewriting on HTML/JS(i won't post an app on AIR mainly because of the skinning), I went with Node-Webkit. So far, so good.
If you need to do something like what I am trying to do, I guess that Node-Webkit is a good alternative. I think that the installer will be more work than just packaging an AIR app but I couldn't make AngularJS to work on AIR.
You can manually bootstrap angular - https://docs.angularjs.org/guide/bootstrap
Typically, developers allow angular to automatically bootstrap by adding ng-app="myApp" to the DOM node they want to "angularize". To manually bootstrap, remove that attribute altogether, then run the code below when you want to initialize angular.
angular.bootstrap(document.getElementById('#myAppContainer'), ['myApp']);
That said, my opinion is that your switch from AIR to Node-Webkit was a great choice and is the way to go.
Related
I'm trying to find a better way of detecting angular applications than searching for a class.ng-app or window.angular.
To help clarify, I either want to check somehow that the angular library is loaded or that an angular application is running.
Charlietfl is right, your question is ver vauge, but something like this would easily accomplish the task of determining the major angular version.
(angular.version.major > 1) : alert("you are using angular version 1.x") ? alert ("you are using angluar version 2.x");
If you are looking for angular on other's websites, window.angular is your best bet. Put the above code in any application using the angular framework and you'll get the appropriate result. I'm not sure of a more accurate test than that.
I have few queries on selecting Ionic framework for our Hybrid app project. Since I have not used Ionic before, few queries may seem idiotic. But i would request all to share their thoughts.
Q1. How easy it is to customize any ionic components as per project requirement in both JavaScript and CSS level?
Q2. How much overhead ionic components create in terms of DOM, Memory usage?
Q3. In case of collection-repeat, say i want to display 10 items out of 1000 items at a time. So at any point in time only say, will there be only 10 divs and will only new data be injected in the previous created divs?
Q4. Say, I have selected Ionic for our project but don't need all the UI or other components in it. So does Ionic gives the flexibility to exclude those components from the framework itself and use the rest?
Q5. How easy it is to include an external library into Ionic if required?
Q6. How easy to debug and Ionic app and the tools available?
Q1. Since Ionic is based on SCSS, it's really easy to customize the visual aspects. I did a video about working with scss and Ionic. As for the javascript side of things, if you know how to work with directives, you should be good.
Q2. Ionic aims to the keep the DOM nice and lean, and not change the DOM like you would with jQuery. As far as memory usage, that really depends on the code you write. You still need to write good code to make sure there aren't memory leaks any where.
Q3. Collection-Repeat doesn't really work that way. Plus when you start dealing with different screen heights, it's not going to be easy to deal with. The best why that we've come up with to deal with that is to just render how ever many it will take to fill the view.
Q4. At the moment no, if you start a project with the CLI, you get the whole bundle. Down the road we're thinking about breaking things into external components, but it's not set up yet.
Q5. It's Angular, so if you have another angular directive that you want to include, the process is really simple. Just include the script tag and inject the module as a dependency. If it's not an angular module, then it's a bit more work to wrap it in a directive, but there are plenty of tutorials out there to help.
Q6. The best thing to remember is that we're dealing with a webview, so you can do a lot of debugging right from chrome on desktop. If you need more debugging once you're on a device, iOS lets you debug right from safari on desktop, and android 4.4+ let's you debug app on a device with chrome.
I start learning recently polymer.
I want to hear yours opinion if its make sense to use both frameworks polymer and angular together or not and if polymer is really ready for production and what is your choice?
Polymer and Angular Together
Yes, of-course they both can be used independently as well as together. Actually they both are two different things and to serve two different purposes, Though they have some common features to offer.
Please refer to this answer for a detailed explanation. It covers more things and tells about how Polymer & Angular both can be used as part of the same project.
Polymer for Production
With the release of Polymer 1.0, they claim it to be the production ready and as per them they have focussed more on the speed and efficiency this time. As a major change of this release they have replaced the shadow dom with shady dom.
Finger Crossed, I am also intending to use it in my project. Though I have heard very little of it being used in Production by others.
I think Yes, is not a bad choice ! For example i try to use Angular for the little bit complex Service like the Auth Token Authentication, and Polymer for the others ! I want to use Material Design and the right choice is Polymer throught the Paper Element, i tried ngMaterial but is not so good like the Material in Polymer .... so my Answer for the Moment is Yes !
Is it possible to run AngularJS in a Durandal project? We are using Durandal now but want to move to AngularJS while still keep the site operational. Is it even a good idea to attempt this?
Any suggestion would be greatly appreciated.
You could run them side-by-side, but then you would just have two separate SPAs hosted on the same site. The doesn't seem like a good upgrade strategy to me. I think you would be better off to fully develop the new version and then replace the site altogether.
I would also advise that you wait for the release of AngularJS 2.0 (if possible). Rob Eisenberg has announced that he is currently working with the AngularJS team to provide core changes and plugins that will make Angular 2.0 more familiar to developers with Durandal experience, as well as to provide a migration path from Durandal to Angular 2.0.
The other answer isn't exactly correct. I have an example that proves it wrong.
Durandal is a module loader that can load any view / view model pair. If you choose to load an angular application and leave out the router portion it works just fine. It really isn't that difficult to get it set up.
Wrap your Angular.js application initialization code in an AMD module (view model) with a matching view and it just works.
I'm really enjoying learning to use AngularJS. Now I'm looking for components I can use with it. I've been looking at Angular-UI components but I'd like to know if it's possible to use the nice, supercharged components in ExtJS. Does anyone have experience with this? Any hints or tips or Angular directive libraries?
The company I work for is making a similar move. We currently rely heavily on an older version (3.x) of ExtJS, and the effort to upgrade to the current (5.0) version is at least equal to the effort required to move to angular.
To answer the question (to the best of my limited knowledge):
They can exist together in the same JS application.
Can you use UI elements of ExtJs with Angular?
You can put angular in control of markup via HTML templates in Ext.
Is this a wise idea?
Probably not.
Why would I consider doing this?
I need absolute control over the markup and don't care about possible page load issues
I need to serialize or de-serialize in some special way that Ext doesn't innately provide
I need to do something special like pub/sub (still totally possible with Ext)
In our case, it is a proof of concept for a few modals. If I am biased, I am biased in the direction of ExtJs (which is a huge statement given my background). The more exposure I have to ExtJS, the more I personally like it. I've used several frameworks in the past like Ember, Backbone, KnockoutJs and AngularJs and they are excellent tools that are reaching a level of maturity that makes them excellent choices. That said, they don't follow the same development model/pattern that ExtJs does, and I don't think a direct compare is fair to either side.
It would be almost like comparing Ext to Node (silly, I know).
If your project requires some special functionality that you don't believe is possible in Ext, you are probably like me and have limited experience with it. If you have a lot of experience with Ext, and want to try what we are trying, I say go for it. The single downfall of Ext is the size of the built package that is delivered. Another small framework isn't going to help that, but it also isn't going to cause more pain.
In the end, for me, I just love JS and expanding my knowledge of how things work now and in the future.
For the post above asking about the lack of traction for Ext: the answer is simple... it's not free, and thus not an option for many of us who aren't writing commercial software that fits well with the license.
In our AngularJS app at work, we have integrated a 3rd party ExtJS app with it, not for its UI components though. We open certain popups of that app based on user input and when the user commits data in the popup, we respond to ExtJs events to refresh our app. AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
Why do you need AngularJS anyway if you have ExtJS? I agree learning Ext can be somewhat difficult though once you've bitten through it there is nothing better at the moment. The only disadvantage is the heavier footprint but who cares? It's not like it's causing any problems... We use nothing but ExtJS at work and the progress in our apps is amazing. It integrates seamlessly with Spring MVC. We don't need to hack in HTML directly which I consider more of an advantage than a disadvantage: no more writing tags, no more open/close tag issues, you can still use css and Ext handles any browser incompatibilities so what else do you need more?? Angular is just the new kid on the block but in total it can not (yet) compete with ExtJS. It doesn't even com close. Just my 2$.
Sencha is planning to add support in the framework. Please find the link at the bottom for reference:
At SenchaCon in Las Vegas on November 7-9 2016, Sencha will be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/