如何將角碼放在單獨的文件中

如果我把下面的代碼放在一個文件中，它工作的很好，但是當我分開時，那麼不要工作只是顯示空白。在控制檯中，我得到錯誤它找不到MainformCtrl。如何將角碼放在單獨的文件中

這是我如何分隔的：

app.js：

angular.module('notifications',['yaru22.angular-timeago','ngRoute'], function($interpolateProvider) { 
       $interpolateProvider.startSymbol('<%'); 
       $interpolateProvider.endSymbol('%>'); 


     }); 


    angular.module('commentsApp',['notifications']); 
    angular.bootstrap(document.getElementById("comment"), ['commentsApp']);

commentsController.js

angular.module('commentsApp') 
     .controller('CommentsCtrl',function($scope,$http,$routeParams){ 
       $scope.param = $routeParams.id; 
       $http.get("/api/comments/"+ $scope.param) 
       .success(function(data){ 
       var details = []; 
       $.each(data,function(index,value){ 
        if(value.user){ 
        $.each(value.user,function(index1,value1){ 
         var new_object = $.extend({}, value, value1); 
         details.push(new_object); 

        }); 
        } 
       }); 
       $scope.formShow = function(comm){ 
        comm.formWhat = !comm.formWhat; 
       }; 

       $scope.comments = details; 
       }) 
       .error(function(data){ 
        console.log(data); 
       }); 
      }) 
      .controller('MainformCtrl',function($scope){ 
       $scope.fwhat = false; 
       $scope.MainFormShow = function(){ 
        $scope.fwhat = !$scope.fwhat; 
       };  
      });

routes.js

angular.module('commentsApp') 
.config(function($routeProvider,$locationProvider) { 
      $routeProvider. 
       when('/project/:id', { 
        controller: 'CommentsCtrl', 
        templateUrl: '/view/comments.html' 
       }). 
       otherwise({ 
        redirectTo: '/' 

       }); 
      //check browser support 
      if(window.history && window.history.pushState){ 
       //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/"> 

      // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase 

      // if you don't wish to set base URL then use this 
      $locationProvider.html5Mode({ 
        enabled: true, 
        requireBase: false 
       }); 
      }  
    });

任何人都知道是什麼問題在這裏？

來源

2015-09-05 Vladimir Djukic

以何種順序在html中加載這些文件？ –

app.js，routes.js，commentsController.js –

你爲什麼使用bootstrap？ –

我也遇到過這個問題。 :)

你只需要將它們導入你的主html文件。不要忘記元素的順序。以下是HTML的外觀。

的index.html

<html> 

    <head> 
    <link href="bootstrap.min.css" rel="stylesheet" /> 
    </head> 

    <body> 

    <!-- Here's your html stuff --> 
    <script src='angular.js'> <script> 
    <script src='app.js'> <script> 
    <script src='routes.js'> <script> 
    <script src='commentsController.js'> <script> 

    </body> 
</html>

不要忘記在你的js文件導入您的angular.js。你的css文件應該放在文檔的頭部，任何角度分隔的模塊應該在angular.js之後。要使用$ routeProvider，您需要導入ngRoute module，要使用此模塊，您需要它的特定文件。你可以找到它here或期待您的特定版本here。

希望它有幫助。 :)

來源

2015-09-05 16:05:19 Rodmentou

我已經完成了....它不是會徽。 –

您可以使用諸如Browserify或Webpack之類的東西來要求CommonJS樣式模塊。

來源

2015-09-05 16:12:19

問題是因爲：模塊引導。爲了解決這個我刪除了這一點：

angular.bootstrap(document.getElementById("comment"), ['commentsApp']);

從app.js

，並添加它控制文件的末尾，因爲它是最後一個文件。

@Grundy謝謝你的幫助！

來源

2015-09-05 16:23:28

如何將角碼放在單獨的文件中

回答

相關問題