ui-router problem with require js with AMD loading .

[defyjoy]

I tried this

http://stackoverflow.com/questions/19069769/router-not-found-error-in-ui-router-angularjs-with-requirejs/19161654?noredirect=1#19161654

unfortunately the answer didnt solve the problem . Its not able to load the angular ui router . it still shows the same error in both firefox and chrome . Any solution for this ?

[kuma0605]

I handle it. https://github.com/kuma0605/angular-require-uiRouter

main.js

require.config({

    paths: {
        'domReady': '../lib/requirejs-domready/domReady',
        'angular': '../lib/angular/angular',
        "uiRouter": "../lib/angular/angular-ui-router"
    },

    /**
     * for libs that either do not support AMD out of the box, or
     * require some fine tuning to dependency mgt'
     */
    shim: {
        'angular': {
            exports: 'angular'
        },
        'uiRouter':{
            deps: ['angular']
        }
    },

    deps: [
        // kick start application... see bootstrap.js
        './bootstrap'
    ]
});

app.js

define([
    'angular',
    'uiRouter',
    './controllers/index',
    './directives/index',
    './filters/index',
    './services/index'
], function (ng) {
    'use strict';

    return ng.module('app', [
        'app.services',
        'app.controllers',
        'app.filters',
        'app.directives',
        'ui.router'
    ]);
});

routes.js

define(['./app'], function(app) {
    'use strict';
    return app.config(function($stateProvider) {
        $stateProvider.state('view1',{
            url: '/view1',
            templateUrl: 'partials/partial1.html',
            controller:'MyCtrl1'
        })
        .state('view2',{
            url: '/view2',
            templateUrl: 'partials/partial2.html',
            controller: 'MyCtrl2'
        });
    })
});

it works! hahaha

[defyjoy]

Thanks man it works . This is the perfect solution 👍 👍

[timkindberg]

@kuma0605 I cleaned up your post a bit, great solution!!

[rsc092020]

I am creating a program that uses requirejs, angularjs, and want to use angular-ui-router, but I was having some problems and found this post. I tried the code from https://github.com/kuma0605/angular-require-uiRouter that was posted above, but I am getting an error

Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

when it is trying to load partial1.html or partial2.html

[eggers]

Take a look at the detour project which has already done the integration.

[rsc092020]

Do you mean this project or are you talking about something else:

http://www.startersquad.com/examples/angularjs-requirejs-2/

[eggers]

This is the one I was talking about: https://github.com/afterglowtech/angular-detour

[rsc092020]

Thanks man. I found what I was looking for.

[wishma2013]

If I want to compress and concat javascript file in requirejs+angular+ui-router project,How should I organize all my scripts file's?

[rhka]

Hi, We are using stateprovider in our application. But, we want to load the controller files dynamically. I dont know how to acheive this. Could you please help me to do that. We are able to load the files dynamically using route provider. But, i want with Stateprovider. Thanks

[ghost]

All, I observed that this code works as we use angular.bootstrap. Same does not work with ngApp. Any idea?

[CHEOLGUSO]

@kuma0605 thank you very much :D

[ejongg]

Did anyone managed to make this work on ui-router 1.0.0 ?

[linlak]

Mine worked ui-router has a dependence for requires all you need to do in your app.js file you need to add angular-ui-router that is all you will be good to go. app.js should be like
define(['angular-ui-router','uirouter', etc],....);
uirouter is your file parth but angular-ui-router is a dependence for AMD that uirouter provides. I have to dig into uirouter and discovered that if you also go to the code in uirouter and you are good in require js you will it. It is at the beginning of the code. Tell me if it works for you. Thanks

[linlak]

When using require js you don't have to use the ngApp directive to prevent auto bootstrap because if bootstrap happens before dependence files are loaded it produce errors that is why we have to use angular.bootstrap and not ngApp