Using jQuery correctly + RequireJS + AngularJS

1


I am trying to get the themes/cms/build/js/main.min.js file to work properly after being loaded by RequireJS , but I have not been successful.
The file is loaded, some functions work as console.log() , but others like $(element).each() , $(element).click() do not work as expected.

In the code below, in the file main.min.js I try to add the color red in the .content-title class, but nothing happens, the class does not the red color css.

What am I doing wrong?

app / app.js

'use strict';
require.config({
    baseUrl: "./app",
    // alias libraries paths
    paths: {
        'jquery': './components/jquery/dist/jquery.min',
        'domReady': './components/domReady/domReady',
        'angular': './components/angular/angular.min',
        'angularRoute': './components/angular-route/angular-route.min',
        'angularCSS': './components/angular-css/angular-css.min',
        'satellizer': './components/satellizer/dist/satellizer.min',

        'bootstrap': './components/bootstrap/dist/js/bootstrap.min',
        'main': '../themes/cms/build/js/main.min',

        // components of site
        'adminLTE': '../themes/cms/build/js/adminLTE.min',
        'fastclick': './components/fastclick/lib/fastclick',
        'helpers': './config/helpers',

        'script': './components/script.js/dist/script.min'
    },

    shim: {
        'jquery': {
            exports: 'jquery'
        },
        'angular': {
            exports: 'angular'
        },
        'angularRoute': [ 'angular' ],
        'angularCSS': [ 'angular' ],
        'satellizer': [ 'angular' ],
        'script': {
            exports: 'script',
            deps: [ 'angular' ]
        },
        'bootstrap': {
            exports: 'bootstrap',
            deps: [ 'jquery' ]
        },
        'fastclick': {
            exports: 'fastclick',
            deps: [ 'jquery' ]
        },
        'adminLTE': {
            exports: 'adminLTE',
            deps: [ 'jquery', 'bootstrap', 'fastclick' ]
        },
        'helpers': {
            exports: 'helpers'
        },
        'main': {
            exports: 'main',
            deps: [ 'jquery', 'bootstrap', 'adminLTE' ]
        }
    },

    deps: [ './config/bootstrap', './config/helpers' ]
});

app / config / app.js

'use strict';

define([ 'angular', 'angularRoute', 'angularCSS', 'satellizer', 'jquery', 'bootstrap', 'adminLTE', 'main', 'helpers', '../factories/index', '../directives/index', '../controllers/index' ], function (ng) {
    return ng.module('app', [
        'app.factories',
        'app.directives',
        'app.controllers',
        'ngRoute',
        'angularCSS',
        'satellizer'
    ])
        .run([
            '$rootScope', '$location', '$auth', '$route',
            function( $rootScope, $location, $auth, $route ) {
            $rootScope.site = {
                name: 'System MMN',
                api: api
            };

            $rootScope.pageParams = {
                title: 'Dashboard',
                id: 'dashboard'
            };

            $rootScope.$watch($auth.isAuthenticated(), function() {
                if(!$auth.isAuthenticated()) {
                    $location.path( '/login' );
                }
            });
            $rootScope.$on("$routeChangeSuccess", function(event, current, previous){
                $rootScope.currentTemplate = 'app/views/pages/' + current.$$route.page + '.html';
            });
        }]);
});

themes / cms / assets / js / main.js - Compiled to themes / cms / build / js / main.min.js

'use strict';

define(['jquery'], function( $ ) {
    $(function() {
        // Não funciona
        $('.content-title').css('color', 'red');

        // Não funciona
        $('.content-title').each(function() {
            $(this).text('Oi, isso é um teste');
        });

        // console log funciona
        console.log('Work?');
    });
});

Thank you!

    
asked by anonymous 02.10.2016 / 00:36

0 answers