2015-05-29 43 views
1

我使用Yeoman脚手架创建Angular应用程序,并且在添加控制器时遇到一些麻烦。关于和主控制器自动添加并工作正常。但是,当我尝试为新视图添加自己的控制器时,它仅显示{{name}}。 !感谢您的帮助下面的代码:无法将控制器添加到Yeoman生成的角度项目

user.js的(就是我想补充)

'use strict'; 

/** 
* @ngdoc function 
* @name classSiteApp.controller:UserController 
* @description 
* # UserController 
* Controller of the classSiteApp 
*/ 

angular.module('classSiteApp') 
    .controller('UserController', function ($scope) { 
     $scope.name='Hello'; 

    }); 

app.js

'use strict'; 

/** 
* @ngdoc overview 
* @name classSiteApp 
* @description 
* # classSiteApp 
* 
* Main module of the application. 
*/ 
angular 
    .module('classSiteApp', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch' 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl' 
     }) 
     .when('/user', { 
     templateUrl: 'views/user.html', 
     controller: 'UserController' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

main.js

'use strict'; 

/** 
* @ngdoc function 
* @name classSiteApp.controller:MainCtrl 
* @description 
* # MainCtrl 
* Controller of the classSiteApp 
*/ 
angular.module('classSiteApp') 
    .controller('MainCtrl', function ($scope) { 
     $scope.name='Hello'; 

    }); 

index.html

<!doctype html> 
<html class="no-js"> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 

    <link rel="stylesheet" href="styles/main.css"> 
    <!-- endbuild --> 
    </head> 
    <body ng-app="classSiteApp"> 

    <div class="header"> 
     <div class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="#/">MrCooleyMathMan</a> 
      </div> 

      <div class="collapse navbar-collapse" id="js-navbar-collapse"> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a ng-href="#/">Courses</a></li> 
       <li><a ng-href="#/user">Create Account</a><li> 
       <li><a href="#/about">Login</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 

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

    <div class="footer"> 
     <div class="container"> 
     <div class="col-sm-6 "> 
      <p><span class="glyphicon glyphicon-heart"></span> Thanks for visting my page</p> 
     </div> 
     <div class="col-sm-6"> 
      <ul class="list-unstyled"> 
      <li><strong>Matthew Cooley</strong></li> 
      <li><a href="mailto:[email protected]">[email protected]</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 
    <script> 
     !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){ 
     (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g), 
     r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r) 
     }(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 

     ga('create', 'UA-XXXXX-X'); 
     ga('send', 'pageview'); 
    </script> 

    <!-- build:js(.) scripts/vendor.js --> 
    <!-- bower:js --> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="bower_components/angular-animate/angular-animate.js"></script> 
    <script src="bower_components/angular-cookies/angular-cookies.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="bower_components/angular-touch/angular-touch.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 

     <!-- build:js({.tmp,app}) scripts/scripts.js --> 
     <script src="scripts/app.js"></script> 
     <script src="scripts/controllers/main.js"></script> 
     <script src="scripts/controllers/about.js"></script> 
     <!-- endbuild --> 
</body> 
</html> 
+0

您可能要添加的意见/ user.html – Igor

回答

2

我认为你需要在你的的index.html像这样的末尾加上user.js的文件作为脚本参考:

<script src="scripts/app.js"></script> 
    <script src="scripts/controllers/main.js"></script> 
    <script src="scripts/controllers/about.js"></script> 
    <script src="your/path/to/user.js"></script> 
+0

谢谢!这就是它。 –

相关问题