AngularJS: Services

AngularJS Service is very useful for providing repeated behavior, shared state, caches and factories. AngularJS Service are singleton for the scope of the application and each service is instantiated once and each part of your application gets access to the same instance of the service.

AngularJS Service is completely driven by the AngularJS dependency injection system and all internal services or your own create service can be injected into other service, directive or controller by specifying it as a dependency.

The $ prefix in AngularJS means they are internal services like $log, $http, $window and so on and it makes it easy to tell difference from your own custom service. (more…)

AngularJS: Controllers

What is a Controller

If you are familiar with the MVC architectural pattern then controllers are nothing new to you. But to for those that are not, the controller’s job is to receive input from the view and updates the model or get data from the model and and update the view. For further information about Model View Controllers click here.

By using the ng-controller directive on your html page (view) allows you to associate AngularJS controller to a view.

<div ng-controller="HelloWorldController">
</div>

(more…)

AngularJS: ng-repeat duplicate error

I came across a problem in Angular today with using ng-repeat directive.
For example if you have a list of numbers you want to iterate through and in that list you may have duplicate numbers, well ng-repeat will throw an error complaining about the duplicate value.

Here is an example code snippet of my html code with the problem:

<li ng-repeat="number in [1,2,3,4,1]">{{number}}</>

This is what I had to do to fix the problem:

<li ng-repeat="number in [1,2,3,4,1] track by $index">{{number}}</>

By telling ng-repeat to track each item by index each of the numbers in the list will be displayed.

AngularJS: Get Started

What is AngularJS?

AngularJS is web development framework maintained by Google and a large community of developers. It uses MVC (Model View Controller) capabilities to make both development and testing easier. It takes away all of the UI manipulation away while you can concentrate on working on the business logics.

Your First AngularJS

To demonstrate the basic AngularJS usage by making a simple page which allow the user to enter a name and the page will display a message follow by a message “Hello David”.

To get started we need to download the library from the web site or we can reference the library directly from Google’s CDN (Content Delivery Network) server. I am going to be referencing the CDN for all my demonstrations. (more…)

Shares