应用基础:为angularjs控制器、服务等创建单独的文件

Foundation for apps: Creating separate files for angularjs controllers, services etc

本文关键字：服务 创建 单独 文件 控制器 angularjs 应用      更新时间：2023-09-26

我刚刚开始使用Foundation for Apps，但是我遇到了麻烦在一个单独的文件夹中添加我的angular控制器并使用它们

我有这个当前结构在我的assets的js文件夹:

js/
   app.js //this has all the controllers etc. by chaining

但是我希望它是

js/
   app.js
   controllers/
       home.controller.js
       main.controller.js

我不想通过链接我的控制器，服务等来保持一个大的js文件。我想要一个更模块化的结构指定

当我将其更改为模块化结构时，我得到以下三个错误:

1. 'HomeCtrl' not defined.
2. Uncaught SyntaxError: Unexpected token < at the 1st line of home.controller.js
3. Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8079/assets/js/home.controller.js". at the point where I am including 'home.controller.js' in index.html

这是我的模板

---
name: home
url: /
controller: HomeCtrl
---
<div class="grid-container">
  <h1>Welcome to Foundation for Apps!</h1>
  <p class="lead">This is version <strong>1.1 Weisshorn</strong>.</p>
</div>

home.controller.js: 

app.controller('HomeCtrl', ['$scope', function($scope) {
    $scope.temp = 'hello';
}]);

app.js: 

var app = angular.module('application', [
  'ui.router',
  'ngAnimate',
  'foundation',
  'foundation.dynamicRouting',
  'foundation.dynamicRouting.animations'
])
  .config(config)
  .run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
  $urlProvider.otherwise('/');
  $locationProvider.html5Mode({
    enabled:false,
    requireBase: false
  });
}
function run() {
  FastClick.attach(document.body);
}

为了解决这个问题，我尝试通过引用

在gulpfile.js中添加我的控制器引用

我也提到了这个，但我仍然不能让它工作。知道我做错了什么吗?

Inside gulpfile.js检查这一行。您将看到，在耦合最小化文件时只使用client/assets/js/app.js。你需要让它复制所有的控制器的.js文件:

// These files are for your app's JavaScript
appJS: [
    'client/assets/js/app.js',
    './client/assets/js/controllers/*.js',
]

你也可以使用angular模块来容纳你所有的控制器&然后把它注入到你的应用模块中。这是我在这里使用它的方法，这也是在这个伟大的准备使用的Fork中完成的方法:https://github.com/CreativityKills/foundation-apps-template

  • 注意:记住在每次修改配置文件后重新启动gulp，并检查您的代码是否已很好地包含在构建的JS文件中(默认为/build/assets/js/app.js )
相关文章：