Tag

angularjs Archives - Falafel Software Blog

Angular.js: Configuration for Two Environments within one Project

By | AngularJS, node.js | No Comments

One of our recent projects is an Angular.js app that uses Node.js/Express as the application server. During development, we create feature branches that are merged into a “develop” branch for integration testing. Then, the we merge the “develop” branch into the “master” branch for production deployment. One issue that we had to solve was how to keep environment-specific config in source control. That is, our Angular app needed to know the URL for its API server, and the API server for development was different than production. The first attempt was to maintain one version of a config file in the “develop” branch, and a different version of that…

Read More

Creating and Injecting Services – An Introduction to Angular 2

By | AngularJS | One Comment

This is post 5 of 9 in the series “An Introduction to Angular 2” In my last post we learned how to write our first Angular 2 component by writing a simple application comprised of a simple weather widget. The data displayed by our weather widget was static, defined directly within the component itself. Today we’ll learn about creating and injecting services. I’ll expand on the previous example by extracting the weather data into a separate service and injecting that service into the component. An Angular 2 Service In order to keep our weather component as simple as possible, we’re going…

Read More

Writing Your First Component – An Introduction to Angular 2

By | AngularJS | One Comment

This is post 3 of 9 in the series “An Introduction to Angular 2” If you’ve been following along with this series, by now you should be comfortable setting up a basic Angular 2 application and running it in your local browser. You should also be familiar with the language options available to you as an Angular 2 developer. In this blog post we’ll be looking at how to write an Angular 2 component. All examples will be in TypeScript. Creating an Angular 2 Component Components are the core building blocks of Angular 2 applications. They represent distinct areas of an application’s UI…

Read More
AngularJS and TypeScript

Getting Started with TypeScript

By | JavaScript | 3 Comments

Any doubt you may have had about TypeScript should have melted away with the recent announcement of Angular 2 being written in TypeScript. Google and Microsoft putting aside their egos (and money) to build an open source project together certainly indicates something about AngularJS and TypeScript. I don’t need to tell you how awesome AngularJS is, so in this post I’d like to show you how awesome TypeScript is.

Read More
AngularJS

The Best Developer Articles of 2014

By | AngularJS, ASP.NET, Kendo UI, Telerik | 2 Comments

It’s a new year, sure, but we we’re not quite ready to give up our most popular articles of 2014. From simple tips to deep dives into code, these posts have it all! AngularJS and Kendo UI – Part 1 – Getting Started We’re bringing together two themes I’ve been developing for the past few months: AngularJS and Kendo UI. These technologies go together like peanut butter and chocolate, and both share two characteristics that are critical to this series: The technology is hot, desirable and useful The reference documentation is very good, but good tutorials are in short supply…

Read More

Using the AngularJS $http Service inside a Kendo UI DataSource

By | AngularJS, JavaScript, Kendo UI | 9 Comments

This is post 1 of 2 in the series “Using the AngularJS $http Service inside a Kendo UI DataSource” Kendo UI is a widget library full of great UI widgets, but its also an application framework for developing JavaScript applications. AngularJS is another application framework for JavaScript, but it lacks any UI components. Increasingly, developers are leaning on AngularJS as their primary front-end framework, but because of it’s lack of UI components, these developers must look elsewhere for help building their user interfaces. Never fear, though, because Kendo UI doesn’t force you to use its application framework to be able to use its UI widgets. In…

Read More

Jesse Liberty releases his latest (19th) course on Pluralsight: Kendo UI and AngularJS

By | News | No Comments

 This brand new Pluralsight course from Falafel’s Jesse Liberty will teach you everything you need to know about programming AngularJS with Kendo UI. The course will provide an introduction to Kendo UI, and demonstrate what you need to know to get started, including where to get the libraries and what you are already expected to know. You’ll build your first Angular program using Kendo UI, and from there build out the program with increasingly interesting Kendo UI controls. You’ll look at handling data, using the Kendo UI DataSource, and implementing an MVVM approach to building applications with these technologies. Finally, you’ll go beyond the core…

Read More

Using AngularJS with Sitefinity – FalafelCON slides and resources

By | AngularJS, Sitefinity | No Comments

I had a blast at FalafelCON. I met some wonderful developers who are using Sitefinity and had very in-depth talks with most of them. I also had the privilege to talk about Using AngularJS with Sitefinity If you attended my talk and are looking for slides and code that we used in the talk to build a conference web and mobile app, here they are PPT and CODE If you want to run the sample application locally: Please restore the database (AngularDb.bak), upload your Sitefinity license file using the backend. And the credentials to get to Sitefinity’s backend for the sample app is admin…

Read More
Jesse Liberty

Jesse Liberty Speaks at Boston Code Camp Tomorrow

By | Uncategorized | No Comments

Developer mastermind Jesse Liberty will be presenting AngularJS For .NET Developers tomorrow at Boston Code Camp! AngularJS is a natural migration path for Silverlight and other .NET developers, and Jesse will be covering AngularJS history, program structure, extending HTML, Controllers, Directives, Working with Data, Two-way data binding and more. Those attending should have familiarity with JavaScript and preferably HTML5 and XAML, and be ready to learn! Code Camp Details Boston Code Camp 21 – June 2014 10:20 AM – 11:30 AM, Saturday, June 21, 2014 View the Schedule Not in Boston? Catch Jesse Liberty at FalafelCON 2014 in San Francisco,…

Read More

Preventing default action for an element in AngularJS

By | Web | One Comment

Assume you have an anchor button and you want to prevent default action of the anchor tag in a app using AngularJS. The code below shows you how – HTML <a class=”button” href=”#” id=”setFilterButton” ng-click=”setFilters($event)”>Set Filter</a> HTML above is pretty straight forward and something you will find with any ng-click with one exception. We are now passing $event to ng-click. We will make use of $event in our controller to prevent the default action. Javascript $scope.setFilters = function (event) { event.preventDefault(); console.log(‘Clicked!’); }; So in the controllers setFilter method we accept the event parameter passed from HTML and just call…

Read More

Angular Part 5–Adding A Service

By | Uncategorized | No Comments

This is the fifth in a series that starts here. In the previous installment, we looked at using Jasmine to test a Controller, and left off with the suggestion that our program would be improved by adding a service.  We’ll add that today. Before we get to adding a service, however, it is time to make our application a bit more realistic by adding a couple views.  We’ll do that by adding an Admin and an Expense folder to our App folder. The former will hold views (html) and code (JavaScript) related to administering the application, while the latter will…

Read More

Angular Part 4–Testing AngularJS

By | Uncategorized | No Comments

This is the fourth in a series that starts here.  It is time now to turn our attention to testing AngularJS applications.  Over time, we’ll want to move to test-first, where we write the test and then write the code. There are many advantages to test-first, but let’s hold off on discussing them until we’re ready for that step. Today, I’d like to discuss testing Controllers.  Controllers were introduced in the previous posting.  To make sure we’re all on the same page, let’s start with a common starting project, which you can download here.  This stripped down project has no…

Read More

Angular Part 3–BDD With AngularJS

By | Uncategorized | One Comment

In a previous posting I introduced the critically important topic of Behavior Driven Testing, but the example I gave was straight JavaScript rather than Angular. We’ll want to modify that example to be Angular, but to do so we need a bit more of the fundamentals under our belt. Let’s return to the previous program and modify Index.html, which will be our opening page.  Make sure you have a link to Bootstrap.css as shown below.    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>Expenses</title> <link href="Content/bootstrap.css" rel="stylesheet" /> </head>   One key feature in this listing is the presence of the…

Read More

Angular Part 2– Behavior Driven Development

By | Uncategorized | No Comments

In an earlier posting I discussed, briefly, why Angular is suddenly so popular, and demonstrated how to get started with Angular without writing a line of JavaScript.  It’s time now to turn our attention to a slightly more realistic example. Many lessons on Angular pay lip-service to the importance of unit-testing and test-driven development, but virtually none actually practice it.  This series will buck that trend and teach Angular and testing Angular at the same time.  In the long run, this will be faster and better than trying to tack testing on at the end. Test Driven and Behavior Driven…

Read More

Getting Started with Node.js for Windows

By | JavaScript | 7 Comments

With the recent announcements of Paypal and Netflix moving to Node.js, the server-side JavaScript platform has proven itself worthy to enterprises. It’s one small step for Node, one giant leap for JavaScript! From developers of .NET, Java, PHP, Ruby on Rails, and more, all walks of server-side coders are converging to the platform. And as bigger players like Yahoo, Walmart, and Oracle join the table, Node is loosing its reputation as being intrinsically immature and unstable. In this post, I would like to show you how easy it is to set up Node.js in a Windows world. Installing Node.js Getting…

Read More

Creating your first Angular program

By | JavaScript | One Comment

Angular is hot.  And with good reason.  Angular is a complete framework for building client-side JavaScript applications and includes the features you look for in a framework, such as: Two way data binding Model-View-Whatever Testability Dependency Injection Templates Routing View Composition Animation Patterns and a robust eco-system Promises Extensibility In this first in a series of Angular posts, I’ll review creating a simple Angular application that shows off some of Angular’s features without writing any JavaScript at all. To get started, you need Angularjs itself.  There are many good ways to get it, but the two best are either to…

Read More