AngularJs Tutorial 2 – Structuring and automating your application

Okkkay.. So, now you know something about AngularJs like i do.

Now, you gotta start to write your own application.  So how you gonna do it? Well, simple, write few files(index.html and script.js), link the AngularJs script, thats all!!

But, Yea… You’re forgetting an important point, that is, what if your Application grows? Everything grows in time, right? So, you must be sure to setup the files in a proper way, and thus by later adding should be easier than before, how do you do it??

There comes “Yeoman!!!” with their buddies “GruntJS” & “Bower

 

I’m not gonna talk about these stuffs coz they are already neatly told in their site, so, look into it.

With this, we can use Angular with Yeoman.

So, what I’m gonna to do is, HOW TO USE THESE STUFFS TO MAKE A COOL ANGULAR APP!!!

Here we go!!!

(Just a reminder before continuing, you actually don’t need to do below stuffs before working on AngularJs, you can just include the script in your html page and start working in it, its really simple. But, If you’re going to work on an application, you need proper setup, configurations, some automation (like auto page reload, auto coffee2js compilation, auto sass to css…blah..blah..).

Below steps may seem big, but, it wont take more than 15mins of your time, which will easy your work in the future)

For Windows:

  • Install Ubuntu 😛

For Ubuntu:

1) Install Yeoman

  Yeoman requires several stuffs to be integrated, but, they also wrote a cool script which does these stuff for you.

https://github.com/tomlane/Yeoman-scripts/blob/master/scripts/old-installer.sh

(One thing, I prefer ‘0.9’ Version, 1.0 seems still in beta and most importantly, i haven’t used yet :P)

2) Install AngularJs with Yeoman

3) PreCheck

With the Help of GruntJS, you can run this application in a separate port

Open the browser and hit <http://localhost:3501>

4) Install Bower

Why we need this?

As we go on, we start to require more and more external scripts and plugins. There will a ‘dependency’ issue. Bower, a cool thing, which manages these things

Save a ‘.bowerrc‘ file in your project path with the below content

Now, lets install ‘angular’

Now, you will see, it’ll download and save angular in ‘app/components’ folder and also, a ‘component.json’ in the application directory – The use of this file is, later, say you can manage version of these external library files and also, give to your colleage and ask him to run just ‘bower install’, these will automatically install all the packages mentioned in component.json

Note 1: You could do bower install from yeoman itself, but, for some reason, it doesn’t read .bowerrc config file 🙁 (or i don’t know how ^^”)

Note 2: Since, we are managing our dependency from components folder, you can remove the existing angular.js files from “app/scripts/vendors”

The idea is to move these dependency files/folder outside of our application.

Finally, You’ll Have this Structure

As, you move forward, say, you have a blog and blog user controller

But, the thing is, Angularjs doesn’t have any structure and naming conventions, its both good and bad.

So, you could follow any structure you can, but, make sure, you follow one (atleast one like I’ve used)

Okay…. Lets move on how to write a simple application using AngularJs with lil help from CoffeeScript 🙂

UPDATED!!!

For the folks who wanna jump started, I’ve added a Repo in GIT. Check it out (seriously, checkout :P)

https://github.com/sk8terboi87/angularjs-tutorial.git

(Branch: structuring-automatting)

Behold… AngularJs is here! About AngularJS for serious dummies!!

AngularJs for Beginners

Many of the Geeks around this year have started using AngularJS seriously! If you’re the one’em of the people saying … “uh.. what is AngularJS?”, You’re in the right place dude!! Because you better start using it now, its the next(already!) big deal in UI Development

AngularJS for dummies

So… what is AngularJS?

  • AngularJS is 100% JavaScript, 100% client side thing.
  • Powerful, Open-source JavaScript framework
  • Not exactly a MVC Framework, but much like MVW (Model-View-Whatever)
  • Mainly for building “Rich client-side applications”
  • Oh yea, It is Done & Maintained by Google!

Why AngularJS

  • Extends HTML vocabulary, (i.e) Use HTML special markup for angular to extend your application
  • Provides lot of flexibility to separate presentation logic from business logic and presentation state… and much more!

Standout Features in AngularJs

1) Two Way Data-Binding

2) Hail…. Dependency Injection!

3) MVW

4) REST

5) Deep Linking

6) Unit Testing & E2E Testing!

What you shouldn’t do?

1) Try not to mess up with DOM directly, AngularJs does for you

2) Don’t combine much jQuery in Angular.js, Refer: http://docs.angularjs.org/api/angular.element, only if not present go for jQuery

How it Works?

It really look complicated in the beginning to understand, may be you can leave this for later.

Still curious, check here!

More About The Features:

1) Two Way Data-Binding

In simple terms, (If you have framework idea), “Whatever you change in VIEW, will be reflected in MODEL Automatically, and vice-versa!” Cool-huh?

Still don’t get it?

2) Dependency Injections

It call is simple (again), DI is… Magic! DI is how use/inject a dependency of other class into the class you’re using! They way you’re using, shouldn’t complicate your unit testing. To get a clear idea, what is DI, check here!

3) MVM

AngularJs is called MV* Framework. I.e, Model-view-whatever framework. It has some advantage when you’re building application by separating you’re presentation and business logic layer.Check this post for more about this!

4) Unit Testing

With Great Code comes Great Unit Testing. Nevertheless of any language, your code should be Unit testable.  AngularJS written in a way which is perfect for unit testing. Preferably, Jasmine http://pivotal.github.com/jasmine/

Difference between Angular.js & Backbone.js

Data-binding
The most prominent feature that separates the two libraries is in the way models and views are synchronized. Whereas AngularJS supports two way data-binding, Backbone.js relies heavily on boilerplate code to harmonize its models and views.
REST
Backbone.js communicates well with RESTful backends, while AngularJS’ $http service is more flexible, connecting to remote servers either through a browser’sXMLHttpRequest object or via JSONP.
Templating
To handle views, AngularJS uses customizable HTML tags. Backbone.js, on the other hand, requires a templating engine, such as Underscore.js.

http://en.wikipedia.org/wiki/AngularJS#Comparisons_to_Backbone.js

Also, Check it out the difference between jQuery & AngularJs here. There aren’t the same!

So, shall we get it started?  AngularJs Tutorial 2 – Structuring and automating your application

If you wanna find more resources for angularjs, peek here

Sublime Text 2 Tips and Shortcuts

Sublime Text is the new awesome text editor out their right now. I know some people still prefer so many editors like Notepad++, Eclipse, Dreamweaver… But, if you’re the one looking for light-weight and fast editor (and smoooth).. Sublime Text 2 is the right girl for you!!!

Why Sublime Text 2?

Awesome File Lookup!!

Once you import your project/any folder into sublime, just press <pre>ctrl + p</pre> and start type any name of the file, its just fetches in lighting fast way

Instant Preview Thing!

Just click any file in the project bar and bamn!!! It shows the preview, how cool is that?? It means, you don’t have to open the file actual to peek it!

Package Control!

You gonna love this, it is like plugin and once integrate it, you will get all sorts of cool plugins, like, SVN Integration, Bracket Highlight, Coffee Compiler, GIT, LiveReload etc.,

(For how to install  package control, click here)

Multiple Select Edit

Sometimes, you want to make change of every line or add space in front of everything, instead of find and replace stuff, do this

<pre>Put the cursor on any line you want to edit and do the “Ctrl + left click”, you will see another cursor, keep on doing that and start typing, you can edit all the stuff in same type</pre>

Also, Double click any character, you will see highlight on the matched texts (like Notepad++), but, when on pressing <pre>ctrl + d</pre> all those match will get selecting and you can edit in same way!

Other Tricks

ctrl + r-> Function lookup

ctrl + shift + p -> Shortcut for most of things you want

ctrl + p -> type “#”-> To search within the file

ctrl + r-> To jump to symbols

ctrl + g -> To go to a line number.

ctrl + d-> Duplicate line