When clicking on link perform Reload in div with Angular. ng-click, ng-include, controller

Question

Hello! I have this link:

<ul class="nav child_menu">
    <li><a href="graficos.html">Gráficos</a></li>
</ul>

When clicking on the link you should display the grafico.html through the ng-include:

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

Graphics.html:

<div ng-controller="graficoCtrl">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Line graph<small>Sessions</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                    //... mais código ...

As seen above, there is a controller (graphicCtrl) and this loads a graph in the canvas tag in the file grafico.html.

app.controller('graficoCtrl', function($scope){
    Chart.defaults.global.legend = {
        enabled: false
    };
    // mais código....

What I really want to do is keep interactivity on a single page, that is, by clicking on a link, on the same page, a Reload in a certain div. A Single Page Application.

Answer 1

For this you can use ngRoute (there is the angular-ui-router, but this is more complex).

In addition to the reference in the script:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>

You refer as dependency on your application:

angular.module('app',['ngRoute']);

Configure the routes:

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl : 'app/views/home.html',
        controller     : 'HomeCtrl',
   });
};

Use the tag <div ng-view></div> and links with hash <a href="#/home">Home</a>

Source: http://tableless.com.br/criando-uma-aplicacao-single-page-com-angularjs/