5 AngularJS Power Features that are awesome in non-trivial webapps | Odiseo.net I’ve been developing AngularJS webapps in production environments since June last year. My experience have been awesome, redefining my understanding of front-end development and in the process, turning myself into an adept of JavaScript. There are many JavaScript frameworks out there, and choosing the right one might be tricky, but the Internet has no lack of tutorials, reviews, comparison charts and even a handy To-Do app written in several frameworks. AngularJS provides two-way data binding out of the box, and it’s one of the AngularJS features with the highest wow factor, specially since you can use it right away and very easily. Angular two-way data binding also permanently binds the view and your models, no longer requiring refresh cycles, which programatically may be prone to bugs or simply need a lot of redundant and hard to maintain render code (I’m looking at you BackboneJS) Directives are basically a way to declare a new HTML tag or attribute and make it do whatever you want.
Build Web Apps with AngularJS and Rails 4 - Thinkster The goal of this tutorial is to guide you through the creation of a Reddit/Hacker News clone using Rails 4 and AngularJS. By completing this tutorial, you will gain a basic understanding of Rails and AngularJS, using Rails to build a JSON REST API that interacts with an AngularJS frontend. Prerequisites This course assumes knowledge of programming and at least basic knowledge of JavaScript and Ruby, and you should be comfortable with basic web application concepts including REST and CRUD. Recommendations for Completing this Tutorial Throughout the course of this tutorial, links to additional concepts and information will be included. We at Thinkster are firm believers in actually writing code. Project Specifications Before beginning work on any project, it's usually a good idea to know what you're building. Create new postsView all posts ordered by upvotesAdd comments about a given postView comments for a given postUpvote posts and commentsCreate a user authentication system using Devise
Things I have learned working with AngularJS | Código Vivo You need to know its “core” very well. i.e. Dependency Injection, Double binding, Directives. I think of them as the three pillars of AngularJs Dependency Injection It´s the heart of angular used to organize the code in single units of functionality/responsibility and to make it Testable!!!! What is the minimum you should know? The Concept: What is IoC? Double Binding Angular double binding is one of the concepts that people get sooner but at the same time don´t really fully understand how to use it. Understand the reason behind it. Directives Directives are hard to build, to maintain and to some extend to test. Many people ask how can you build complex directives and In my opinion the best answer is Don´t build complex directives. I should clarify this a bit. Complex UI components should be seen as a set of directives and services that work together to bring the components’ functionality to work. Understand all the possible properties of a directives definition object. Unit Testing Updated
AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN - Thinkster The goal of this tutorial is to guide you through the creation of a Reddit/Hacker News clone using the MEAN stack. By completing this tutorial, you will gain a basic understanding of the MEAN stack including building a REST interface with Express.js on top of Node.js and using that interface to perform CRUD operations on a database via an AngularJS frontend. Why MEAN Stack? The acronym "MEAN" stands for "MongoDB Express.js AngularJS Node.js" and represents a group of technologies which are known to synergize well together. Prerequisites This course assumes knowledge of programming and at least basic knowledge of JavaScript. Recommendations for Completing this Tutorial Throughout the course of this tutorial, links to additional concepts and information will be included. We at Thinkster are firm believers in actually writing code. Project Specifications Before beginning work on any project, it's usually a good idea to know what you're building. Without further ado, let's jump in... if(! Recap
AngularJS Pain Points - Jaco Pretorius I’ve been using AngularJS for almost 3 months. I had heard quite a lot about Angular before this time – many people were talking about it being the ‘next big thing’ and how it could become the defacto JavaScript framework for client-side development. At first glance I was very impressed with Angular – the two-way binding removes the need for constantly updating the view and the scope objects makes for a clean separation between the controller and the view. There were other elements which were very appealing as well – a complete documentation site, a focus on testability, and a clean separation of concerns through built-in dependency injection. Now that I’m more familiar with AngularJS I am unfortunately less impressed. The Documentation I’ve spoken to other developers who use Angular and the common complaint is always about the documentation. Afterwards, bootstrap your app with this new module. The Testing Angular supports two types of testing – Unit testing and E2E testing (end-to-end).
A Better Way to Learn AngularJS - Thinkster Congratulations on taking the plunge! This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them. This course is accompanied by AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN. The learning curve of AngularJS can be described as a hockey stick. Getting started with apps featuring basic functionality is delightfully easy. With AngularJS, the "Ready, Fire, Aim" learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. Prerequisites Resources Since AngularJS is still in its infancy relative to other JavaScript frameworks, the number of encyclopaedic resources on it is still insufficient. AngularJS is not a library. Filling the Tank Adjusting Your Mirrors Revving the Engine Readings $http
Some AngularJS pitfalls - Branch and Bound The flickering UI Angular's automatic data-binding feature is awesome. However, it does have a flipside: before Angular is initialized, your page may show unparsed expressions to the user. When the DOM is ready and Angular calculates and replaces the values, this results in an ugly flickering effect: The above situation is a direct result of rendering this example from the Angular tutorial: <body ng-controller="PhoneListCtrl"><ul><li ng-repeat="phone in phones"> {{ phone.name }} <p>{{ phone.snippet }}</p></li></ul></body> If you have a single page application, this problem only occurs on the first page-load. <body ng-controller="PhoneListCtrl"><ul><li ng-repeat="phone in phones"><span ng-bind="phone.name"></span><p ng-bind="phone.snippet">Optional: visually pleasing placeholder</p></li></ul></body> You need a tag to apply this directive, so I added a <span> around the phone name. Another option is to completely hide elements, or even your whole application, until Angular is ready. to this:
Building a Chat App with node-webkit, Firebase, and AngularJS In this post we are going to build a desktop based chat application named vTak. We will use node-webkit to power the core desktop app and Firebase as our realtime data store. We will be using a slush generator named slush-wean to scaffold a basic node-webkit/Express/Angular app. The final product will look something like the following figure. Prerequistes If you are new to node-webkit, please refer to the following resources: Node Webkit – Build Desktop Apps with Node and Web TechnologiesNode Webkit powered Dashboard applicationNode webkit and Angularjs – A MovieStub App If you are new to Firebase, you should check out the following resources: Getting started with Firebase I would recommend using Sublime text while working with node-webkit apps. The Application Getting Started To build the application base, we are going to leverage a slush generator named slush-wean. Create a new folder named vTak and open a new terminal/prompt here. To scaffold the wean app, run slush wean. A quick overview:
AngularJS tips and tricks for neophytes and the all-around curious developer. – bytes for thought Article written as of AngularJS 1.0.7/1.1.5. Forget jQuery’s event handling altogether. I know it’s hard at first, but the temptation to use jQuery is the first and most common mistake developers make when starting out with Angular. It is so deeply engrained in our minds that you must force yourself to perform a paradigm shift. Since the entire application now has much fewer physical entry points (i.e. HTML files) – likely a single one – events such as $(document).ready() will only be triggered once throughout the entire application (on the initial load), and not with every Angular view change. Angular’s handling of the DOM will inevitably clash with that of jQuery, unless handled properly, and that is, through «Directives». Luckily for us, however, others have gone through the hassle and wrapped common widgets and librairies for us, under the AngularUI toolkit. But… where is Angular’s “DOMready” event, if I can’t use jQuery’s $(document).ready()? That’s the tricky part. Avoid the $scope.
AngularJS tips'n'tricks part 2 - revolunet blog Here’s a new batch of AngularJS tips and gotchas; If you didn’t read it yet, you can check the part 1 and feel free to comment below :) Access an element scope from outside This is useful for debugging: in your Chrome console, highlight a node in the Elements tab, then, in the console, to check its scope : or even : The Batarang Chrome Extension is much powerful and let you inspect any scope, anywhere :) Unwatch an expression Sometimes you want to watch an expression only a few times, and then forget it. Group elements in a select If you play with selects, the ng-options directive is quite powerful and has many syntaxes. For example you can easily group a model by attribute to have a nested select menu : Of course, just add an ng-model directive to your select to data-bind it to one of the values. Filter falsy values Filter on objects ng-repeat with duplicate items Directive : parse attribute without watching it Data-binding to a boolean This won’t work : Includes onload Express testing
AngularJS tips'n'tricks part 1 - revolunet blog In the past few months we learned a lot of new AngularJS stuff. Here is a first bunch of tricks, please comment and help us improve theses exemples if your tricks are even more awesome :) We compiled most of our best AngularJS ressources in a gist and we maintain a list of related twitter accounts here : Scopes You definitely need to read this article : Directives The official documentation is not crystal clear at first approach but it documents most of what you need to understand: Watch an object or a list If you watch a list or an object with the objectEquality parameter not set, then the $watch callback won’t be triggered if the object is only updated partially. Two way data binding attribute without explicit scope declaration. Use a callback function with arguments in your directive