All posts tagged “AngularJS”

7 Free eBooks To Learn AngularJS

So you’ve been following this Angular series (if you haven’t, start from the top here) and have come to a point where you are somewhat comfortable with playing with Angular or even building an app with it. For a more complete guideline when studying a project, we can always go to ebooks.

Ebooks give you a structural and organized way to learn a new topic, and it is no different with AngularJS. The best thing about ebooks these days however is that it can be heavily supplemented with practical exercises that can help you strengthen your grasp and understanding of certain aspects.

Let’s explore AngularJS with these 7 ebooks – some comprehensive, some fun, but all educational and won’t cause you a dime when read online.

1. AngularJS In 60 Minutes

If you have already gone through the video tutorial by Dan Wahlin, titled AngularJS-ish in 60 Minutes, AngularJS in 60 Minutes is a great help. The ebook carries the transcription of the video (done by Ian Smith) with relevant screenshots and the timestamp of when a topic comes up. If you prefer some text to go along with the video, then this is the ebook to get.

2. Recipes With AngularJS

Recipes With AngularJS is written by Frederik Dietz and is available to read online and as an ebook on Leanpub and Amazon. A cookbook of sorts, Recipes is a highly comprehensive book that deals with learning Anuglar in an organized and easy to understand way. Each section carries problems, solutions and discussions that will help guide you through Angular effectively. The code examples shown in the book are available in GitHub.

3. Practical AngularJS

Using real-life scenarios and examples, you will be introduced to building simple applications with AngularJS and Firebase in Eclipse IDE. You’ll also learn how to add control, wire up and create components, inside Eclipse. There are also sections on how to use KarmaJS to test your applications, how to use Firebase, miscellaneous tricks and troubelshooting you can use. Practical AngularJS by Dinis Cruz is available to read for free and to buy on Leanpub.

4. AngularJS Succinctly

Here is another AngularJS book written by Frederik Dietz. AngularJS Succinctly contains 10 chapters of problems, solutions and in-depth discussion to help you grasp the idea of Angular quickly. Learn the basics on using controllers, directives and filters all the way to integrated platforms like Ruby and Node. All code examples are hosted on Github; you can grab them there to practice on your own.

5. A Better Way to Learn AngularJS

A Better Way to Learn AngularJS is a 12-part course that provides insight into AngularJS. It carries plenty of learning materials from multiple sources, from official documentations, videos, other books and plenty of screencast by Egghead. Adopting a gradual easy to advanced way of building simple applications with Angular, this book contains plenty of checklists for you to keep track of what you have learned.

6. Henriquat.re (AngularJS for .NET Developers)

henriquat.re is a continuously updated ebook that contains learning materials about AngularJS from a .NET developer’s point of view. So far, there are 7 topics covered, including Modularizing AngularJS Applications and AngularJS and IE 8. You can follow the writers, Ingo Rammer and Christian Meyer for more updates on the book on Twitter.

7. AngularJS with Ruby

AngularJS with Ruby on Rails is a book by David Bryant Copeland which will help you build a Rails application with AngularJS – in less than 10,000 words. You will need to create a skeleton app, build, test the run features, and before you know it, you have an Angular app powered by Rails. The book contains an introduction, four chapters and a concluding chapter.





hongkiat.com

5 AngularJS Frameworks to Get Apps Up and Running Quickly

Now that you are well-versed in the basics, it is time to get started on building your own web application with AngularJS. AngularJS made building a Javascript-based app more intuitive using what’s called directives, which works hand-in-hand with your HTML markups.

If building a web application from the ground seems overwhelming to you, not to worry. Some very generous developers have adapted a few frontend frameworks to support AngularJS. Like a typical framework, they come with pre-built web components. These make using the framework the perfect tool for anyone who needs to get a web application up and running quick.

Here are 5 frameworks you can use to kick-start a web-based application with AngularJS.

1. AngularUI Bootstrap

AngularUI Bootstrap, as the name implies, is built on top one of the most popular front-end frameworks, Bootstrap. This framework contains a set of Bootstrap components such as Carousel, Alert, and Collapse along with some additions, like Rating and TimePicker.

All these components have been ported to use AngularJS directives (ng-repeat and ng-controller) and custom HTML elements. For example, rather than using a <div> to wrap the Carousel, you can use a more “meaningful” custom element, <carousel> and <slide>:

 <carousel interval="slideInterval"> <slide ng-repeat="slide in slides" active="slide.active"> <img ng-src="{{slide.image}}"> </slide> </carousel> 

If you are a big fan of Bootstrap while also enjoy the power and the performance that AngularJS offered, this could be a perfect choice of framework.

2. Angular Foundation

Another popular framework that has also been ported to use AngularJS is Foundation, and it is simply named “Angular Foundation”.

Similarly, this framework has modified Foundation components to adopt AngularJS’s directive and custom HTML elements so you can now build your web application using more semantically named HTML element slike <top-bar>, <accordion>, and <pagination> , rather than the ambiguous <div>. Here is one example of how we add an Alert component with the <alert> element:

 <div ng-controller="alertArea"> <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($  index)">{{alert.msg}}</alert> </div> 

If you like Foundation better than Bootstrap, then this is the framework to go with. Download Angular Foundation in this page, or stay up-to-date with the project development through the Github repo.

3. Ionic Framework

Ionic comes with a handful of solid building-blocks that makes developing mobile applications easy and fast. Each component in the Ionic framework is optimized for mobile experience, which is basically dependent on touch and gestures. These UI components are also made up of custom HTML elements. In deploying a tabbed navigation, for example, you would use the <ion-tabs>:

 <ion-tabs class="tabs-default tabs-icon-only"> <ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline"> </ion-tab> <!-- The rest of the tabs go here --> </ion-tabs> 

To make it even easier and faster to build your application, you can use Ionic Creator which lets you build your app by drag-n-drop. So if performance and speed is important to you, Ionic is the best framework to go with.

4. Mobile Angular UI

Mobile Angular UI is a mobile UI framework which is an extension of the Bootstrap framework, aimed to build mobile applications. It uses most of Bootstrap 3 syntaxes with some added specific mobile components such as switches, overlays, sidebars and scrollable areas. It is only dependent on AngularJS and you can easily bring your current web app into mobile version by adding provided CSS to turn your content responsive and touch-enabled.

Download this framework here

5. UI Grid

UI Grid is the best way to work a grid or table with Angular. It has rich features to display simple, and also complex and large datasets on a grid. UI Grid is designed to execute complex features only when needed, thus keeping the core small. With UI Grid you can bind cells to complex properties/functions, run column sorting and filtering, edit data in place and more. To change styles of your data grid display, use Customizer.

Get the latest UI Grid from its homepage.





hongkiat.com

15 Useful AngularJS Tools For Developers

Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with Angular on your own, you’re on the right post. We have here some tools that can streamline your development workflow.

We’re looking at 15 of the best IDEs, text editors, tools for testing & debugging, modules and development tools and apps for building with Angular. If you have your favorite tools or apps, do share them with us in the comments below.

IDE & Text Editor

In the programming world, there are two types of editors: full featured Integrated Development Environment (IDE) and lightweight text editors. Both allow for faster development workflow. The IDE and text editor we listed below are pretty good tools to speed up your Angular development. They can be easily configured for the Angular environment.

WebStorm

WebStorm is suited not just for Javascript but also HTML and CSS. It has an awesome live editor which lets you see your coding results on the browser without frequent refreshing needed. By default, their newest version carries the AngularJS plugin bundle although you will need to include the Angular script in your project first. For more details, read the WebStorm blog post.

Aptana

Aptana is a free open source IDE which is actually the customized version of Eclipse focusing on Javascript, HTML, CSS and other web goodies. To extend Aptana for Angular support, all you need to do is install the AngularJS Eclipse extension from the Eclipse Marketplace.

Sublime Text

One of the most popular text editors available, Sublime Text is loved by many because of its customizability to adapt to any kind of programming environment. It is also fast and has customizable code snippet support, and has many packages including the AngularJS package which allow you to work with Angular. Here is a great post by Dan Wahlin you can check out about this.

More on Sublime Text:

Testing & Debugging Tools

Testing and debugging are important parts of the development process especially in an environment like Angular. Here are some of the tools that can help you test and debug your application.

Karma

Karma is a great test runner made for Angular, but can also be used with any other Javascript framework. It supports any type of testing: unit testing, midway testing and E2E testing. Karma works by opening browsers that you list in the configuration file. It then communicates with the active browser using socket.io and asks you whether to run the test or not.

Jasmine

Jasmine is used for behavior-driven development (BDD), but you can use it for test-driven development (TDD) with a bit customization. It is usually coupled with Karma: Karma as the test runner, Jasmine as the test framework. Jasmine will automatically inspect all your Javascript classes and functions and notify you of unhandled code. The drawback is it doesn’t know which environment (browsers) the test performed, but Karma compensates for this disadvantage.

MochaJS

When compared to Jasmine, MochaJS is more flexible but Jasmine comes as an all-in-one package. With MochaJS, if you want to use spy framework, you need to set up Mocha with its appropriate library like sinon.js. And if you need assertion framework, Mocha needs to be configured with a framework like Chai.

Protractor

Protractor is probably the most powerful automated end to end (e2e) Angular testing tool. Developed by the Angular team, Protractor is built by combining some great technologies available today like NodeJS, Selenium, webDriver, Mocha, Cucumber and Jasmine.

Angular Batarang

Besides Protractor, another great tool developed by the Angular team is Angular Batarang. Batarang is a Chrome extension for debugging Angular applications. After inspecting your app, Batarang will show you the model, performance and dependency debugging results in three different tabs. You can also control the inspection, deciding whether to show the applications, bindings or scopes.

ng-inspector

ng-inspector is a browser extension supported on Chrome and Safari. Unlike Batarang which shows up in DevTools, ng-inspector prefers the side panel display instead. You can inspect and highlight DOM elements as you hover over a scope. You can also see the scope and model updated in real time.

Modules

The best place to find Angular modules is ngmodules.org. But if you need a quick overview, below is a list of some good resources we’ve collected for you.

AngularUI

AngularUI is a collection of UI components built with AngularJS. Its utility directives help you build Angular applications faster. Instead of widgets, AngularUI uses raw directives like ui-router, ui-map, ui-calendar etc. The directives you’ll probably like the most is its UI-Bootstrap which can natively create Twitter Bootstrap in Angular. Check out its clean and nice documentation page to get started.

ng-Table – Sorting and Filtering Table

If you need tables in your web application, the kind that can be sorted and filtered, then ngTable is the tool you are looking for. It also supports variable row heights and great pagination capabilities.

Restangular

With Angular, you may have a hard time working working $ resource and $ http for creating Rest API. Restangular can help make the usage of get, delete, update and post data requests easier. Some features that set Restangular apart from $ resource are HTTP method support, self-linking element, promises usage and many more. Find out more here and check out the live demo on Plunkr.

Angular Gettext

Angular-Gettext is a superb Angular module for super-easy localization. The key features are you can translate your web app as easy as adding attribute. It lets you focus on your app development and leave all translations to Angular-Gettext.

Tools & Apps

Lastly, we’re just going to leave this here. It’s a list of more tools and apps that can probably make your Angular development process easier and smoother. They work well with those who are just starting to pick up Angular.

Generator Angular

Yeoman has a code generator called Generator Angular. With this tool, you can speed up your Angular development with only couples of terminal command. It can automatically generate development server, unit and framework testing, view, directives and more.

ngDocs – AngularJS Reference

ngDocs is an Android app that provides AngularJS documentation and references, nice and simple. Some basic tutorials are also available if you are new to Angular. There are additional features like a developer guide and error reference that you may like to see. With this on your Android device, pick up on Angular wherever you go.





hongkiat.com

10 Best Tutorials To Learn AngularJS

AngularJS is an awesome Javascript framework that can be used to create powerful and dynamic web apps. It also covers the building of complex client-side applications. Since its release in 2009, AngularJS has been widely used by many developers for its convenient extending of custom HTML tags and attributes, known as ‘directives’.

For some people, learning Angular through its official documentation is not enough. They prefer a video-based tutorial instead, or a more sophisticated learning site with specific discussions, a demo, the try it yourself feature and the like. So in this post, we’re listing 10 AngularJS tutorial and screencasts that will kickstart your Angular learning.

1. Year Of Moo

This well-written tutorial by Year of Moo is going to teach you the very basics of how AngularJS works and what it can be used for. It covers all the primary parts of Angular: Modules, Dependency Injection, Routes, Services, Directives and more. It also give you a brief explanation of Angular usage with MooTools and jQuery. You probably want to read their second article for more Angular tips and tricks.

2. AngularJs On Codeacademy

If you like to learn by coding then this AngularJS tutorial by Marcin Wosinek is what you’re looking for. In this tutorial, you’ll learn about Angular basics, controllers, services, filters and directives. In each topic, you’ll be given explanations and instructions on some challenges which can be solved within the editor. If you get stuck, just open a hint.

3. AngularJS Tutorial on Tutorialspoint

Tutorialspoint accommodates you with a well-structured AngularJS tutorial. It divides each Angular component into specific sections. You’ll also get an appropriate example and editable live demo in each section. Here you’ll learn the basics of Angular from Setting Up the Environment until Internalization. There is also a Quick Guide that summarizes all you should know about Angular.

4. Thinkster.io

Thinkster offers you a unique method of learning AngularJS. They split up all of the Angular topics into 12 parts. In each part, you’ll see a brief topical explanation followed by tick-able useful readings. The reading materials are mixed up, coming from other sites and Angular official doc. Also checkout this course companion that guides you in building modern web apps.

5. AngularJS Tutorial by Todd Motto

Todd Motto, a Google Developer Expert, wrote a 10,000-word Angular tutorial on AirPair. This is a great tutorial that teaches you the very basics in AngularJS concepts. There are about 14 topics included here like engineering concept, form validation, templating with Angular and more. At the end of each topic, you’ll find related useful resources for further reading.


Image source: AngularJS Tutorial

6. AngularJS From Beginner To Expert

In Ng Newsletter, there are tons of materials about Angular, plus a 7-step guide to help turn beginners into experts. Ng Newsletter also has three ebooks on Angular (also available in print on Amazon) and snippets from the 600pp book are featured on the site, spread across 25 days.

7. AngularJS in 60 Minutes

This video tutorial may be a good starting point for learning the fundamentals of AngularJS. Dan Wahlin gives you a rundown of what you need to know about Angular: the concept, the basics, resources and a demo. There are also specific section links you can jump to. If you have learned the basics, you may want to advance your learning with his Learning Angular by Example or other related posts.

8. Egghead

Egghead is probably one of the best AngularJS learning centers. It provides 190+ free AngularJS videos for learning Angular in a straight and easy way. All videos range from 2 – 10 minutes only. The code, discussion and summary are available below the video. There are also PRO subscriptions to advance your learning starting at $ 14.99/month.

9. Intro To Angular

If you want to learn AngularJS by example, tutorials from Curran Kelleher may fit you. It has about 50 examples which cover single-page-app concepts, related libraries and Angular features. Video tutorials are available on Youtube and split into two parts: Part I and Part II. You can get all source code examples on GitHub.

10. Shaping Up With Angular

Shaping Up With Angular is a complete free interactive Angular course bundle from Code School. It teaches basic Angular, directives, services and forms via video tutorials, challenges and downloadable text tutorials. It’s broken down into 5 levels which has about 12 videos and 27 challenges. There are 6 earnable badges if you complete all of the levels.





hongkiat.com

Add interactivity to HTML with AngularJS

Read more about Add interactivity to HTML with AngularJS at CreativeBloq.com


With the new emphasis on web technologies from companies such as Google and Facebook, and the maturing Node.js framework, web technologies have taken centre stage and are maturing rapidly. Web development is on the verge of a huge shift. When we build a web application today, we are forced to separate the structure from interactivity, and build the application in two stages.




Creative Bloq

Getting Started With AngularJS

Every once in a while a new tool arises and just as it suddenly appeared, it seeps down into oblivion. Not AngularJS though. While it’s been around since 2009 since its creation by Misko Hevery, AngularJS has been gaining a lot of attention in the past couple of months.

People are talking about it, developers have been integrating it in their works, and authors have been writing books about it and earning loads of cash. So, what is AngularJS and why should you hop on it? Is it life-changing? It sure is! Let me tell you why.

Note: I highly recommend that you get comfortable with JavaScript first before delving deeper into AngularJS. If you aren’t familiar with MVC and DOM, I suggest reading more about them before proceeding further, otherwise you might get confused with most of the terminologies used in this article.

What is AngularJS?

AngularJS is not just another JavaScript framework. Sure, we have Backbone, Ember, and the hottest jQuery, but AngularJS is different in many ways.

Data-Binding and Built for Single-Page Applications (SPA)

Firstly, AngularJS is a data-binding framework that is specifically built for SPAs. Meaning, you can easily build an application without using any other libraries since it already has everything you will ever need. It also maintains synchronization for the model and view.

The beauty of building a SPA is that it imitates a desktop experience in which the page remains the same all throughout, with only the views being changed along with the URL – AngularJS handles routing as well as views. It’s faster and smoother this wa. It’s as if you’ve just opened a desktop application and having everything you need already there.

Another thing is that unlike other SPAs, the browser history is actually kept. For example, if you want to click on the back button to get back to the previous view, AngularJS will actually take you back to the previous view. Most SPAs don’t work this way.

Model-View-Controller Implementation Done Right

AngularJS implements MVC in a beautiful way. Most frameworks that use MVC requires you to separate your application into modules and then write code that will connect them together. While the reasoning behind this is to make the code work more flexible and reusable, this leads to many coding horrors, especially for lazy (or sleepy) developers. AngularJS handles this beautifully by simply requiring you to just split your application into different modules. It then handles the rest.

Animation

Of course a single-page application can’t look good without the appropriate animations. As mentioned earlier, AngularJS is a feature-rich framework that has all of the things you’ll need in building generic applications. As such, it provides an easy way to introduce animation in every view the same way as jQuery does.

Here’s a good example of how AngularJS handles animations.

But that is just the surface of AngularJS. Here is more of what it can do:

  • Data validation
  • Dependency injection
  • Handle custom logic
  • Multi-element directives
  • Share data between controllers
  • Enhance HTML
  • DOM manipulation with the help of jQlite (built-in)
  • AJAX
  • Routing
  • Testing
  • and many more

A Comparison

Now, let’s take a peek on how AngularJS works by comparing it to the regular JavaScript and jQuery.

Vanilla JavaScript

Without using any JavaScript library, this is how it looks when you display the data you input in real-time.

 <html> <head> <title>Vanilla JavaScript</title> </head> <body> Name: <input id="textInput" type="text" /> <br/> Your name is <span id="name"></span> <script> var textInputElement = document.getElementById('textInput'), nameElement = document.getElementById('name'); textInputElement.addEventListener('keyup',function(){ var text = textInputElement.value; nameElement.innerHTML = text; }); </script> </body> </html> 

JQuery

With jQuery, displaying the data you input becomes much simpler since most of the back and forth is handled by jQuery. Thus, enabling you to write less code.

 <html> <head> <title>jQuery</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> Name: <input id="textInput" type="text"/> <br/> Your name is <span id="name"></span> <script> $  ('#textInput').on('keyup',function(){ $  ('#name').html($  ('#textInput').val()); }); </script> </body> </html> 

AngularJS

AngularJS takes everything up a notch. Not only is the framework lightweight, the way you write your HTML becomes easier too.

 <!DOCTYPE html> <html ng-app> <head> <script src="angular.min.js"></script> <title>AngularJS</title> </head> <body> Name: <input type="text" ng-model="name" /> <br /> Your name is {{ name }} </body> </html> 

As demonstrated above, the beauty of AngularJS lies in making you write less code while maintaining integrity for your application. There is little back and forth across the code, since most of the stringing up of modules is done by AngularJS. Another noteworthy thing is that you don’t have to manipulate the controllers in order to make changes on the view.

Limitations of AngularJS

AngularJS is not all sunshine and rainbows. If you are aiming to create an application that does simple calculations – a calculator, a puzzle game, animations, dynamic forms and the like – then AngularJS is the framework you are looking for.

However, if you are building a big and intensive application like a management tool, you might want to veer off from AngularJS since it’s not developed for that, or at least use other frameworks in conjunction.

AngularJS is built for rapid prototyping, specifically for generic applications, but there are instances when you can use it to build applications of larger scales, but that is yet to gain popularity.

AngularJS Resources

Learn the fundamentals of AngularJS at CodeSchool. It’s a free course that is sponsored by Google. It teaches one how AngularJS can be used from many different angles. Don’t forget to check out AngularJS’ YouTube channel where the developers themselves publish tutorials and news updates.

But if you are more of a documentation sort of developer, you might want to check out the AngularJS API documentation. For people who are proficient in JavaScript, this documentation should be easy enough to breeze through.

You don’t need to reinvent the wheel either as there are a lot of modules that you can use and improve at ngmodules.org’s repository.

If you have the funds and are serious about learning AngularJS, I highly recommend checking AngularCourse.com with its 7 hour HD video course that will help you build a real-life product.

Are you a redditor? If you are, you can check out /r/angularjs for community discussion and support.

AngularJS In Action

ngSweetAlert

It’s a very sweet replacement for JavaScript’s monotonous “Alert”.

Angular-nvD3 Charts

As previously mentioned, you can use AngularJS for simple to intermediate calculations. Using Angular-nvD3, you can customize your charts according to your needs.

Shaking Login Form

You can even spice up your forms while having validation. Don’t forget to check out the tutorial!

AngularJS Sliding and Word Search Puzzle

This simple puzzle shows how flexible and simple AngularJS is. Don’t forget to fork it on Github as well.

2048 Game

Remember this game? It’s 2048 and the number is nowhere to be seen because I don’t want to get addicted again. The game has been remade using AngularJS. How cool is that? Check out the tutorial and learn for yourself!

Conclusion

AngularJS is a powerful framework that can help developers expedite development of web applications. The use of AngularJS is becoming more and more popular as the days go by, and I highly recommend hopping on the trend as there is a dynamic and helpful community out there waiting for you to join!





hongkiat.com

AngularJS: A Detailed Guide for Beginners

You’re reading AngularJS: A Detailed Guide for Beginners, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

AngularJS: A Detailed Guide for Beginners

If you’ve not got your hands on AngularJS yet, you’re missing awesome features that can really make the most of HTML for web apps. Unlike Backbone.js and Ember.js, AngularJS is a next generation JavaScript framework where each component works with every other component in an interconnected way to make your web applications stand out. This […]


Advertise here with BSA


Designmodo

Beginner’s guide to building web apps with AngularJS

Read more about Beginner’s guide to building web apps with AngularJS at CreativeBloq.com


Get on board with Google’s web app framework




Creative Bloq