Why does Angular.js rock?

Let’s see if we can discover why :) Angular.js is a MV* (Model – View – Whatever) Javascript framework which is maintained by Google which excels in the creation of single-page-applications or even for adding some “magic” to our classic web applications. I could spend all the day writing about why you should try Angular.js in your new project, but I feel that it would be better if we see it in action. Data binding and scopes The first question that usually comes to mind is: Does it support data binding? Let’s see an example of Angular.js’ way of data binding: In this little piece of code, there are a few things to explain but before that, I want you to get familiarized with the code: Try it Insert your name: Echo: NOTE: Don’t worry too much about the ng-app thing at this moment. As you see, what we write in the input, is echoed after it. Ok, but where are we saving that user.name? Alright alright, that wasn’t hard, but…. The idea is something like: Let’s see a complex example: See it Hello, World

Deal with users authentication in an AngularJS web app This post is meant to share some thought about the main issues related to the user’s authentication in an AngularJS web app. This post is about how to maintain, and recognize, the status of authentication of an user (that is, if he’s logged in, or not) between the different routes of a web application. Moreover it also explains how to handle the case of a not authenticated user, who is trying to access to a page, that requires the user to be logged in. Before going into the details of my approach, it is very important to clarify that, because the user has full controll of the browser, each control implemented with front end technologies, must (!) be repeated also in the backend. Recognize an authenticated user There are probably several ways to recognize an authenticated user; infact it’s possible to set a global variable, or create a cookie… but my favourite way to reach the objective is to use an AngularJS service. Are you wondering about how to use this service?

AngularJS Best Practices - Jaco Pretorius Miško Hevery – the father of AngularJS – gave a very interesting presentation on AngularJS best practices in December of last year. This presentation is available on YouTube and the actual slides are on Google Docs. I’m going to cover a few of the points he covered in his presentation and give my take on them. Directory Structure Angular suggests that you use a certain directory structure, which you can create either using the Angular-seed project or the new Yeoman tool. This is called ‘Convention over Configuration’ – a concept you will hear a lot if you delve into Rails – although this doesn’t really apply in Angular as far as I can tell. In any case, it’s still a good idea to stick to the conventions simply to make it easier for a developer to look at your codebase and know where files should live. Everything that gets deployed is in the app directoryEverything outside of the app directory is for development Dependency Injection Hiding Flashes of Unstyled Content {{ interpolation }} More

witoldsz/angular-http-auth angularjs - What is the best practice for making an AJAX call in Angular.js meliaxford/angular-client-side-auth angularjs - Angular - Best practice to structure modules angular-app/angular-app Structuring an Angular Project We can build amazing SPA and HTML5 applications when choosing a powerful framework like Angular, Durandal, Ember, or Backbone. And while I love my personal favorites Angular and Durandal, it’s not all magic. There is a learning curve and some things are helpful to decide up front. Once you choose your presentation framework, you should decide how you will organize the structure of your project. UPDATE: Learn how you can refactor your Angular structure for growth in my “sequel” post. In this post I’ll show one way how I organize my Angular based projects and discuss why I like it. Before you ask “Why didn’t he mention Knockout.js? If you are interested in SPA, HTML5, Angular, BreezeJS or JavaScript patterns then you will love my upcoming course at Pluralsight, due out in September 2013. Sorting Boxes Most of my client code ends up in one of these 4 folders. /app/content/scripts/test App Code My app folder is where all of my files I wrote for my app reside. Controllers Services Directives Views

Authentication in AngularJS (or similar) based application. | Espeo Implementation of the concept described below and also a demo application is available here: Hello again, today I would like to write a little bit about how am I handling authentication in an application front-end running inside web browser, using AngularJS. Traditional server ‚login form’? At the beginning, I did not realize that traditional and commonly used form based authentication does not suit my client-side application. Let’s take a look at a sample server-side web application flow of events: Same application, but different flow: user asks for: something.com/secured/formXyz,server sends a login form,user logs in, fills a long and complicated form, but they are doing it so long that theirs session expires,user submits a form, but since the session is not valid anymore, login screen appears,once user logs in, server can process the submitted form, no need to re-enter everything again. OK, so let’s try other way around: Guess what?

AngularJS: 6 Common Pitfalls Using Scopes – TNG - The Nitty Gritty Within the last month Google's "Superheroic JavaScript MVW Framework" AngularJS has gotten a lot of attention. What makes this framework so successful compared to other JavaScript frameworks as for example EmberJS, is the value it adds to your HTML templates using (declarative) Data Binding. In the following I will describe some best practices when using AngularJS. If you are not familiar with AngularJS yet, please have a look at angularjs.org to get an overview and check out Kahlil's list of AngularJS Resources. Here are six main pitfalls when it comes to working with scopes in AngularJS. A Little Excursion #1: Two-way-databinding Two-way-databinding is a big word and kind of a big deal in AngularJS. Normal binding is generally used for outputting data, actually a general concept of templating engines. Hello {{username}}! Given the value of the variable username is set to John Doe, the previous example would render to this: Hello John Doe! That is direction number 1. Do you need more ideas?

AngularJS SEO with Prerender.io AngularJS is an excellent framework for building websites and apps. Built in routing, data-binding and directives among other features enable AngularJS to completely handle the front-end of any type of application. The one pitfall to using AngularJS (for now) is Search Engine Optimization (SEO). The Problem Search engines crawlers (or bots) were originally designed to crawl HTML content of web pages. If you are fully utilizing AngularJS, there is a strong possibility that you will only have one real HTML page that will be fed HTML partial views asynchronously. The Solution Rest assured, Google does have a way of indexing AJAX applications and your AngularJS app can be crawled, indexed and will appear in search results just like any other website. What We’ll Be Building Our application will be able to be rendered by Google bot and all his friends (Bing bot). How It Works When a search engine crawler visits your app and sees the <meta name="fragment" content="!" About Prerender.io That’s it!

AngularJS, Dependency Injection, and when is a singleton not a Singleton? There can be only one. The Singleton is the Highlander of design patterns. There can be only one. An example of a Singleton implementation might look something like this: from Tom Roggero The above JavaScript is from an answer from StackOverflow that seemed resonable. Singletons have some use cases, but it is generally considered poor form to use them. It is extremely handy to only have one instance of a thing within a certain context, so how do we gain the benefit of a Singleton, without the pain? Dependency Injection (DI) Dependency injection is a lovely thing. Most containers have a mechanism for providing context-based singletons. Context-Based singletons. With a DI container, we have contexts. Here’s a very typical line of config code in an AngularJS application. Instead we rely on AngularJS’s ability to inject dependencies. When we talk about a context-based singleton, these defined dependencies are what we mean. With Angular’s DI implementation, we are a bit limited. Conclusion

Using Yeoman to Create a Web Application ← Big Data Roundup | Meteor Web Application Creation → A guest post by Jonnie Spratley, who currently works for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products, and teaches a variety of programming courses at AcademyX. In this post we will discuss using Yeoman, which is a client-side stack that contains three tools and frameworks to help developers quickly build beautiful and scalable web applications. Yo is used to generate things, from other generators to files and more.Bower is used for dependency management, downloading and installing .js components.Grunt is used for task management such as building, previewing and testing. How To We are going to use all of these tools described above to create an AngularJS application. 1. Installation is pretty straight forward, since the official build script does all of the hard work for you. To install yo, grunt, and bower, execute the following command: $ npm install -g yo grunt-cli bower 2.