2015-06-20 28 views
0

我却靠在Angular.js和我想补充ngRoute开始制造路线的应用程序,所以我有这个问题,当我刚刚加入ngRoute到模块(该模块还加载ngMaterialngAnimate ,和ngAria),浏览器抛出一个错误角度不再工作。Angularjs:ngRoute错误注入与角料

app.js

(function(angular) 
{ 
    var app = angular.module('Organizer', ['ngMaterial', 'ngAnimate', 'ngAria', 'ngRoute']); 

    app.config(function($mdThemingProvider, $httpProvider) 
    { 
     // Config theme 
     $mdThemingProvider.theme('default') 
      .primaryPalette('blue-grey'); 

     // Config http post 
     // Use x-www-form-urlencoded Content-Type 
     $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; 

     /** 
     * The workhorse; converts an object to x-www-form-urlencoded serialization. 
     * @param {Object} obj 
     * @return {String} 
     */ 
     var param = function(obj) { 
      var query = '', name, value, fullSubName, subName, subValue, innerObj, i; 

      for(name in obj) { 
       value = obj[name]; 

       if(value instanceof Array) { 
        for(i=0; i<value.length; ++i) { 
         subValue = value[i]; 
         fullSubName = name + '[' + i + ']'; 
         innerObj = {}; 
         innerObj[fullSubName] = subValue; 
         query += param(innerObj) + '&'; 
        } 
       } 
       else if(value instanceof Object) { 
        for(subName in value) { 
         subValue = value[subName]; 
         fullSubName = name + '[' + subName + ']'; 
         innerObj = {}; 
         innerObj[fullSubName] = subValue; 
         query += param(innerObj) + '&'; 
        } 
       } 
       else if(value !== undefined && value !== null) 
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; 
      } 

      return query.length ? query.substr(0, query.length - 1) : query; 
     }; 

     // Override $http service's default transformRequest 
     $httpProvider.defaults.transformRequest = [function(data) { 
      return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; 
     }]; 
    }); 

    /** 
    * Create global variable 
    * @return {object} 
    */ 
    app.factory('global', function() 
    { 
     var global = { 
      user: { 
       logged: false, 
       name: null, 
       id: null 
      }, 
      project: null, 
      task: null 
     }; 

     return global; 
    }); 
})(angular); 

的index.php

<?php 
    // Define application variable 
    $app = Yii::app(); 
?> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="<?php echo $app->request->baseUrl.'/dist/css/angular-material.min.css';?>"> 
    <link rel="stylesheet" href="<?php echo $app->request->baseUrl.'/dist/css/flaticon.css';?>"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"> 
</head> 
<body ng-app="Organizer" ng-controller="site as main"> 
    <div layout="column"> 
     <md-toolbar> 
      <div class="md-toolbar-tools"> 
       <span><?php echo $app->name; ?></span> 
       <!-- fill up the space between left and right area --> 
       <span flex></span> 

       <!-- Menu Button --> 
       <md-menu> 
        <md-button class="md-icon-button" aria-label="Menu" ng-click="$mdOpenMenu()"> 
         <md-icon md-menu-origin md-svg-icon="<?php echo $app->request->baseUrl.'/dist/icons/menu.svg';?>" alt="Menu"></md-icon> 
        </md-button> 
        <md-menu-content> 
         <md-menu-item ng-repeat="item in main.menu" > 
          <md-button>{{item}}</md-button> 
         </md-menu-item> 
        </md-menu-content> 
       </md-menu> 
       <!-- <md-select ng-model="main.select" placeholder="Menu"> 
        <md-option ng-repeat="item in main.menu" ng-value="item">{{item}}</md-option> 
       </md-select> --> 
       <!-- /.Menu Button --> 
      </div> 
     </md-toolbar> 
     <md-content layout-padding ng-include="main.view"> 
     </md-content> 
    </div> 
    <!-- Angular Material Dependencies --> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular.min.js';?>"></script> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular-animate.min.js';?>"></script> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular-aria.min.js';?>"></script> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular-material.min.js';?>"></script> 

    <!-- Angular app --> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular/app.js';?>"></script> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular/controllers/siteController.js';?>"></script> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular/controllers/loginController.js';?>"></script> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular/controllers/projectController.js';?>"></script> 
    <script src="<?php echo $app->request->baseUrl.'/dist/js/angular/controllers/taskController.js';?>"></script> 
</body> 
</html> 

我只是将它加入到看它不会破坏任何东西,但它确实和我知道该怎么办时,浏览器给我一个巨大的错误。

我使用的角度版本是:

Angular.js:1.3.16 角材质:0.10.0

+0

你可以添加你的index.html吗? –

+0

@NelsonPatricioJimenez这是一个php文件,但肯定,它的加入 – nosthertus

+0

什么是错误 – Tom

回答

1

你必须在你的PHP文件中添加angular-route。 (我用我的应用程序凉亭)

<script src="<?php echo $app->request->baseUrl.'/dist/js/angular-route.js';?>"></script> 

如果您还没有下载这个文件,我建议你从main documentation下载。

+0

谢谢,我不知道我不得不添加另一个文件 – nosthertus