I think that the error is when I load app.route.js file but I don't know
why occurs this. I'm following the John Papa's AngularJS style-guide and
this guide recommends put in a file (called app.route.js) all the routes of
app.module.js.
I've solved it putting the config inside app.module.js file and removing
app.route.js from index.html
app.module.js:
(function() {
'use strict';
angular
.module('ebpm', ['ui.router', 'ebpm.navbar', 'ebpm.modelador'])
.constant('CONFIG_EBPM', {
APP_NAME: 'Expert BPM',
APP_ID: 'WKFLW',
APP_AUTHOR: 'Antonio Pérez',
APP_COMPANY: 'Datadec, S.A.',
APP_VERSION: 1.0,
APP_URL_PLSQL: 'http://sp.idatadec.es:7778/cliente/'
})
.config(configRoutes);
configRoutes.$inject = ['$urlRouterProvider', '$stateProvider'];
function configRoutes($urlRouterProvider, $stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'app/prueba.html'
});
}
})();
El martes, 12 de mayo de 2015, 9:15:17 (UTC+2), Antonio Pérez García
escribió:
>
> Hi !!
>
> I've a problem when I put some custom directives and ui-view in a
> index.html file. The directives don't appear in the browser but the content
> of ui-view yes. What am I doing wrong?
> If I don't load app.route.js, everything works fine.
> Thanks in advance.
>
> My html code:
>
> <!DOCTYPE html>
> <body>
> <div class="main" >
> <!-- custom directives -->
> <div comp-navbar-bpm ></div>
> <div comp-menu-bpm ></div>
> <div class="page-content-main">
> <div class="container-fluid" ui-view>
> </div>
> </div>
> </div>
>
>
> <script src="bower_components/angular/angular.js"></script>
> <script src="bower_components/angular-loader/angular-loader.js"
> ></script>
> <script src=
> "bower_components/angular-ui-router/release/angular-ui-router.js"
> ></script>
> <!-- inject:js -->
> <!-- Bootstrapping -->
> <script src="app/app.module.js"></script>
> <script src="app/app.route.js"></script>
> <!-- Navbar -->
> <script src="app/components/navbar.module.js"></script>
> <script src="app/components/navbar.service.js"></script>
> <script src="app/components/navbar.directive.js"></script>
> <script src="app/components/sidebar.service.js"></script>
> <script src="app/components/sidebar.directive.js"></script>
> </body>
> </html>
>
>
> app.route.js:
> (function() {
> 'use strict';
>
> angular
> .module('ebpm', ['ui.router'])
> .config(configRoutes);
>
> configRoutes.$inject = ['$urlRouterProvider', '$stateProvider'];
>
> function configRoutes($urlRouterProvider, $stateProvider) {
> $urlRouterProvider.otherwise('/home');
>
> $stateProvider.state('home', {
> url: '/home',
> templateUrl: 'app/prueba.html'
> });
> }
>
> })();
>
>
> navbar.directive.js:
> (function() {
> 'use strict';
>
> angular
> .module('ebpm.navbar')
> .directive('compNavbarBpm', compNavbarBpm);
>
> function compNavbarBpm() {
> var directive = {
> templateUrl: 'app/components/navbar.html',
> replace: true,
> restrict: 'EA',
> controller: NavbarCtrl,
> controllerAs: 'navBpm',
> bindToController: true // because the scope is isolate.
> };
>
> return directive;
> }
>
> // Inject the service.
> NavbarCtrl.$inject = ['$scope', 'dataConnectionSrv'];
>
> function NavbarCtrl($scope, dataConnectionSrv) {
> var navBpm = this;
>
> // Get conn data.
> dataConnectionSrv.getConn().
> then(function(data) {
> (data.error) ? noty({type: "error",text: 'navbar.directive.js:
> '+data.error}) : null;
> navBpm.empName = data.empName;
> navBpm.usrName = data.usrName;
> }, function(data) {
> var e = noty({type: "error",text: 'navbar.directive.js: Error
> al obtener los datos de configuración de BPM.'});
> });
>
> // Control over icon and sidebar.
> $scope.toggleMenuBpm = function() {
> $(".cmn-toggle-switch").toggleClass("active");
> $(".main").toggleClass("toggled");
> }
>
> }
>
> })();
>
>
> navbar.html
> <nav class="navbar navbar-inverse navbar-fixed-top" >
> <div class="container-fluid">
> <div class="navbar-header">
> <button class="cmn-toggle-switch cmn-toggle-switch__htx"
> data-ng-click="toggleMenuBpm()">
> <span>toggle menu</span>
> </button>
> <!--<span class="navbar-brand">Exper BPM</span> -->
> </div>
> <div id="navbar" class="navbar-collapse collapse">
> <ul class="nav navbar-nav navbar-left">
> <li class="navbar-brand navbar-brand-custom">Expert BPM
> </li>
> </ul>
> <ul class="nav navbar-nav navbar-right">
> <li ><a href="#">{{navBpm.empName}}</a></li>
> <li class="dropdown"><a href="#" class="dropdown-toggle"
> data-toggle="dropdown"><i
> class="glyphicon glyphicon-user"></i>
> {{navBpm.usrName}} <b class="caret"></b></a>
> <ul class="dropdown-menu">
> <li><a href="#"><i class="glyphicon
> glyphicon-user"></i> Perfil</a></li>
> <li><a href="#"><i class="glyphicon glyphicon-cog"
> ></i> Configuración</a></li>
> <li class="divider"></li>
> <li><a href="#"><i class="glyphicon glyphicon-off"
> ></i> Salir</a></li>
> </ul>
> </li>
> </ul>
> </div>
> </div>
> </nav>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
