CODEWITHSUNDEEP
angularjs
Sombir Kumar
Sombir Kumar

Reputation: 1891

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.

Upvotes: 2

Views: 1263

Answers (1)

ceckenrode
ceckenrode

Reputation: 4703

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>

Upvotes: 1

Related Questions