Category Archives: AngularJS

AngularJS – Render HTML in template

If you have a $scope variable containing a HTML string, the following example would escape the HTML and print it strictly to the screen.

Controller

$scope.htmlString = "<h2>Hello World</h2>";

Template

<div>{{ htmlString }}</div>

 

If you want to render HTML, add a filter. Continue reading AngularJS – Render HTML in template

Advertisements

AngularJS – Service VS Factory VS Provider

Design pattern is very important if you want to build a manageable and scalable application. In AngularJS, we could develop module, which is also regarded as a dependency, for specific feature and it could be injected to the controller whenever it is needed. This dependency injection design help us to build clean and well structured application and reduce redundant code.

There are different ways to create the dependency. Most common terms are service, factory and provider which are all singleton and you can find a lot of discussion online about their differences, when and how to use them. Here are some notes which summarize the AngularJS documentation about writing Provider.
 

 

1. When a dependency is injected to the controller, the injector from AngularJS framework will register a recipe such that the injected controller could make use of the type provided by the dependency.
Continue reading AngularJS – Service VS Factory VS Provider

AngularJS directives of Foundation

We got the Foundation 5 with Sass styling working on our AngularJS project which was scaffolded by Yeoman.

 

Let’s continue our ng-foundation example above.

To utilize the Foundation framework in a more effective way, the Mad Mimi team creates some native AngularJS directives based on Foundation‘s markup and CSS which is available on Bower.

Continue reading AngularJS directives of Foundation

Yeoman – Setup AngularJS and Foundation 5 with Sass

The generator-angular written by the Yeoman team comes with Bootstrap integration. But instead of using Bootstrap, i would like to use Foundation 5 with Sass. The following example is created under Node.js v0.10.29.

1. Create your project directory. In my case, i will name the project ng-foundation.

mkdir ng-foundation

 

2. Move to the ng-foundation folder.

cd ng-foundation

 

3. Scaffold the AngularJS project using the generator-angular as usual.

yo angular

Continue reading Yeoman – Setup AngularJS and Foundation 5 with Sass