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
I am working on an AngularJS project with html5mode enabled. I would like to implement the Card Expansion effect written on Codrops. Everything works fine but the SVG clip-path animation doesn’t work.
This is because i have ended the <base> tag in the index.html for the html5mode so the clip-path value has to be an absolute path. i.e.
<!-- fail with base tag --> <image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>
Change to
<!-- it works! --> <image clip-path="url(http://localhost:10000/project#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>
If you want it to work on IE, please refer to the post in the reference.
Done =)
Reference: StackOverflow – Svg clipPath in AngularJS app with url in hashbang mode
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
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.
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
Let’s continue our tour on Yeoman.
Bower is a tool to manage your js dependencies of your project. you can find out all the dependencies on the bower.json. The bower.json below is the one initialized in the AngularJS project.
Continue reading Manage your project dependencies using Bower
We get the Yeoman working last time.
Now, we can use Yeoman to scaffold a AngularJS project. =)
1. Install the angular webapp generator.
npm install -g generator-angular
Eureka! 