个人中心
gpt4 book ai didi

javascript - 无法将 Controller 添加到 Yeoman 生成的 Angular 项目

转载 作者：行者123 更新时间：2023-11-30 16:51:02 25 4
gpt4 key购买 nike

我正在使用 Yeoman 脚手架创建 Angular 应用程序，但在添加 Controller 时遇到了一些问题。 about 和 main Controller 会自动添加并且工作正常。但是当我尝试为新 View 添加自己的 Controller 时，它只显示 {{name}}。感谢您的帮助!这是代码:

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

  });

应用程序.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: '/'
      });
  });

主要.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:mcooley@dtechhs.org">mcooley@dtechhs.org</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>

最佳答案

我认为您需要在 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>

关于javascript - 无法将 Controller 添加到 Yeoman 生成的 Angular 项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30532500/

25 4 0
文章推荐： Colortext 程序无法正确着色
文章推荐： javascript - 主干 - 删除集合中的最后一个模型，但只能通过过滤器
文章推荐： c - Mandelbrot 使用 Pthreads，单步遍历数组
文章推荐： c - GCC如何实现变长数组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com