Контроллер не работает по маршруту

Question

Я хотел бы добавить ссылку с контроллером на маршрут, но контроллер не работает. я получаю это:

{{название}}

{{shortTitle}}

{{текст}}

Если я буду ставить контроллер только HTML также не работает

но когда я добавил скрипт к основному контроллеру в Default.html контроллер работает правильно Где я ошибся?

@SSH это не работает

$stateProvider 
.state('home', { 
    url: '/', 
    template: '<div data-ng-include="&#39;Scripts/js_angular_project/website/home/homePage.html&#39;"></div>', 
    controller: 'homeCtrl' 
}) 

homepage.html

<div> 
    <h2>{{title}}</h2> 
    <h3>{{shortTitle}}</h3> 
    <p>{{text}}</p> 
</div> 
<script> 
    app.controller('homeCtrl', function ($scope) { 
     $scope.title = "Volvo"; 
     $scope.shortTitle = "Volvo"; 
     $scope.text = "example"; 
    }); 
</script> 

@SSH это также не работает

$stateProvider 
    .state('home', { 
     url: '/', 
     templateURL: '/Scripts/js_angular_project/website/home/homePage.html', 
     controller: 'homeCtrl' 
    }) 

homepage.html - я удалить нг-контроллер

<div> 
    <h2>{{title}}</h2> 
    <h3>{{shortTitle}}</h3> 
    <p>{{text}}</p> 
</div> 
<script> 
    app.controller('homeCtrl', function ($scope) { 
     $scope.title = "Volvo"; 
     $scope.shortTitle = "Volvo"; 
     $scope.text = "example"; 
    }); 
</script> 

@SSH это не работает, когда я ставлю свой код

.html

Answer 1

var routerApp = angular.module('routerApp', ['ui.router']); 
 
routerApp.config(function($stateProvider, $urlRouterProvider) { 
 
    
 
    $urlRouterProvider.otherwise('/home'); 
 
    
 
    $stateProvider 
 
     .state('home', { 
 
      url: '/home', 
 
      template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>', 
 
      controller:'homeCtrl' 
 
     }) 
 
     .state('about', { 
 
      url: '/about', 
 
      template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>', 
 
      controller:'aboutCtrl' 
 
      }) 
 
}); 
 

 
routerApp.controller('homeCtrl', function ($scope) { 
 
     $scope.title = "Volvo"; 
 
     $scope.shortTitle = "Volvo"; 
 
     $scope.text = "example"; 
 
    }); 
 
    
 
    routerApp.controller('aboutCtrl', function ($scope) { 
 
     $scope.title = "Volvo2"; 
 
     $scope.shortTitle = "Volvo2"; 
 
     $scope.text = "example2"; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script> 
 

 
<div ng-app="routerApp"> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a ui-sref="home">Home</a></li> 
 
     <li><a ui-sref="about">About</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div class="container"> 
 
    <div ui-view></div> 
 
</div> 
 
</div>

вы должны поставить имя контроллера в маршрутизаторе а также удалите ng-controller = "homeCtrl" из шаблона.

state('home' ,{ 
     url : '/', 
     templateUrl:'/yourTempalteAddress', 
     controller:'homeCtrl' 
    }) 

и определить ваше приложение в контроллере.

var app = angular.module("yourApp",[]); 
    app.controller('homeCtrl', function ($scope) { 
    $scope.title = "Volvo"; 
    $scope.shortTitle = "Volvo"; 
    $scope.text = "example"; 
    });