Introduction & installation

It was a long time I would try a first application with AngularJS. I have read a simple tutorial in one of my favourite (french) magazine GNU/Linux Mag written by Tristan Colombo. The main goal of this application is to record simple logs message with AngularJS, Twitter bootstrap for CSS, Node.js for server side.

After uncompressing and moving files, I have structured folders like this :

And my index.html seems like this :

First expressions

AngularJS allow use of expressions and filters. To understand this concepts, I use this index.html :

OK. The first expression computes a simple sum and displays the result. The second, executes the filter uppercase on text “My Blog Madamadasune”. The third uses the float value 35.5432, format this value in string with 2 decimals, and then diplay currency depending of locale.

Modules

Modules are used to architecture Angular application ; we simply use them to split behavioral concerns into distinguished module in order to have small, readable and logic module instead of one big module. We also create module in a specific file, for example my_module.js

Module could depends on another modules. In that case, we have to liste dependencies in the second argument array. For example :

Finally, we just have to add a declaration on pages using this module  :

Controllers

Controllers implements behavioral nature of a module. Of course, a module can have many controllers. Let’s see a example :

 This controller just assign some hard coded data to the data variable.

 In this page, we just diplay the attribute name of the data object. We just have to declare the controller by directive ng-controller on the tag using this controller.

Forms

Same style is used to build forms. The principle is to bind some attributes with directive ng-model with html fields. Moreover, we can bind event with ng directives and controllers functions.

 We’ll use more forms features in next full example.

It’s useful to know that Angular will automaticaly set CSS classes to html elements depending of some states. For example, an invalid field will receive ng-invalid CSS class.

Services

Services are commons built-in features but you can create your owns too. For example, $http service is useful to execute asynchronous request to a server. $log can write into javascript console. We have to declare the needed services by explicit declaration or by $inject. I have just seen array declaration, for example to use $log service :

Full example

You can get a full example on my github repository by forking or download sources at https://github.com/tlallart/angular-first-steps/.

After cloning or dowloading/uncompressing, you should have a folder like this :

To run, we need a Node.js server with SQLite3 module.

 Personnaly, I have installed a binary of node.js and manually installed module. However, you could also install it with your package manager.

 Then modify my .bashrc to add node.js bin directory in my PATH and add NODE_PATH as environnement variable pointing to lib/node_modules folder :

Finally, to install SQLite3 module, I just run :

Start the application, from sources folder by running :

Then go to http://localhost:3000/index.html with a Web browser. You’ll see a page with theses 2 tabs :

---

 

             

 

---

How does it works?

Now, let’s see how this application works!

Index.html just contains imports of js and css files and a menu-tabs directive.

Now let’s see js code, we’ll see other html code later.

First, the node.js server code :

In this code, we need http, fs, url, path and sqlite3 modules.

First, we create db if it doesn’t already exist.

Then we handle 3 types of requests :

1) display returns the logs

2) add a log entry

3) any other request.

Let’s see the code of the tabs :

Here, we just handle the tabs navigation by setting active / inactive the tab depending on tab status.

In this tab, we display a table containing logs entries. By using, ng-repeat directive, we can iterate through logCtrl.logs data.

In this add form, we bind form elements with data model with directive ng-model. So, formCtrl controller will get a data object with username and msg field values from the html form when user will submit it.

Last file is app.js. This file declare the logModule module, create the directive menuTabs from template tabs.html with 2 functions : isSet(tabIndex) and setTab(tabIndex).

Then, this file create a ‘data’ object which is our model.

Finally, it create 2 controllers logCtrl and formCtrl for each tab. First have a function to display logs by sending a http request to node.js server using $http service, second have a function to send a new log by sending a request to node.js server using $http service too.

Conclusion

Well…. it’s not so hard! I haven’t writing Javascript code since years but, with tutorials and some MVC concepts knowledge it was enough. I think Angular really helps to better architecture our code and, even if it’s sometimes a bit confusing, it’s certainly a really good framework.

Next steps

For me, testing is really important and is part of our developpers work. I haven’t check testing framework (CasperJS? PhatomJS?) and build tools (Grunt?). I can’t start a real project without this kind of tools. So I found this free pdf book to read : Pro AngularJS.