{"id":1102,"date":"2014-10-23T14:45:49","date_gmt":"2014-10-23T11:45:49","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1102"},"modified":"2014-10-23T14:36:51","modified_gmt":"2014-10-23T11:36:51","slug":"first-baby-steps-with-angular-js","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/first-baby-steps-with-angular-js\/","title":{"rendered":"First baby steps with Angular.js"},"content":{"rendered":"

This article outlines some of my notes of a webinar about Angular.js I recently participated at. These are really just “baby steps” in that it covers the very basics that might help to get started. Since these are really my first steps with Angular, I might have misunderstood some of the stuff. So feel free to help me improve this article<\/a> ;)<\/p>\n

Info:<\/strong> the source code of some of the examples described here can be found on the GitHub repo<\/a>.<\/p><\/blockquote>\n

 <\/p>\n

 <\/p>\n

The App<\/h2>\n

ng-app<\/code> represents the angular application. ng-app=\"myApp\"<\/code> does normally have a corresponding<\/p>\n

angular.module('myApp', []);<\/pre>\n
in some JavaScript file.<\/p>\n
Data Binding<\/h2>\n
{{}}<\/code> are placeholders in HTML that are being interpreted by Angular. Similar as in other popular templating engines like Mustache<\/a>. It only represents a unidirectional<\/strong> binding though.<\/p>\n
ng-init=\"text=Hello World\"<\/code> allows to introduce variables. After such a declaration you can reference text<\/code> and its value.<\/p>\n
<div ng-init='text='Hello World''>\r\n  <p>Value: {{ text }}<\/p>\r\n<\/div><\/pre>\n
If we want to achieve bidirectional bindings<\/strong> then we have to use ng-model<\/code>.<\/p>\n
<input ng-model='text'\/><\/pre>\n
Controllers<\/h2>\n
As one would assume, controllers<\/strong> are responsible for a certain HTML area they are bound to.<\/p>\n
<body ng-controller='MyController'>\r\n  <p>{{ welcomeMessage }}<\/p>\r\n<\/body<\/pre>\n
angular.module('myApp')\r\n  .controller('MyController', ['$scope', function($scope){\r\n    $scope.welcomeMessage = 'Hi, welcome to the Angular tutorial';\r\n\r\n    $scope.sayHello = function(name){\r\n      alert('Hi ' + name);\r\n    };\r\n  }]);<\/pre>\n
Filters<\/h2>\n
What is quite handy on the output is that there are lots of filters<\/strong> available that allow you to customize it, like reversing the output:<\/p>\n
{{ welcomeMessage | reverse }}<\/pre>\n
Pipes (|<\/code>) are used to apply the filter to some value. You can also combine several once (just like unix pipes). There are predefined ones on the official docs for predefined ones<\/a> and custom ones like our reverse filter above. Implementing it is quite simple:<\/p>\n
angular.module('myApp')\r\n\r\n    \/\/ factory function\r\n    .filter('reverse', function (){\r\n        \/\/ directly return a function\r\n        return function(text){\r\n            text = '' + text;\r\n\r\n            \/\/ execute reversing\r\n            return text.split('').reverse().join('');\r\n        }\r\n    });<\/pre>\n
Events and Services<\/h2>\n
Similarly as simply binding values you can also attach click handlers like<\/p>\n
<body ng-controller='MyController'>\r\n  <input type='text' ng-model='name' \/>\r\n  <button ng-click='sayHello(name)'>Say Hello<\/button>\r\n<\/body><\/pre>\n
Note how the databound variable name<\/code> can be directly passed to the sayHello(..)<\/code> function.<\/p>\n
angular.module('myApp')\r\n  .controller('MyController', ['$scope', function($scope){\r\n    $scope.welcomeMessage = 'Hi, welcome to the Angular tutorial';\r\n\r\n    $scope.sayHello = function(name){\r\n      alert('Hi ' + name);\r\n    };\r\n  }]);<\/pre>\n
In order to not fill up the controller with lots of logic, you should extract them in re-usable services.<\/p>\n
angular.module('myApp')\r\n  .factory('MyGreetingService', function(){\r\n    return {\r\n      sayHello: function(name){\r\n        alert('Hi ' + name);\r\n      }\r\n    };\r\n  });<\/pre>\n
The above construct represents a factory method for creating the service which is uniquely identified by MyGreetingService<\/code>. Note that services are singletons<\/strong>.<\/p>\n
On the controller you then inject<\/em> the service as follows:<\/p>\n
angular.module('myApp')\r\n  .controller('MyController', ['$scope', 'MyGreetingService', function($scope, greetingService){\r\n    ...\r\n\r\n    $scope.sayHello = function(name){\r\n      \/\/ invoke the service\r\n      greetingService.sayHello(name);\r\n    };\r\n  }]);<\/pre>\n
Variables prefixed by $<\/code> are those provided by Angular.<\/p>\n
Directives<\/h2>\n
Another powerful concept of Angular are directives<\/strong>. They aim at bringing web components<\/a> to you, augmenting the HTML with custom elements.<\/p>\n
<hello-world><\/hello-world><\/pre>\n
The <hello-world><\/code> is implemented as follows:<\/p>\n
angular.module('myApp')\r\n    \/\/ the name of the directive defines the final HTML tag that\r\n    \/\/ has to be used.\r\n    .directive('helloWorld', function(){\r\n        return {\r\n            restrict: 'E', \/\/E=Element, A=attribute, C=css class or combined EAC\r\n            \/\/template: '<p>Hello, world!<\/p>', \/\/inline specification\r\n            templateUrl: 'helloWorldPartial.html' \/\/load from HTML file\r\n        }\r\n    });<\/pre>\n
The restrict<\/code> property specifies the kind of element, whether it is a HTML element, an attribute or CSS class. You can also mix more of them.
\nThe rendered template can be either specified inline using the template<\/code> property or in a separate file, using templateUrl<\/code>. The latter one is the suggested way especially when you have more complex HTML code.<\/p>\n
Note:<\/strong> HTML isn’t case sensitive and as such also custom HTML tags should not be written in camel case but rather be separated by a dash.<\/p><\/blockquote>\n
If you want to get a deep-dive into how directives work I absolutely suggest you Misko Hevery’s meetup video<\/a>.<\/p>\n
Structuring and Modules<\/h2>\n
An Angular module is defined like<\/p>\n
angular.module('myApp', []);<\/pre>\n
This example code shows the definition of the application in myApp.js<\/code>. While there is no restriction on how an Angular application should be structured, a module\/widget structure is suggested. Hence, rather than organizing your app in controllers<\/code>, models<\/code> and views<\/code> folder…<\/p>\n
\"angular-bad-organization<\/a>
Bad organization.\u00a0Source<\/a><\/figcaption><\/figure>\n
..structure it according to the functionalities or modules, like calculator<\/code>, contacts<\/code> etc., depending on the kind of application you’re creating.<\/p>\n
\"angular-suggested-organization<\/a>
Suggested organization. Source:\u00a0Source<\/a><\/figcaption><\/figure>\n
I did already write about such modularity in JavaScript MVC applications<\/a>.<\/p>\n
In my example code<\/a> I have an app that contains a “calculator” module. The folder structure looks like<\/p>\n
- <calculator>\r\n  - calculatorController.js\r\n  - calculatorService.js\r\n  - index.js<\/pre>\n
The index.js<\/code> defines the module:<\/p>\n
angular.module('calculator', []);<\/pre>\n
Each of the other files like the controller and service have to be defined within that module.<\/p>\n
angular.module('calculator')\r\n    .controller('CalculatorController',...<\/pre>\n
Finally, myApp<\/code> needs to load the module (in myApp.js<\/code>):<\/p>\n
angular.module('myApp', [\r\n  'calculator'\r\n]);<\/pre>\n
What’s kind’a odd is that although CalculatorController<\/code> is defined within the calculator<\/code> module, you don’t have to prefix it in the HTML code:<\/p>\n
<div ng-controller='CalculatorController'>...<\/div><\/pre>\n
Wait, this might get tricky and lead to potential name clashes when including multiple modules. Yep, and it seems like currently this is the solution:<\/p>\n
As of today AngularJS doesn’t handle namespace collisions for services so if you’ve got 2 different modules with the service named the same way and you include both modules in your app, only one service will be available.
\nFor the moment the best option is to prefix service names with a custom prefix… StackOverflow<\/a><\/cite><\/p><\/blockquote>\n
Where’s jQuery?<\/h2>\n
Can I use it? Angular uses a lite version of jQuery. The suggested approach is to avoid using jQuery directly and go as far as you can by using directives, controllers and live binding. However, jQuery can obviously be included. If so, you need to include it before the angular.js<\/strong> script include.<\/p>\n
<head>\r\n  <script type='text\/javascript' src='jQuery.js'><\/script>\r\n  <script type='text\/javascript' src='angular.js'><\/script>\r\n  ...\r\n<\/head><\/pre>\n
Angular will detect it and use the included jQuery version rather than its own lite version of it.<\/p>\n
Generally speaking the use of jQuery should dramatically decrease due to live binding and Angular directives<\/strong>.<\/p>\n
There’s a lot more…<\/h2>\n
This article really just covers what was covered in the webinar. There’s a lot more that has to be taken a look at in order to create a fully featured single page application like routing, views, unit testing…<\/p>\n
Question to the speaker<\/h2>\n
Here are two questions I posed to the speaker.<\/p>\n
You mentioned about using Angular directives sparingly. Why?<\/strong><\/p>\n