angularjs - Implement RequireJs in AnuglarJs UI-Router -
i have application in angularjs , have different modules different js files.for js file optimization going implement requirejs.
there is (broken) plunker
my angularjs code in app.js:
var app = angular.module("webapp", ['ngroute']); app.run(['$rootscope', '$state','$urlrouterprovider', function ($rootscope, $state,$urlrouterprovider) { $urlrouterprovider.otherwise('/index.html'); $stateprovider .state('root.home',{ url: '/index.html', views: { 'header': { templateurl: 'modules/header/html/header.html', controller: 'headercontroller' }, 'content-area': { templateurl: 'modules/home/html/home.html', controller: 'homecontroller' }, 'footer': { templateurl: 'modules/common/html/footer.html', controller: 'footercontroller' } }, data: { displayname: 'home', } }) .state('root.about',{ url: '/index.html', views: { 'header': { templateurl: 'modules/header/html/header.html', controller: 'headercontroller' }, 'content-area': { templateurl: 'modules/home/html/about.html', controller: 'aboutcontroller' }, 'footer': { templateurl: 'modules/common/html/footer.html', controller: 'footercontroller' } }, data: { displayname: 'about', } }) }]); i added following code in main.js file
require.config({ baseurl: "", // alias libraries paths. must set 'angular' paths: { 'angular': 'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min', 'angular-route': 'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min', 'angularamd': 'http://cdn.jsdelivr.net/angular.amd/0.2.0/angularamd.min' }, // add angular modules not support amd out of box, put in shim shim: { 'angularamd': ['angular'], 'angular-route': ['angular'] }, // kick start application deps: ['app'] }); and added requirejs in html
<head> <link rel="stylesheet" href="style.css"> <script data-main="main.js" src="http://marcoslin.github.io/angularamd/js/lib/requirejs/require.js"> </script> <script src="js/app.js"></script> </head> how can define requirejs module or implement angularjs ui-rooter?
extend:
in example added above code in app.js
define([], function() { var app = angular.module('webapp'); return app; }) i added above code script.js.also in app.js file contain ui router things , changed main.js following code
require.config({ //baseurl: "js/scripts", baseurl: "", // alias libraries paths paths: { // here define path names // make controllers , lazy-file-names independent "testcontroller" : "modules/test/js/controller/testcontroller", }, deps: ['js/script'] // changed section }); but in browser console gettnig error "networkerror: 404 not found .../default/app.js" .how can solve issue.i directly added js file through html.but getting error.
as discussed in comments , related plunker: http://plnkr.co/edit/iv7fug5mkotq2jokk9e0?p=preview
i followed q & a:
angular-ui-router requirejs, lazy loading of controller
and updated plunker , make working.
there many changes. e.g. should keep reference controller providers:
var app_cached_providers = {}; app.config(['$controllerprovider', function(controllerprovider) { app_cached_providers.$controllerprovider = controllerprovider; } ]); and inside of our mapped controllers (e.g. controller_home.js) register that:
define(['app'], function (app) { // content controller // added 'app' module // lazily, , once app_cached_providers .$controllerprovider .register('homectrl', function ($scope) { $scope.message = "message homectrl"; }); }); also, helper method make other stuff bit simplier
var loadcontroller = function(controllername) { return ["$q", function($q) { var deferred = $q.defer(); require([controllername], function() {deferred.resolve(); }); return deferred.promise; }]; } and here use extend state definitions. firstly root state:
$urlrouterprovider.otherwise('/root'); $stateprovider .state('root',{ url: '/root', templateurl: 'view_root.html' }); now states loading controller async way:
var root_home = { //url: '/index.html', url: '/home', views: { '' : {templateurl: 'view_home.html', controller: 'homectrl' }, }, data: { displayname: 'home', }, resolve : { } }; root_home.resolve.loadtopmenuctrl = loadcontroller("homectrl"); var root_about = { //url: '/about.html', url: '/about', views: { '' : {templateurl: 'view_view1.html', controller: 'view1ctrl' }, }, data: { displayname: 'about', }, resolve : { } }; root_about.resolve.loadcontentctrl = loadcontroller("view1ctrl"); $stateprovider .state('root.home', root_home) .state('root.about', root_about) check in action here
Comments
Post a Comment