background preloader

Angular Gotcha's, Tips, Tricks & Best Practices

Facebook Twitter

Tip: directives with the same name. Since this blog is a blog for tips, let’s begin with the first one. You want to log the clicks on a ng-click directive. What could you do? We can take this first approach: Try it NOTE: Check the logging on your browser’s dev tools console. That works. Alright, let’s take a different approach. This is the “original” (almost :P) ng-click directive with logging. What’s the problem? What can we do? We created a directive with the same name, which will log when we click.

Conclusion By doing this we can write directives that we need to run when other directive appears. Random tricks when using AngularJS » Tomaka17's blog. If you don’t know AngularJS, it is a very good Javascript library that allows you to easily build web applications. Here are some random useful tricks that I found for AngularJS users. Ternary operator in expressions When you write an expression, like {{ id }}, you can’t use the ternary operator . But you can use the && and || operators. These two lines are identical provided that b always equals true: a ? For example: <p>This feature is {{ feature.isActivated && "activated" || "not activated" }}</p> This reason why it works is that "a && b" is treated like "if (a) return b; return a;" and "a || b" is treated like "if (!

Using arrays or objects inside expressions You can use arrays or objects directly from inside AngularJS expressions. <ul><li ng-repeat="day in [1,2,3,4,5,6,7]">Name of the day: {{ ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][day-1] }}</li></ul> This will output: Watching two variables are once function callback() { ... } $scope. $scope. Syntax of directives Usage : Example: What stumped me about AngularJS. So I've now built my first real application using AngularJS.

It's a fun side-project which my wife and I use to track what we spend money on. It's not a work project but it's also not another Todo list application. In fact, the application existed before as a typical jQuery app. So, I knew exactly what I needed to build but this time trying to avoid jQuery as much as I possibly could. The first jQuery based version is here and although I'm hesitant to share this beginner-creation here's the AngularJS version The following lists were some stumbling block and other things that stumped me. 1.

Similar to Backbone, I think, the default thing is to send the GET, POST request with the data the body blob. jQuery, by default, sends it as application/x-www-form-urlencoded. 2. The whole concept of needing to define the code as an app or a module confused me. Also, it's confusing why the the name of the app is important and why I even need a name. 3. 4. $scope.message = 'Changes saved! ' 6. 7. $scope. Git ready » learn git one commit at a time. Using the DOM in an AngularJS application - The Problem Solver. Using the DOM in an AngularJS application Index: Even though you should not manipulate the DOM in an AngularJS application but leave that up to AngularJS itself to do there are certainly places where you will need to interact with it.

For example you might want to react to events and do something in reusable manner. Sure you can use the ngClick directive to react to a click but there are cases where you need to react to a click and don't want to repeat the same click handler each time. The place to add these kind of interactive DOM related code in AngularJS is in a directive and not in a controller.

In fact a controller should never be aware of the DOM at all to keep it testable. In the previous blog post I showed how to use a directive with a template to make our HTML smaller and more reusable, in this blog post I am going to show how you could implement your own version of ngClick. A basic interactive directive 1: app.directive("myClick", function () { 2: return { 5: alert("I was clicked"); The Mooney Project » Angular JS: Navigator Pattern. New To AngularJS? Not sure what Angular JS is? The short version is that it is a client-side Javascript library. And unlike most of those libraries I’ve fooled around with, it’s very quick to get started with, and makes a lot of stuff really easy. Pulling data from JSON REST services. Hash-bang routing. Two-way data-binding. To quote one fella a few months ago: “It’s like a backbonejs and knockoutjs sandwich covered in awesomesauce. " The website is here: The best point-by-point introduction you can get is here: The best “let’s actually build something” introduction you can get is here: Even if you’ve worked in Angular JS in the past, go through the and TekPub videos anyway.

The Problem Back already? As you build out your applications, you’ll inevitably encounter some scaling problems. But the one problem I have not seen dealt with (to my satisfaction at least) is how to deal with the client side URLs. Using Angular.js with ClojureScript. Related MicroZone Resources Like this piece? Share it with your friends: When I wrote my last post on ClojureScript , I was really hoping someone would jump in and say: “You’re doing it wrong! Here’s how.” I did get some interesting replies, especially on HackerNews (where that post was briefly on the front page). Getting Angular to Work Anyway, Greg Weber here on my blog noted that you can actually use Angular with Closure – just need to use explicit dependency injection. In the end I’ve successfully rewritten the “todo” sample application. 01. 02. 03. (.push (. 04. 06. 07. 08. 10. 11. 12. 13. 15. 16. 18. 20. 22. 24. 25. 26. 27.

The last 4 lines are equivalent of using this array syntax in JavaScript: 1. Another way to do it is setting the $inject property, like this: 1. 2. As usually, complete working project can be found at my GitHub repository . Implementation Details In the above example I’m defining functions on CTodoCtrl by using “factory functions”. 1. 2. 3. 1. 1. Objects, Arrays 4. 4. Quick AngularJS Tip: Relating User Input Data to Metadata.

I started learning AngularJS a few weeks back because I thought it would work well for an internal tool I was building (more on that in a later post). Many AngularJS examples, including those in the current AngularJS tutorial (like this one), illustrate how to use the ng-repeat and ng-options directives using a typical JavaScript array of objects. So, given such an array in the model: 1. $scope.plans= [ ... you can output a list of the data like so: 1. 2. 4. 5. But, as noted in the AngularJS API, you can also use ng-repeat and ng-options to loop through a set of properties or keys in an object, and that works even if each property references another object. 1. ... and this HTML: 1. The advantage to using the latter technique comes into play when you want to relate something in the part of the model you want to preserve or process with a part of the model that provides metadata.

Taking the above examples a step further, say you want to create a short conference registration form. 02. 03. 05. 06. JumpStart Angular : Best Practices. In previous posts we have seen various aspects of AngularJS. We have seen model binding with ng-model, various angular directives like ng-app, ng-controller, ng-click, ng-repeat etc. Using these we can build highly interactive and dynamic website. So, it is the right time to get to know some of the best practices. Following these practices will improve code quality and helps us to overcome some hiccups. We will look into various examples explaining these and will try to follow these practices in further blog posts. 1. ng-app with application name. We have used ng-app in all our examples. ng-app defines the code block that is controlled by AngularJS.

Angular.module('MODULE_NAME',ARRAY OF DEPENDENT MODULES) With ng-app we can inject external modules( like angular-ui) or any custom modules. 2. ng-controller in application scope. Controllers are javascript functions. Angular.module('myApp',[]).controller('NAME',definition). 3. ng-bind/ng-cloak instead on inline expression ({{..}}) display: none ! AngularJS Do’s and Dont’s | Next Big Thing. Since the past year, I have been observing the market and adoption of AngularJS in the wild. I really like what I am seeing. It surely has come a long way from being called a toy framework, esoteric research framework to where it is today. Having worked with this framework from the start and having answered quite a few questions about it on Stack Overflow I have noticed a few common mistakes that people do when working with AngularJS. I will in this post attempt to address a few of these problems and what would be the right way to do the same.

DONT : Access DOM in the Controller This is the most common pitfall and probably the one that has been covered quite a lot in both the official site and elsewhere. I wont bother to add much to this except I will try to analyse WHY this is a mistake. I hope anyone who has been in the field of programming for any considerable time should have heard about the Law of Demeter. This is important for multiple reasons. DONT: Use Selectors in Directives data. Rapid Prototyping with AngularJS | 12 Devs. The idea hits you like a lightning bolt. It’s inspiring, transfixing and gripping! You scribble down a design, grab your computer, fire up your tools and… spend the next ours banging your head against a wall of JavaScript as your inspiration slowly drains away. That’s not right – code should never get in the way of building a great idea.

I’m going to show you a library called AngularJS that can help you get from inspiration to working prototype fast. It’s not designed as a rapid prototyping tool – in fact, it’s a full-featured MVC client-side JavaScript framework designed to allow you to add functionality to HTML… but you can get the marketing spiel elsewhere. Let’s just build an app. There are a million and one “hello, world” Angular tutorials – hell, I wrote one – but today we’re not going to worry about the really simple stuff, you’re too good (looking) for that.

Good to know This article is about rapid prototyping. Photo viewer The plan is to allow users to add, tag, and search photos. The Angular Way. This kind of interaction, data binding, and view synchronization would be easily be a maintenance nightmare if it wasn't for a framework such as Angular. Being able to update a model in one place, and have Angular update all relevant views almost feels like cheating. Adding, removing, or moving a layer is just a matter of changing an object. layer.x += 10, done. There's no need to invalidate the view by hand, or to manually update each instance of the layer in the DOM. Or to even interact with the DOM, for that matter. Angular enabled us to go places we wouldn't ever have dreamt of, such as setting up a bunch of keyboard shortcuts that are enabled based on the current context of the application.

For example, text editing shortcuts, such as ⌘ B to toggle bold text, are just enabled when we're editing a text layer. Angular enabled us to go places we wouldn't ever have dreamt of. Honestly, it's as if we weren't writing a web application anymore. Controllers declared on the global scope. Superspeed your angularjs apps. AngularJS renders HTML incredibly fast.But when rendering large DOM trees like containing tables with sort able columns, filtering and stuff ... it might get slower than you want ...While working on Orangevolt Ampere (which is heavily based on AngularJS) I realized a few remarkable performance tricks.The hints detailed in this article can improve AngularJS pages rendering up to 1000% and more - no kidding !

Performance is actually not a AngularJS problem - it's YOUR code. Let me explain you why:If you read the excellent answer over at Stackoverflow: Databinding in angularjs then you might noticed that AngularJS compares the last rendered data with the current datamodel whenever $apply was called to evaluate which parts of the DOM must be updated.That's - simply said - the whole magic behind AngularJS.With that knowledge you may guess the answers to the following questions:What happens when a INPUT element with attached ng-model changes its values during user input ? Kickstart Your AngularJS Development with Yeoman, Grunt and Bower. Whether you love or hate it, there’s no denying that AngularJS is the framework on every developer’s lips. It may not be for everybody, but AngularJS has a quirky, efficient and powerful feature set. Couple that with a few useful development tools like Yeoman, Grunt and Bower and you’ve got yourself an incredibly fast rapid prototyping process. What we’ll cover This AngularJS tutorial will cover: Generating a bare bones AngularJS app with YeomanUsing Grunt to speed up development and help perform repetitive tasksUsing Bower to add third party plugins/frameworksMaking minor changes to your AngularJS app Prerequisites To get the most out of this tutorial we recommend you have the following skills and resources available: A terminal and basic knowledge of the command lineNodeJS and NPM installedFundamental JS, CSS and HTML knowledge Files You can find a repo of this tutorial project here.

Let’s get started yo! Alright, let’s get this thing underway. Npm install -g yo grunt-cli bower Yeoman yo angular. Angular.js : Advanced Design Patterns and Best Practices. Currently Open Tabs: Resources For Using AngularJS - Jun 10, 2013 by Jared Williams Although this list is not actually a complete or accurate list of my currently open tabs (I have since closed some, as well as, working on a page for DevTools docs), this is a list of tabs I have either open, or have opened at one time. You may have noticed more and more recently, that Angular.js is growing in popularity among Front-end Developers. I’m personally a big fan of it, and I would like to share some more things which I’ve come to learn about it in the near future.

Until the, here’s a list of tabs which are mostly focused on developing with Angular.js, but a few others thrown into the mix as well. Handy Tricks With Developer Tools. AngularJS Tips and Tricks - AngularJSChicago. Random tricks when using AngularJS » Tomaka17's blog. AngularJS is too humble to say you’re doing it wrong. For years, web application developers have used DOM manipulation tools like jQuery to control their user interface.

Astute developers have taken it to the next level with client-side templating tools like Mustache and Handlebars.js to build sophisticated user interfaces on the client side. And then AngularJS came along. And we all realized we’ve been doing it wrong. Way wrong. The Old Way Remember before you discovered AngularJS? HTML that defines your page JavaScript that downloads AJAX data HTML that defines a client side template (yeah, this: <script type="text/html">... You thought that was pretty cool. But then AngularJS showed you how you were wrong. The New Way Under AngularJS, your code can be organized like this: HTML that defines your page and client-side templates inline JavaScript that downloads AJAX data How does that even work?

The answer: Data Binding . Data Binding is the secret sauce of AngularJS (along with a couple dozen other delicious spices and condiments). The old way. What are the "Best Practices" for getting data from a Rails Applicatio. AngularJS Dynamic Templates - Yes We Can! AngularJS and recursive template. AngularJS - Using Partials Dynamically Within Other Partials. Best practices for unit testing angular directives. AngularJS tips'n'tricks part 2 - revolunet blog. AngularJS tips'n'tricks part 1 - revolunet blog.

4 Tips for a Great First-Use Experience. ActiveRecord: When aggregating nested children, always exclude children marked for destruction. AngularJS tips and tricks for neophytes and the all-around curious developer. – bytes for thought. Rocky Jaiswal | Angular.js Hacks. Why its best practice to inject $rootScope and $controller unit testing controllers? Best practices for unit testing angular directives. Testing Rails App with Testacular and AngularJs. Testing Rails App with Testacular and AngularJs. Modeset/teaspoon. Testing - How to setup Rails-Angular project to test JS. Angularjs - testacular / karma skips my e2e test. AngularJs e2e Testing: How to have expect() handle non-future objects. Zach Snow | AngularJS: Expecting `expect` to Work as Expected. Scenario Test Runner: expect(1).toEqual(1) should pass. AngularJS Tips&Tricks. AngularJS unit testing | Foo's Geeking Out.

Angular Modules and RequireJS best practices? I Wish I Knew Then What I Know Now -- Life With AngularJS. AngularJS tips and tricks for neophytes and the all-around curious developer. – bytes for thought. Angular.js : Advanced Design Patterns and Best Practices. I Wish I Knew Then What I Know Now -- Life With AngularJS. Code Organization in Large AngularJS and JavaScript Applications — Cliff Meyers. Quick AngularJS Tip: Relating User Input Data to Metadata. Behaviour of Scope in AngularJS Directives. Modeling Data and State in Your AngularJS Application. AngularJS, Dependency Injection, and when is a singleton not a Singleton? AngularJS: What are the best practices to organize large angular projects. AngularJS: 6 Common Pitfalls Using Scopes – TNG - The Nitty Gritty. Angularjs - Angular - Best practice to structure modules. Angularjs - What is the best practice for making an AJAX call in Angular.js.

AngularJS Best Practices - Jaco Pretorius. Why does Angular.js rock? Structuring an Angular Project. Simulating Latency for AngularJS $http Calls with Response Interceptors | Brillskills. AngularJS – usin’ $apply. Learn AngularJS in 5 steps - revolunet blog. AngularJS and a JS prototypal inheritance gotcha |

Angular.js real app experience, problems and solutions at Belarus Ruby on Rails User Group meetup. AngularJS: What are some time-saving tips every AngularJS user should know. AngularJS: What are some tips, tricks and gotchas when using AngularJS. AngularJS: What are some undocumented bugs/gotchas when using AngularJS in Internet Explorer. Angularjs - When writing a directive, how do I decide if a need no new scope, a new child scope, or a new isolate scope. Recommendations for large single page application with 'portal' or MDI like functionality using AngularJS. AngularJS Modules for Great Justice | Coding Smackdown TV. AngularJS Pain Points - Jaco Pretorius. 5 AngularJS Power Features that are awesome in non-trivial webapps |

Modeling Data and State in Your AngularJS Application. AngularJS tips'n'tricks part 2 - revolunet blog. AngularJS Tips and Tricks [UPDATED] ☢ Lessons Learned: A Year with a Large AngularJS Project. Using AngularJS? Stop using jQuery as a crutch. Some AngularJS pitfalls - Branch and Bound. Brian Ford. Adventures in Software With Joel Hooks - @jhooks. What stumped me about AngularJS. 8 Tips for Angular.js Beginners | The Discussion Delegate | Vercingetorix Technologies | iPhone, Android, Blackberry, PHP, Generatrix, Wordpress App Development in Pune, India.

Some opinions on developing with AngularJS. Things I have learned working with AngularJS | Código Vivo. Things I Wish I Were Told About Angular.js. 4 Lessons Learned Doing Angular on Rails. AngularJS MTV Meetup: Best Practices (2012/12/11)