コントローラがルートで動作しません

Question

ルーティングするコントローラでリンクを追加したいのにコントローラが動作しません。 私はこれを取得：

{{タイトル}}

{{shortTitle}}

{{テキスト}}

私はコントローラを置く場合のみへのHTMLまた動作しません。

しかし、Default.htmlコントローラのメインコントローラにスクリプトを追加したときに正しく動作しました 私は間違いを犯しましたか？私はNG-コントローラ

を削除する - これが、これがまた

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

homePage.HTML動作しない

$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を動作しませ

@SSH

<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> 

これは私が私のコード

.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>

を入れたときにルータでコントローラ名を入れる必要があります動作しませ@SSHテンプレートから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"; 
    });