Sombir Verma Sombir Verma - 4 months ago 16
AngularJS Question

Can we use inline template without using any type of routing?

I am trying to use inline template in my application but i do not want to use any type of routing. Currently I am loading all the data at the initial stage but I want the data onclick event with the inline template.

Because the requirement is such that on clicking of a link it will load data from 3 controller. and will do a transition. If I am using routing it is working fine but then I have to implement routing in whole application.

So could you please help me out to put inline template without using routing?

Here is an example:-

<ng-view>Loading...</ng-view>
<!-- Inline Templates (Partials) -->

<script type=text/ng-template id=home.html>
<!-- Home -->
<ul>
<li><a href="#/list">Show Items</a></li>
<li><a href="#/settings">Settings</a></li>
</ul>
</script>

<script type=text/ng-template id=list.html>
<!-- List -->
<p>Choose an Item</p>
<ul>
<li ng-repeat="item in items"><a href="#/detail/{{item.id}}">{{item.title}}</a></li>
</ul>
</script>


here is my angular routing:-

angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {templateUrl: 'home.html', controller: HomeCtrl}).
when('/list', {templateUrl: 'list.html', controller: ListCtrl}).
when('/detail/:itemId', {templateUrl: 'detail.html', controller: DetailCtrl}).
when('/settings', {templateUrl: 'settings.html', controller: SettingsCtrl}).
otherwise({redirectTo: '/home'});
}]);


I do not want to use routing, but want to load these template with click events.

Thanks.

Answer

Sounds like maybe what you want is to use ng-include. http://www.w3schools.com/angular/angular_includes.asp https://docs.angularjs.org/api/ng/directive/ngInclude

using this you can have inline templates on your page and map them to different controllers. ie.

<div ng-if="yourConditionHere" ng-controller="yourControllerName" ng-include="'myFile.htm'"></div>