Using jQuery + Requirejs + Angularjs correctly

Asked

Viewed 138 times

1


I’m trying to get the file themes/cms/build/js/main.min.jsfunction properly after being charged by Requirejs, but I haven’t been succeeding.
The file is loaded, some functions works like console.log(), but others like $(element).each(), $(element).click() do not function as expected.

In the code below, there in the file main.min.jsi try to add color red in class .content-title, but nothing happens, the class does not get 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!

  • no error on the console?... no shim, try to give export in jquery to $

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.