Understanding AngularJS transclude in directives

  • One of my favorite features of AngularJS are directives.
  • I’ll write later about directives, but for now I’ll talk only about the concept of transclusion.
  • I believe the explanation given in the official documentation is kinda obscure, and since I think transclusion is actually very useful when writing your own AngularJS directives, I’ll share an answer I gave in StackOverflow about how to understand AngularJS transclude.
  • Consider a directive called myDirective in an element, and that element is enclosing some other content, let’s say:

    If myDirective is using a template, you’ll see that the content of

     will be replaced by your directive template.

  • So now your directive will look something like this:

    In conclusion, you basically use transclude when you want to preserve the contents of an element when you’re using a directive.

One of my favorite features of AngularJS are directives. They’re extremely modular and reusable components to “enhance” HTML, a different approach to regular JavaScript or JQuery widgets. I’ll write later about directives, but for now I’ll talk only about the concept of transclusion. I believe the explanation given in the official documentation is kinda obscure, and since I think transclusion is actually very useful when writing your own AngularJS directives, I’ll share an answer I gave in StackOverflow about how to understand AngularJS transclude.
Continue reading “Understanding AngularJS transclude in directives”

Flask by Example

  • Grab the id and navigate to this url:

    You should see a similar JSON response in your browser:

    Now we’re ready to add in Angular.

  • Be sure to add the requirement to the index.html file:

    Here, when the form is submitted, is called, which simply logs the text “test” to the JavaScript console in the browser.

  • Instead, we’ll use the Angular service to handle this request asynchronously:

    Also, update the element in index.html:

    We injected the service, grabbed the URL from the input box (via ), and then issued a POST request to the back-end.

  • Refactor out the Redis job creation from the index view function, and then add it to a new view function called :

    Make sure to add the following import at the top as well:

    These changes should be straightforward.

  • Update main.js by adding the following code to the controller:

    Then update the success handler in the POST request:

    Make sure to inject the service into the controller as well.

This tutorial details how to utilize to create a polling service with Angular.
Continue reading “Flask by Example”

Why Vue 2 beats Angular 2 and React – Jon Paul Miles – Medium

  • At first it was going to be Angular 2 vs React, but then a friend mentioned that people who used Vue wished they had known about it sooner and preferred it over React.I built a small dynamic single page in a single app in Vue 2, Angular, and React and I measured things like learning time, difficulty, and boilerplate.
  • The boiler plate was less than Angular 2 and less than React.
  • Vue also had directives which allowed my users to maintain their theme api.Vue is more like Angular 1 than Angular 2 is (without Dependency Injection) and it’s faster than even React.Vue 2 combines the best parts of React, and Angular 1 2.
  • Keep in mind when I said Angular 2 took I week, I meant just the initial learning not mastery.ConclusionFor any new web app, I will almost certainly recommend Vue 2 over React or Angular 2.
  • Members of your team can learn and master it faster, the framework runs faster than the other two, the boiler plate is the least exhausting, and it provides the best capabilities of React and Angular 1 2.

We started a contest at my job to see which framework was the best. At first it was going to be Angular 2 vs React, but then a friend mentioned that people who used Vue wished they had known about it…
Continue reading “Why Vue 2 beats Angular 2 and React – Jon Paul Miles – Medium”

Feb. Meetup: Event Sourced Graphs & Granular Leaflet integration for Angular2

  • Combining the storage of the data and the change on it allows to restore the graph at a given point of time or to calculate a graph with different changes in the past.
  • This approach gives opportunity to process over both data and time.
  • The talk explains how to store graphs over time, the basics of data processing and how to build a data processing system with Javascript.
  • In the last six month the developers of the YAGA-Team and some contributors from the FOSSGIS e.V. developed a module to integrate Webmapping components from Leaflet into Angular2.
  • In this talk we want to explain how we implement the directives / components and, of course, show how to integrate and use leaflet-ng2 in your Angular2 project, with the current release candidate.

With one week delay because of Valentine's Day we are happy to welcome you to our February Meetup on Tuesday.
Querying and Processing Event-sourced Graphs  by Daniel Reich
A graph usually represe
Continue reading “Feb. Meetup: Event Sourced Graphs & Granular Leaflet integration for Angular2”

javascript

  • My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.
  • Here is an example of what’s in my app:

    In circle 2, the template that is loaded into the has an additional sub-navigation.

  • I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex.
  • I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children.
  • There is the potential that the sub-navigation templates will have a 2nd sub-navigation that will need to load its own templates as well into the area in circle 4

    How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another?

My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.
Continue reading “javascript”

Using multiple dependencies in an Angular.js application

  • Here’s the deal : we have a website which contains lots of pictures, and we want to “visualize” some data.
  • The way to go is using ZingChart (my favorite charting library) and a lazy loader (ing-src-ondemand) with our Angular.js app.The lazy loader will display (load) each picture only when they appear on the screen, via a scroll event.Those two features will add custom directives that can be used with our HTML template to bind the data from the controller (“ZingChart” will use a JSON file, and the lazy loader will take care of the pictures located in a $scope array).
  • To do this, we need to we download the libraries, available online we have them available on local (well, working with local files is, imho, better than depending on the CDN…), we have to load them from the HTML template :script we have to add those dependencies to our app.js file, which can be external, or attached just before the /body tag [‘zingchart-angularjs’, that’s it !
  • But I warn you : do not forget to load the libraries, or your app will not work at all, as the needed dependencies will be missing.

Continue reading “Using multiple dependencies in an Angular.js application”