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,
- A Homepage
- A page where we need to provide a way to add a note
- Once, we added, we need to display it (better in the same page)
What we really need (er.. in programming ‘Angular’ way),
- Route for homepage
- Route for Add page
- View – To display the ‘add’ page
- View – To display the added ‘notes’
- Controller – Grabs the input from user and send to a ‘service’ for saving the notes
- Services – Core process which saves the notes in ‘local storage’
Service: In angularjs, its way of writing a reusable code. I.e, specific common tasks
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
@angTut = angular.module("angTut", );
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!
@angTut = , here creates ‘this.angTut =’
this.angTut = angular.module("angTut", );
But, seriously, you should learn to write coffeescript,
- Its easy to write and clean to understand,
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’.
@angTut.config(["$routeProvider", ($routeProvider) ->
$routerprovider = $routeProvider;
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.
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”
$scope.save = ->
# some save code
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)
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!!!
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
bower install angular-local-storage
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
@angTut = angular.module("angTut", [']);
inject the name of the module we just have downloaded, which is ‘LocalStorageModule’.
@angTut = angular.module("angTut", ['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.
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!
addFn = (data) ->
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’
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
$scope.save = ->
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
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)
<!-- External Libraries