Search code examples
angularjsangular-ui-routerangularjs-ng-include

ng-include vs. ui-view for static content


I'm populating my index.html via angular, as per usual. I have an index that looks something like:

<body>
  <nav ng-include="'app/partials/navbar.html'" ng-controller="NavBarController"></nav>
  <main>
    <section ui-view="donate"></section>
    <section ng-include="'app/partials/about.html'"></section>
    <section ui-view="stories"></section>
    <section ng-include="'app/partials/contact.html'"></section>
  </main>
  <footer ng-include="'app/partials/footer.html'"/>
</body>

My nav, about, contact and <footer> all have static content, so I used ng-include. The donate and stories <section>s are dynamic, so I used ui-view.

The Question

Is there any advantage to using ui-view over ng-include where static content is concerned? The nav might be better with a ui-view I can reference the NavBarController in $stateProvider.state(), but what about the static partials?


Solution

  • ui-view is useful only when you want to leverage the feature of browser history. For e.g. If you have a HTML as below

    <div class="searchbar">
        <input type="text" ng-model="student.id">
        <button type="button" ng-click="getStudent()">Get Student</button>
    </div>
    <div class="student-info">
        <div class="student" ui-view="studentview"></div>
    </div>
    

    Having a ui-view here will make sense since we can pass different data (like student id etc) as parameter to the same template and display different content. Also the browser history will help us navigate between different students here.

    For content like about or footer though which are mostly static I would recommend you to use ng-include as you are hardly getting anything extra out of router here.

    For Contact it can depend on what it contains. If it is something which requires navigation (like one route for contact of each country's office) then go with ui-route otherwise stick with ng-include