background preloader


Facebook Twitter

AngularJS + RequireJS. While delivering software projects for startups, we’ve come to love AngularJS.

AngularJS + RequireJS

We’ve also come to struggle with clean modularity, both the parts that Angular does really well, and the parts that are somewhat missing. RequireJS does a great job where Angular leaves some things to be desired, but using them together is not entirely trivial. What follows is our take at the problem. Why? Working with Angular you could worry about a good way to organize code. Continue reading if you want to: stop worrying about including script tags in the right order when building Angular apps;to load your javascript asynchronously;to compile code into single minified js file; Who? I assume that you already know what AngularJS is and that you’ve at least heard of AMD and RequireJS. How? Angular Seed Project Let’s check how Angular Seed structures code.

Let’s start the party. Add RequireJS Checkout the example in your browser or on github. Installing dependencies. Why will Angular 2 rock? This article has been update in October 14th.

Why will Angular 2 rock?

Now it is using TypeScript and angular 2.0.0-alpha.42 Note: If the “foo” alerts from the plunkers starts popping out without reason, please leave a comment and I will look for a different solution. DISCLAIMER: Angular 2 is still in Alpha stage so the syntax I present in here is subject to be changed and|or simplified. I am using Angular 2.0.0-alpha.42. Also, what I write in here is just my opinion and I could be wrong. Angular 2 is around the corner and there are mixed opinions about it. Angular is a great framework, but it is 6 years old, and that for a framework is too much. So if they have to break Angular to be able to make it “modern”, it is better to write it from scratch.

They decided to kill 2 birds with one stone. So my friend, don’t worry, Angular 2 will rock. Module loader In Angular until recently, we always had a problem with module loaders. Now inside our main file, we just need to: There are more advantages that we will see soon. Is there any estimate for Angular JS 2.0 release date? Angular is a development platform for building mobile and desktop applications - Angular. AngularUI for AngularJS. A Practical Guide to AngularJS Directives. Directives are the most important components of any AngularJS application.

A Practical Guide to AngularJS Directives

Although AngularJS ships with wide range of directives, you will often need to create application specific directives. This tutorial will give an overview of custom directives and explain how to use them in real world Angular projects. At the end of the tutorial, I will guide you through the creation of a simple note taking app with the help of Angular directives. Overview A directive is something that introduces new syntax. If you’ve written an Angular application before, then you have used directives, whether you realized it or not. The jQuery Perspective Just imagine how you create a date picker with jQuery. Or it could look like this: This approach to creating UI components is intuitive and clear. Building Custom Directives: An Angular directive comes in four flavors in terms of appearance. Of course, we have control over how our directive will appear in the HTML. Or: Or, as an attribute like this: Tutorial: 4 - Two-way Data Binding.


Tutorial: 4 - Two-way Data Binding

In this step, you will add a feature to let your users control the order of the items in the phone list. The dynamic ordering is implemented by creating a new model property, wiring it together with the repeater, and letting the data binding magic do the rest of the work. In addition to the search box, the app displays a drop down menu that allows users to control the order in which the phones are listed. Reset the workspace to step 4. git checkout -f step-4 Refresh your browser or check out this step online: Step 4 Live Demo. The most important changes are listed below. Template app/index.html: Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"><option value="name">Alphabetical</option><option value="age">Newest</option></select><ul class="phones"><li ng-repeat="phone in phones | filter:query | orderBy:orderProp"><span>{{}}</span><p>{{phone.snippet}}</p></li></ul> We made the following changes to the index.html template: Controller.