Основа для приложений: создание отдельных файлов для контроллеров angularjs, сервисов и т. Д.

Question

Я только начал работать с Foundation for Apps, но у меня были проблемы с добавлением моих угловых контроллеров в отдельную папку и их использованием.

У меня есть эта текущая структура в папке 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, ссылаясь на это

Я также сослался на это, но до сих пор не могу заставить его работать. Есть идеи, что я делаю не так?

Answer 1

Внутри 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',
]

Вы также можете использовать угловой модуль для хранения всех ваших контроллеров и сервисов, а затем ввести его в свой модуль приложения. Вот как я использую это здесь, и это также делается в этой замечательной готовой к использованию вилке: https://github.com/CreativityKills/foundation-apps-template

• Примечание: не забывайте перезапускать gulp после каждого изменения его конфигурационного файла и проверять, был ли ваш код хорошо включен во встроенный файл JS (по умолчанию/build/assets/js/app.js)