- I would like to use WSO2 SSO and API Manager.
- However, I would like to build my own custom UI for my end users to interact with the WSO2 framework.
- I have only really seen posts using JSP to do this and using the carbon framework.
- I’m not sure if WSO2 has a backend service that I can hook in to using AngularJS.
I would like to use WSO2 SSO and API Manager. However, I would like to build my own custom UI for my end users to interact with the WSO2 framework. How can this be done?
Continue reading “WSO2 with a custom UI build in AngularJS and bootstrap”
- 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”
- If every mutation returns a new object, dirty checking can use a blazingly fast strict equality check:
Although performance is fine without Immutable.js in a small application like Minesweeper, it is a great way to explore it nonetheless for when we need to build larger Angular 2 apps in the future.
- So if we have a game with 16 x 16 tiles, the data structure will look like this:
where each tile is an immutable map of properties:
The Angular 2 application can be broken down in 4 components:
The actual game logic originates entirely from Christian’s React.js example and is stored in and .
- Let’s start by having a look at the component that is instantiated when the Angular 2 application is bootstrapped:
In the method of the component, we make sure a new game is created when the component is initialized.
- The minesweeper component is where most magic happens so let’s have a look at the entire code first:
Because we passed the object to the component in the component, we have to make sure the component accepts it.
- This is done by creating a decorated class property:
Basically this tells Angular to accept what is passed in through the property and store it as a property in the component controller.
This is the first in a series of articles on Angular 2. If you want me to send you a quick note when a new article is available, just leave your email at the bottom of the article or follow me on Twitter.
Continue reading “How to build Minesweeper using Angular 2 and Immutable.js”
- Angular.js is often referred to as an MVW (Model-View-Whatever) framework and among the top benefits, for startups and mid-sized companies, people name: quick code production, easy testing of any app part and two-way data binding (changes in the backend are immediately reflected on the UI).
- As for now, it is reasonably called the most used JS framework for SPAs (Single-Page Applications) development and it boasts the largest community of developers.
- Here’s the line that we will add to our ng-repeat code from our file:
That’s all we need to change the sort order of our ng-repeat.
- Here’s the updated section inside of our :
Now as you click the links across your table headers, you’ll see your table sorted since we are setting the
Next up, we’ll be adding a way to change the sort order so users can sort by ascending or descending.
- The way we will give users the option to reverse the sort is to add in the of our table headers.
- Now if you click your header links, you’ll see the sort order changing.
- With a few Angular directives, we are now able to show proper feedback for sorting and for sort order.
When building Angular applications, one of the cornerstones we will…
Continue reading “Sort and Filter a Table Using Angular”
- So far, we have discussed about data binding, input properties, output properties, pipes, viewchild, Directives, Services including routes and template based form binding, using ngForms in Angular 2.0.
- Now, in this article, I will discuss how to create model based form, using Angular form module in Angular 2.0.
- In my previous article, I already discussed about the template driven form binding in Angular 2.0.
- Now, in this article, we will discuss about the Model Driven or Reactive Form binding in the Angular 2.0.
- To begin, we must first ensure that we are working with the right Directives and the right classes in order to take advantage of procedural forms.
In this article, we will discuss model based form binding in Angular 2.0.
Continue reading “AngularJS 2.0 From The Beginning”