Angularjs: ngRoute error injection with angular Material -
i leaning angular.js , want add ngroute start making applications routes, have problem, when add ngroute module (this module loads ngmaterial, nganimate, , ngaria), browser throws me error angular doesn't work anymore.
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'; /** * workhorse; converts object 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 + '[' + + ']'; 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 main"> <div layout="column"> <md-toolbar> <div class="md-toolbar-tools"> <span><?php echo $app->name; ?></span> <!-- fill space between left , 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> i add see if doesn't break anything, , have idea when browser throws me huge error.
the versions of angular use are:
angular.js: 1.3.16 angular-material: 0.10.0
you must add angular-route in php file. (i'm using bower in app)
<script src="<?php echo $app->request->baseurl.'/dist/js/angular-route.js';?>"></script> if have not downloaded file, recommend download main documentation.
Comments
Post a Comment