如何使用require js在角度js中加载控制器

时间:2015-06-21 22:18:13

标签: angularjs angularjs-directive requirejs angularjs-scope ionic-framework

我正在尝试加载控制器以便显示我的视图。实际上我也写了我的控制器.Routeconfig。但我无法加载我的控制器和路由文件如何使用require.js加载控制器,以便我的login.html页面是显示?

这是我的Plunker:

  

http://plnkr.co/edit/DlI7CikKCL1cW5XGepGF?p=preview

main.js

requirejs.config({
    paths: {
        ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',

    },
    shim: {
        ionic : {exports : 'ionic'}
    }
});

route.js

/*global define, require */

define(['app'], function (app) {
    'use strict';

    app.config(['$stateProvider', '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {

            $stateProvider
                .state('login', {
                    url: "/login",
                    templateUrl: "login.html",
                    controller: 'LoginCtrl'
                })

            $urlRouterProvider.otherwise("/login");

        }]);


});

有什么猜测如何加载视图?

1 个答案:

答案 0 :(得分:0)

你只需要这样做:

<强> main.js

requirejs.config({
    paths: {
        ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',

    },
    shim: {
        ionic : {exports : 'ionic'}
    },callback: function () {
        'use strict';

        require([
            'angular',
            'route',
            'app'
        ], function (angular) {
            // init app
            angular.bootstrap(document, ['app']);
        });
    }
    });

<强> app.js

define(['ionic',
    './LoginCtrl',],

    function (angular) {
        'use strict';

        var app = angular.module('app', [
            'ionic','app.controllers']);

        return app;

    });

<强> LoginCtrl.js

/*global define, console */
define(['angular'], function (ng) {
    'use strict';

    return ng.module('app.controllers', ['$scope','$state'
    ,function ctrl($scope, $state) {

        $scope.login = function () {
          alert("Login is clicked")
        };

    }]);
});

您可以按照此处的提示进行操作 - https://www.startersquad.com/blog/angularjs-requirejs/

相关问题