AngularJs Tutorial 6 — Pt 2 — Building a RESTful Application With PHP & MongoDB

Finally, I’m trying to make peace with myself by throwing those harmful thoughts into the oblivion (without actually falling into it). Everyone does know the term ‘she’ – can either kill or let you live.

Anyways…. Well, I hope you fellas have the idea about our previous thing http://code-like-a-poem.blogspot.in/2013/08/angularjs-tutorial-6-building-restful.html.

In this tut, we are gonna see how the API stuffs does it work and return backs the response to our blog tut.

So, What are the things we gonna see…

  • What the heck is REST & Why we need to use?
  • Building our Application as RESTFul Service using PHP Slim Framework and storing in MongoDB.
  • Sending back the Response to our AngularJS

What the heck is REST & Why we need to use?

“Representational state transfer or REST is a style of software architecture which conventionally consist of clients and servers. Clients initiate requests to servers; servers process requests and return appropriate responses. Requests and responses are built around the transfer of representations of resources. – wikipedia

Previously, people used ‘web services’ using SOAP. There are lot of good things on using a RESTful service

  • Less overhead (no SOAP envelope to wrap every call in)
  • Less duplication (HTTP already represents operations like DELETE, PUT, GET, etc. that have to otherwise be represented in a SOAP envelope).
  • More standardized – HTTP operations are well understood and operate consistently. Some SOAP implementations can get finicky.
  • More human readable and testable (harder to test SOAP with just a browser).
  • Don’t need to use XML (well you kind of don’t have to for SOAP either but it hardly makes sense since you’re already doing parsing of the envelope).
  • Libraries have made SOAP (kind of) easy. But you are abstracting away a lot of redundancy underneath as I have noted. yes in theory SOAP can go over other transports so as to avoid riding atop a layer doing similar things, but in reality just about all SOAP work you’ll ever do is over HTTP

Building our Application as RESTFul Application

Now, you have the idea what is REST thing, the ingredients to make our application are,

  1. PHP Framework, Slim Framework will do (since your app is not that big)
  2. To store our data, we choose Mongo (Read here for more intel)

Traditionally, we use to install to our third party packages by,

  • Visiting there download page and click download
  • Unzipping, keeping in a folder
  • and using ‘require or include’ in all our applications.

It all seems great then, but it will complicated and hard to manage our dependency between those third party packages. (For ex, version dependency between them to name a few). So, we will be using something called ‘Composer‘, a Dependency Manager thing. (I shoot a separate blog regarding your curiosity on why on using DM!)

Using Composer

    1. In a empty folder, named ‘API’, put a file called ‘composer.json’
    2. Download the ‘composer.phar’ file from http://getcomposer.org
    3. Add the below lines in ‘composer.json’

  1. As you guys can see, we have included ‘slim framework’ and a ODM for Mongodb’
  2. Now, all you need to do is ‘php composer.phar install‘ from terminal, it will install everything in a folder called ‘vendor’
  3. The last lines “autoload” is um… lil complicated to explain now (unless you heard about ‘namespaces and psr-o thing‘, not to worry, i tell ya soon).

(Pss, don’t forget, you must have installed Mongo and PHP-Mongo in your sys)

Deciding The Resource URL

Now, since its an RESTful application, all you have todo is to define the URLs for accesing particular resource. We need a URL for

  • Saving a blog     –   http://our-crazy-application/app/index.php/blog/add – POST
  • Retrieving our blog – http://our-crazy-application/app/index.php/blogs – GET

Eventhough, you can name URL anyway you can and ease any HTTP Method, its really ugly if you don’t follow the rules(sometimes!)

Time To Code… [/app/index.php]

1. Include ‘autoload’, which includes our Slim Framework & Mongo thing!

2. Now, we create the stuff when a POST data arrives

Now try to submit a form or use POSTMAN Rest Client to checkout the response.

Simple few lines to save your data and retrieve it, our REST Application is almost ready! Browse the code to get more clear idea about this https://github.com/sk8terboi87/simple-restful-tutorial-api/blob/blogs.

That’s it for now. In our next finally tut, we will see how AngularJs and our REST application successfully communicates and becomes a healthy application!!!

Updated:

Proceed to the Final Part:  http://code-like-a-poem.blogspot.in/2013/08/angularjs-tutorial-6-pt-3-building.html

References:

  1. http://stackoverflow.com/questions/90451/why-would-one-use-rest-instead-of-web-services
  2. http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm
  3. http://en.wikipedia.org/wiki/Representational_state_transfer
  4. http://www.ibm.com/developerworks/webservices/library/ws-RESTservices/
  5. http://en.wikipedia.org/wiki/Clean_URL

AngularJs Tutorial 6 — Pt 1 — Building a RESTful Application With PHP & MongoDB – Part 1

Its been seriously very long time and I been drifting away too far from coding stuffs! (I should blame that someone, but, seriously its a waste of time, I realized this late)

Anyways, Not too long ago we were talking about http://code-like-a-poem.blogspot.in/2013/06/how-to-decide-right-restful-api-server.html! Finally, I spent my entire Saturday on this stuff!!

So, What are the things we gonna see…

  • Updated structuring for AngularJS
  • Making an RESTFUL API Call
  • Use of AngularJs Resource

The example tutorial is simple ‘yet another blog’ stuff, now we are only going to see how to make the API call only and nothing else. (need to go slowly)

Structuring

Sometime ago, we have learned how to automate stuffs with the help of Yeoman and GruntJs. But, in growing application, we need to properly place certain files in certain places so we can jump to files easily(With the help of Sublime Of course!).

I really hate seeing a high experienced people still use window browser and a mice to open a file. shessh!

Also, since we all know in AngularJs, we can create an entire application in one js file (with all controllers, factories in file), it does become messy soon!

So, we first make a proper flow and then jump to real coding thing!!

(Note: Below structure is not a official one, i just created myself which seems… nicer and understandable)

bootstrap.js Its the actual ‘app.js’ we previously know it. I prefer this name since it ‘kick starts’ the application. Also, if u see this file, it only initialize the module and place of injecting other modules in it.

Configuration/

routes.js- All the routes goes here!

constants.js – This is the place for declaring ‘application constants’, which can be later injected into our application just like injecting a service or factory.

Collections

It has sub collection of particular module or collection(hence!) of we what we gonna to do.

Ex., blogs, users, categories… etc.,

Also, we are gonna keep blogs related ‘Model’, ‘Controller’, ‘Factories’ in it itself.

(Model – Its actually a AngularJs services and we using its a pass-through for API calls and initializing stuff. Since it seems more neat by making calls from model instead of directly making it from the controller)

Services

Here, we will use our custom wrote services and directives for the same, just like collections

Components

These are all third party scripts, including angularjs scripts, etc. (We install these via Bower)

Making an RESTFUL API Call

1. Creating the controller

[..coffee/Collections/BlogsCollection/create.coffee]

As you can see, we are creating a controller called ‘BlogsController‘ and injecting out module ‘restfulTut‘ in it.

  1. Inside the controller, we injecting $scope and BlogsModel (a service)
  2. Then, We are calling ‘BlogsModel.initialize()‘. we just invokes the services for setting up any scope initialization variables, like, pre declaring stuffs or clearing it.
    1. The use of this is to move all the predeclaring stuffs out of the controller, so later when we see or debug our code, we can clearly focus on the ‘actual’ controller logic to the service.
  3. Finally, we created ‘$scope.save = ->‘ which will be invoked when ‘save’ is triggered from UI page
    1. This in-turn, triggers the ‘BlogsModel.send(‘add’, $scope.blog)
    2. $scope.blog contains the actual values which we need to post into API
    3. Also, later, we can perform validation logic here!

That’s all there is in controller to make a successfully call. Now, lets see what our Model does.

[..coffee/Collections/BlogsCollection/model.coffee]

As you can see,

  1. apiRoutes has the actually API URL, we just need to declare all our API urls here.
  2. Currently, initializeFn(), just initiate the scope.blog. You will feel the real usage when your application grows
  3. sendFn() – with the help angular resource, we are making the actually POST call here!
    1. resourceURL+ apiRoutes[route] – http://192.168.0.2/rest-api/app/index.php/ (We are injecting resourceURL from contants.js then here, we are appending the rest of the url

That’s all fellas, if you have tried submitting the form, it will make a POST request to the server. Of course it wont work, we still gotta write the API section which we will see in the next tut!

 A little about Angular Resource,

  • In order to make an ajax request to server side, you can either use $http or $resource.
  • With $resource, there are lot of options to modify the request call. (also, with the help of javascript of defer and two-binding, you can easily update the view on receiving a callback). You’ll get it later on the upcoming tut.

Phew! You will get more clear idea when you browse the code https://github.com/sk8terboi87/simple-restful-tutorial-ui/tree/blogs

Upcoming Tut:

  • Using Slim framework
  • Use of Dependecy Manager – Composer
  • Using an ODM for connecting MongoDB (and saving it ofcourse!)

Jump to part two: http://code-like-a-poem.blogspot.com/2013/08/angularjs-tutorial-6-building-restful_11.html

AngularJs Tutorial 5 – Simple File Uploader (With Custom Data) using AngularJS

Helllo Geeks!!!

(ahem… This is continuation from previous post http://code-like-a-poem.blogspot.in/2013/05/angularjs-tutorial-4-file-upload-using.html)

If you have looked at our previous example, we have added simple uploader using AngularJs. But, as the previous didn’t allow any custom form data to be sent. (Because… it don’t know how to do that time xD)

Well, anyway… i had time to find that blueimp does allow custom data to send!!

Changes: 1

upload_with_custom_data.html

As you can see, we have add two inputs ‘firstname’ and ‘lastname’ (just an example!)

Changes: 2

upload_with_custom_data.html

customdata=”customData()” -> This is where our custom data will appended to the directive

Changes: 3

todos_upload_controller.coffee

(For more about directive with ‘sending function’, see here http://docs.angularjs.org/guide/directive)

Changes: 4 (Finally!)


to

(Note: that we are stringify the data before sending http://msdn.microsoft.com/en-us/library/ie/cc836459(v=vs.94).aspx)

Well, that all guys! This simple file uploader is packed & loaded for any cases! You’ll be receiving your custom data as $_POST[‘params’] in your server (I added that too).

Enjoy!!!

For entire difference log: https://github.com/sk8terboi87/angularjs-tutorial/commit/b32bc4e226b5f57b07aca43b53a0a254b25e55d4#coffee/diretives/uploader_directive.coffee

For entire code: https://github.com/sk8terboi87/angularjs-tutorial/tree/learning

AngularJs Tutorial 4 – Simple File Uploader using AngularJS with CORS

Today, what we gonna see is ‘How to create a simple Uploader using AngularJs‘ taking following things in consideration.

  1. We need a Server to store our uploaded files with the help of CORS (Since we are keeping API in different server).
  2. We need to make our uploader as a easily re-usable component. I.e Directives in AngularJs

(For the impatience cats: https://github.com/sk8terboi87/angularjs-tutorial/tree/learning)

Instead of creating a complete uploader using jQuery(ofcourse) from scratch, we can use an already one available in the web. And, the best one is The Blueimp uploader. (I’ve been using this since past 2 companies and seriously, this is the best one.).

It worked beautifully with Play! Java, then Cake PHP and… now boys and pretty girls, we gonna use this with the all mighty AngularJS. Eventhough, BlueImp uploader already provide AngularJs support, but…em… hard to use it as a simple reusable thing. (which i need it by upcoming Monday D:)

But… Thanks to the http://shop.oreilly.com/product/0636920028055.do, (gave by my mentor) they provide a simple directive to do a nice CORS based angularjs uploader with blueimp jQuery project. But, then again… I really don’t like copy-pasting other guys codes(entire stuff), so, I’ve rewrote on my own (much more simple and re-usable, but all thanks to him)
So, lets get started… (pss, we are gonna continue from our previous done Todo application

http://code-like-a-poem.blogspot.in/2013/05/angularjs-tutorial-3-creating-simple.html

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

Step: 1

Download blueimp using bower

Step: 2

Include required blueimp jquery files in our index.html

(Pss: Note that we got to include jquery before AngularJs)

Step: 3

Our custom uploader directive

Step: 4

Setting Up UI

I rewrote the actual example lil more customizable (may be not enough.. but, hey.. i tried)

As you can see, we included the directive ‘fileupload’ and passed several data to directive (know that, You SHOULD never send any data directly to a ‘directive’. i.e from controller to directive is wrong)

Step: 5

Setting Up Controller & Upload Service & Injecting in App.js

Thats it,

By now… you have simple working CORS based uploader using AngularJs and… it is simply re-usable. (yay :D)

Phew… It actually took only 15mins to write a working uploader & just an hour to customize it (and more than that for this blog xD)!! This simply shows the power of AngularJs in this reusable kinda of stuffs.

Here is the complete working copy 🙂


Note:

  • Don’t forget to change the upload url in app.coffee
  • I’m using blueimp server code from https://github.com/blueimp/jQuery-File-Upload/tree/master/server/php. For now, I’ve added that code in my UI itself in my checkout for now, make sure in put in different /var/www/ path and access that via yeoman running from 3501 port. This will show ya CORS implementation of our upload
  • IMPORTANT: 777 permission for files folder 😛

AngularJs Tutorial 3 – Creating a Simple Angular Application using Coffescript

Well guys and pretty girls, by now you have grasped how to structure folder and how to setup AngularJs.

(If not, http://code-like-a-poem.blogspot.in/2013/04/angularjs-tutorial-2-structuring-and.html)

So, lets go to next step for, “How to create a simple application using AngularJS” –  A Simple Todo Application! will do!


(Just a reminder before continuing,  this is not actually your hello world example or not advanced stuff either. Below example just puts in between for “how to get started using AngularJs for a real world application”. If you are completely new (i.e zero knowledge), follow their tutorial http://docs.angularjs.org/tutorial/step_01, then continue mine)

Step 1:  Plan! Plan!! Plan!!!

Lets get down with basics, for how to create your application, so, you need to know what-is-what in AngularJs (i.e, its capabilities, atleast, its basics)

Note: Since, its first for you kiddies, lets not worry about saving in a ‘database’, for now, we just save in local storage. (Its a feature in HTML5, a way to store things in browser, like cookies, but, better…pss, google it)

What we need,

  1. A Homepage
  2. A page where we need to provide a way to add a note
  3. Once, we added, we need to display it (better in the same page)

What we really need (er.. in programming ‘Angular’ way),

  1. Route for homepage
  2. Route for Add page
  3. View – To display the ‘add’ page
  4. View – To display the added ‘notes’
  5. Controller – Grabs the input from user  and send to a ‘service’ for saving the notes
  6. Services – Core process which saves the notes in ‘local storage’

Tips:

Service: In angularjs, its way of writing a reusable code. I.e, specific common tasks

Controller: Like any another MVC, business logic goes here baby! (but, in javascript)

Step 2: Creating a Module in AngularJs

Note: In every blog of mine, you’re gonna learn many thing along with one thing…. so, get used to it. will helpful for you to become a ‘nerdy geek’ :D. Here, we are learning Coffeescript

What we here did is created a module for our application named ‘angTut’ and set to a object variable for latter usage. As we go on, We will be creating controller, services, factories and so many hardcore angular stuffs for our application based on the module we have just now created!

Tips:

@angTut = , here creates ‘this.angTut =’

Note: In anytime you have difficulty understanding Coffeescript in the beginning, just to jump to my codes have a peek the javascript https://github.com/sk8terboi87/angularjs-tutorial/tree/master/app/scripts

But, seriously, you should learn to write coffeescript,

  • Its easy to write and clean to understand,
  • Will creates complex javascript fasters, simpler and mostly in proper ‘javascript’ way
  • The only minus is…. you might forget javascript :P… just peek at your javascript after it getting generated

Step 3: Creating routes in AngularJs

Note: Like already said, you can name your file in way you want and for proper programmer thingy, you should name ‘real properly’.

using $routeProvider you can create a route for our application. Above code is pretty understandable.

With the help of ‘config’ method in angularjs, we are injecting the $routeProvider in it. Then, inside we are creating a individual route for ‘homepage’, ‘add’ page and finally, a default route if nothing is matched.

Tips:

Hope you fellas using Sublime Text 2, just don’t forgot to install ‘CoffeeScript’ from package manager for Coffescript syntax hightlighting

Step 4: Creating a Controller in AngularJs

Note: All the links we access in web browser for angular js goes like ‘http://localhost:3501/#/add‘, note the ‘#’.

Now, If any one type the above url, we just to load the TodosController and the view in “views/Todos/add.html”

just like we created a route using ‘angular.config’, we are creating a controller and injecting ‘$scope’

$scope is everything in angularjs, all the data passed from view to controller and controller to view (remember the two-binding?) will available in $scope

And $scope.save is a function which will be triggered from view (don’t worry, i’ll show ya)

Tips:

Don’t forget to set a proper a tab size for making a code more readable. you can set tab size in ‘Settings – User’ in sublime editor. and use ‘indent as space instead of tab’ by clicking in lower right ‘Tab size’ display

Step 5: Creating a View in AngularJs

In our ‘add.html’, we need a form which should send a data to our controller

ng-submit – This takes of submitting data to our controller and save() should a method in our TodosController.

(How does it know it is in TodosController??  duh.. because we have said that in our routes :P)

ng-model – This is the two binding thing i was talking about. The value “ng-model=”note” will be available in our controller ‘TodosController , “save” method as $scope.note

Annnnnd…. any changes in $scope.note in our controller will be immediately updated in the view page. Tadaa… Two-way binding!!!

Tips:

note the ‘required’ keyword in <input… which does the minimum not empty client side validation. You can even write a depth client side validation using AngularJs

Step 6: Creating a Service in AngularJs

Now, once submitted, anything in input ‘note’ will be available in controller. what we now need to do is to store in ‘localstorage’ which i was talking about initially.

     Step 6.1:  Using a Third party module 

          There are many third party javascript libraries for AngularJs, we need a local storage library which  should lie between browser and our application

     To install the above,

    Step 6.2: Injecting a Third party module into our application.

         Now its available in folder, we need to our application so it can be used in our application for that, we need to inject into our module itself. In our app.js

        inject the name of the module we just have downloaded, which is ‘LocalStorageModule’.

 

Thats it!!! The rest of dependecy will be handled my AngularJs

Step 7: Using a Service in AngularJS

Now we have a layer ‘angular-local-storage’ which interacts with the browsers local strorage.

We can directly using it in our controller, right?? nope!!

You need to think….. that is providing another layer which interacts between the third party application and our controller, why? because, as we go on, later we might change this plugin or may be we just remove local storage and use a persistent storage. So, in order to avoid changing this is all of our controllers were we have used, we just write this code in a common place. i.,e ‘Angular Service’.

Note: Writing a service not only provide a common code usage, it also ease’s ‘unit testing’ which we will come later on.

Tips:

For making your code like more pretty,use single quotes instead of double (even if i used double in several places..whoops ^^”)

Oh, right… service!

Just like before, we are creating a service with the help of our module ‘angTut’ and name it as ‘todoService’

Inside we have created a function called ‘addFn’ and also, we have injected the ‘localStorageService’ (The actual third party service)

Thats it, we can write the ‘saving in local storage logic’ in ‘addFn’

Tips:

You can directly return the ‘addFn’, but, we have used ‘add:addFn’, because, later on, there will lot of get, set, blah.. blah.. function, and our code might look messy, doing this we can cleary see what are the avialble methods in services.

Step 8: Linking Controller and Services in AngularJs

Inject the service we have just created in our controller. and in our save method, we have called the add method in the service and also, we have passed the $scope.note, which has the input from the text box

Tips:

you might wanna switch to different files, for crying out loud, don’t open a folders and use your mouse and browse through all files and find it. In sublime text, use ‘ctrl + shift +r’ and starting typing the name of the file, thats it . (oh, don’t forget to import your project first)

Step 9: Linking all your Javascript files

If your following previous blog, “yeamon” will have converted all your coffee files into javascript files by now. Now, you need to link these scripts in index.html and let know our application is angularjs.

Step 10: Listing in AngularJs

Now you need to list all the datas you have saved in local storage. For fetching the data from local storage is same as i already said, just browse my for how.

In add.html,

ng-include – As you can see yourself, it inserts ‘list.html’ in our add.html. Even though its not really needed here, I’m just telling that, you can reuse ‘.html’ pages too!

In list.html

{{note}}

ng-init – On page start up, it triggers the list() function of the current controller, (in this case, TodosController)

ng-repeat – This is more like a for/foreach loop, which generates many <span>..</span> of {{note}} which is sub variable of notes json/array

Tips:

Make sure to close the </div> when using ng-include, else, the remaing html wont be render. Got me a headache for several minutes by forgetting this and also, notice, the single-quote inside the double-quote in ng-inlcude, which is also required. If you forget, angularjs wont say a thing >_<

Also, make sure, you read well of all “ng-” methods http://docs.angularjs.org/api/

Finally….

Now, every time you add something, all you need to do is update the $scope.notes, which will be IMMEDIATELY rendered in html without reloading the page (The magic of two-way binding)

The complete application is available in

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

Browse the code for complete application. I know you, right now, you might not had complete clarity and little confused, which is good, this allows to you to learn more… by yourself. 🙂

So, pull the code and try it yourself. Comment your thoughts (not too much :P)

References

http://gregpike.net/demos/angular-local-storage/demo.html

https://github.com/IgorMinar/foodme/blob/

http://js2coffee.org/

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

Creating Alias Directory for Apache in Windows

Well Ollllo there!!!!

So you have started creating your own project and i guess you’re wondering how to shortcut your project.

(For those who wonders “what is ‘aliasing’ directory”?)

To be short,

let say you have created a project “E:\Program Files\xampp\htdocs\blah\\trunk\myproject\app\”,

so… what do you do to load up in browser “http://localhost/blah/trunk/myproject/”. You might not feel it in the beginning, but as start to become curious (and lazy or wanna be quick), you could do like “http://localhost/myproject”

Ofcourse, you could just put your project directly in htdocs which might makes thing simple, buut… as we create more and more projects, we need to organize or need to use SVN or GIT, and need to follow their folder structure, so, you NEED to shorting things first. Not only it saves time… its cool! 😀

(Lets get started…. )

The example i’m gonna show below is for CakePHP.

1) Find httpd.conf file (must be somewhere here <E:\Program Files\xampp\apache\conf\httpd.conf> or whereever you have installed APACHE)

Find this line,

and change to,

(just removed the comment, i.e ‘#’)

2) Add a new file say, ‘myconfig.conf’ in <E:\Program Files\xampp\apache\conf\proj\myconfig.conf>

(lets keep the config seperate, so you can modify easily)

3) Add the below lines in ‘myconfig.conf’

4) Now, in httpd.conf, add the below line

5) Thats it, restart apache and hit <http://localhost/myproj>, it works!!!! but.. its not over it

6) (This is the step which got my nerve) You see the links (any link on those myproj) looks in unshorten form

Open, <E:/Program Files/xampp/htdocs/blah/trunk/myproj/app/webroot/.htaccess>, it should be like below

Thats all!!! 🙂

For reference, check it out:

http://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase

If you’re stuck with mod-rewrite, check: http://www.lancelhoff.com/enabling-htaccess-in-apache-on-windows/

Checkout more about Sublime Text2 here!

Goodbye Notepad++, Hellooooo Sublime Text 2 for PHP!!!

Updated: Check out the new article about VS Code and more features compared to sublime text 2!

Yo Fellow Coders & Newbies! 🙂 You might have used several editors for PHP and sure Notepad++ is the best one of’em (atleast for me :P)!!! But, recently i came a across another cool and “Lighhhtttiiing-fast” editor when i’m using Ubuntu. its Sublime2-Text!!! Its so amazing when considering speed at which file opens and its smoothness! I tried it in my Windows 7 and best as it is But, to me that’s just a basic armor with cool items to be integrated it with! For ex., you can do a runtime validation for PHP  during save or when typing itself useful Sublime Linter

error-1

Above is just a example, there are sooooooooooooo many cool packages/plugins you can install to make your pistol to like a gattling gun!!!

(If you wanna peek why Sublime Text 2, check it out here Sublime Text 2 Tips

Lets Get STARTED THEN!!!

Step 1: Install Sublime Text2 (duh!)

Download SublimeText2

Installing Sublime Text 2 on Ubuntu Linux

Step 2: Install Package Control (The gateway for Cool things to come!)

To do this

  1. Press Ctrl + ` in your editor, something like a console should show up!
  2. Paste the below line in it and …. Press Enter ofcourse!!!

3. Once done, restart sublime2, press “ctrl+shift+p” and type “Install package” and hit it!!! It worked for me in Windows 7 and Ubuntu 12.

(note: If you got problem installing Package Control, follow here or Google it!)

Step 3: Install some packages!!!

For PHP, the useful stuffs are, (You gotta do the below in Package Control: Install Package by “ctrl+shift+p”)

  1. PHPcs
  2. sublimelint

( restart sublime!! and try a PHP Example, you should get syntax during type and saving!!! cool-huh??)

Step 4: Theme! Theme!! Theme!!!

I’m a theme freak! The editor color matters!

Default will be “monaki” its good and dark and…and.. sllleeepp! I expect my editor to be bright (and makes me awake during tough times :P)!!

  1. Same good old package control and type: “Theme – Soda” (one of the best themes and styling in Sublime) , Ofcourse, nothing did happen :P. to complete the deal,
  2.  Open “Setting – user” from preference and enter the below within the json format (Dont ask what is json, google it)

     3. (Don’t forget to restart)

     4. Tadaaa!!! Check it now, it’d be much better now!

Step 5: To make it lil like Notepad++ (and not completely!)

  1. Download color theme packages.
  2. Click “Browse packages from Preferences”, Find “Color Scheme – Default” Folder and place the two files inside it (The files you got from colour-schemes.zip). Thats you can use those themes!!!
  3. To make even more configuration, Open “Setting-users from preferences” and enter the below lines

(Found the above cool trick from http://www.jetmore.org/john/blog/2012/05/getting-up-to-speed-with-sublime-text-2)

As you can see, the tab switch will be like on notepad++ instead of something made of sublime2, which is somewhat different (Comment and check it yourself) and reindent is coool try it on your messy-messy code.

So, now you know… sublime2 settings are in json, you can easily configure anything, i mean anything (mostly) in these two settings! There are still many more packages (like https://github.com/facelessuser/BracketHighlighter).

Just google it, you find tons of cool things about sublime2 and yea, did i mention, its free!!!! (Eventhough you can purchase for a license!!) Sublime2 rocks!!! Though i miss Np++ a lot i used that for nearly 3 years… but, time to learn something new!  I even tried Eclipse Helios and Galileo, its good, but, its hell when installing plugins (For Java though, Eclipse Indigo is the best!!! A life saver for non-java programmers).