Angular2 - First Impressions – Minko Gechev's blog. On 18th of September 2014 was pushed the initial commit of version 2.0 of the AngularJS framework. A few weeks ago the core team at Google, published AngularJS’ 2.0 website and gave a couple of talks on ng-conf about their new router, change detection, templating, etc. I’m passionate about AngularJS since its early versions so I decided give it a try using the quick start. In the meantime I and also created an angular2-seed project for my test, dummy projects. In order to have a better understanding of what is going on (and handle the lack of documentation) I dug inside their source code. I had great time doing this, what I saw was one of the most well written and smartest pieces of software I’ve ever read. Soon I’m planning to expand my paper “AngularJS in Patterns” with design patterns used inside Angular2.
In this blog post I’ll share my first impressions of the framework and I’ll try to keep them as less subjective as possible, although my affinity to AngularJS. Quick FAQ: New Router. AngularJS best practices: Be careful when using ng-repeat’s $index. November 10, 2014 – 12:54 pm Tags: AngularJS, JavaScript “A customer reported they deleted an item and the wrong item got deleted!” Sounds like a pretty serious bug. This is what we got one time at work. Attempting to locate it was quite difficult, because naturally the customer had no idea what they did to reproduce the issue. Turns out the bug was caused by using $index in an ng-repeat. A simple list with an action Let’s look at an example of a perfectly valid ng-repeat, and its controller.
<ul ng-controller="ListCtrl"><li ng-repeat="item in items"> {{item.name}} <button ng-click="remove($index)">remove</button></li></ul> app.controller('ListCtrl', ['$scope', function($scope) { //items come from somewhere, from where doesn't matter for this example $scope.items = getItems(); $scope.remove = function(index) { var item = $scope.items[index]; removeItem(item); };}]); Looks OK, right?
Adding a filter Now, let’s do a small change: Let’s add a filter to the list. Using $index should be avoided. Egghead. ...disclaimer, Angular 2 is a work in progress and many things can and will change. Angular 1's "Hello World" example looked exactly like this, where you created an ngModel and it had a your name property.
You bound to your name, so it set up this your name property on the scope, and then set up a watcher. If your name ever changed by this input changing, then this would also update. Angular 2, on the other hand, treats this quite a bit differently, because instead of ngModel, you now work with the elements and their values themselves. If you want a value off this input, I say, hey, I want a reference to this input, I'll just use the pound sign and "ref," you could name that anything. Then you bind to ref.value, meaning, look at this input and grab the value, because this ref is pointing to that input. Now, if I refresh here and I start typing, nothing will happen because it hasn't set up any watchers.
Then we'll just log out, Angular clicked. Optimizing AngularJS: 1200ms to 35ms - Scalyr Blog. Edit: Due to the level of interest, we’ve released the source code to the work described here: Here at Scalyr, we recently embarked on a full rewrite of our web client. Our application is a broad-spectrum monitoring and log analysis tool. Our home-grown log database executes most queries in tens of milliseconds, but each interaction required a page load, taking several seconds for the user. A single-page application architecture promised to unlock the backend’s blazing performance, so we began searching for an appropriate framework, and identified AngularJS as a promising candidate. Following the “fail fast” principle, we began with our toughest challenge, the log view. This is a real acid test for an application framework. An AngularJS log viewer At heart, the Log View is simply a list of log messages. One page can easily have several thousand tokens.
Analysis Using Chrome’s Javascript profiler, we quickly identified two sources of lag. Results Conclusion. Uploads only images (with canvas preview) The Magic Of Angular Dependency Injection. Топ10 ошибок, совершаемых при разработке на AngularJS / Хабрахабр. На настоящий момент AngularJS — один из самых популярных javascript фреймворков. Его использование упрощает процесс разработки, делая AngularJS великолепным инструментом для создания небольших веб-приложений, но возможности фреймворка не ограничиваются этим и позволяют разрабатывать большие, наполненные разнообразным функционалом приложения. Комбинация легкости в разработке и большое количество возможностей привели к широкому распространению, а вместе с распространением появились типичные, часто встречающиеся ошибки.
В этом топике описаны наиболее распространенные ошибки, встречающиеся при разработке на AngularJS больших проектов. 1. Структура папок, соответствующая MVC приложениям AngularJS является MVC фреймворком. Templates/ _login.html _feed.html app/ app.js controllers/ LoginController.js FeedController.js directives/ FeedEntryDirective.js services/ LoginService.js FeedService.js filters/ CapatalizeFilter.js 2. 3. Из кода ясно, что MainCtrl зависит от $scope and $timeout. 3.1. 4. 5. Creating Animations in Angular with ngAnimate | Thinkster. In the past, making web apps feel delightful with animations required programmatically adding and removing classes to DOM elements. For example, if I wanted to have an element bounce in using a custom CSS class using jQuery, it would look something like this: $('.item').show().addClass('bounceIn').
If I wanted to hide the element afterwards with a custom fade out animation, I would then have to call $('.item').hide().addClass('fadeOut'). As you probably know from experience, having this sort of logic littered throughout your javascript files quickly becomes hard to manage as your application grows in size. Before we dive into how Angular solves this problem, lets first think about when you typically want to animate DOM elements: after user interaction with your app, which then triggers displaying / hiding elements, moving elements in a list around, etc.
Sound familiar? This is precisely how Angular's ngAnimate module works. <div class="box-one" ng-show="test.showBoxOne"> Hello!