Write once and reuse your code (ng-include)


#1

One of the big benefits of using Canvas, is that you now can leverage productivity tricks like the angular function ng-include, which enables you to include code blocks in your page.

A good use case is a table or modal that should be used in more than one location. Just put all the relevant code in a separate html file in your Canvas directory and reference that code with the following code:

<div ng-include="'html/include/user_detail.html'"></div>

This will be the same as putting the code directly in your page, but with the added benefit that any change to the include is automatically reflected wherever it is referenced.


#2

Also ng-include can be used without additional html tag:
<ng-include src="‘html/include/user_detail.html’" >
</ ng-include>

Make sure you put your string path into additional single quotes, otherwise angular will try to evaluate expression.

If you include pop-up modal window into your page, put it in the bottom of your page.