I'm using AngularJS with RequireJS and ui-router, with the Play Framework 2.3 (and the WebJars stuff).
main.js
(function () {
'use strict';
requirejs.config({
// Packages = top-level folders; loads a contained file named 'main.js"
packages: ['dashboard'],
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-ui-router': ['../lib/angular-ui-router']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-ui-router': {
deps: ['angular'],
exports: 'angular'
}
}
});
require(['angular', 'angular-ui-router', './app'],
function (angular) {
var mod = angular.module('app', ['ui.router']);
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
});
}]);
angular.bootstrap(document, ['app']);
});
})();
app.js
define(['angular', 'dashboard'], function(angular) {
'use strict';
return angular.module('app', ['app.dashboard']);
});
dashboard/main.js
define(['angular', './routes'], function(angular) {
'use strict';
return angular.module('app.dashboard', ['dashboard.routes']);
});
dashboard/routes.js
define(['angular'], function(angular) {
'use strict';
var mod = angular.module('dashboard.routes', []);
console.log("Enter the routes.js"); // DOES WORK
mod.config(['$stateProvider', function($stateProvider) {
console.log("Enter the config file in routes.js"); // DOESN'T WORK, NEVER REACH THAT POINT
$stateProvider.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
}]);
return mod;
});
The states defined in my submodules are not loaded, but if I'm putting them in the main main.js, it does work :
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
})
.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
;
}]);
So this is really a problem about loading with RequireJS, but I can't figure out what's wrong..
Any ideas ? Thanks
Related
Im new to angular and I tried to generate a project with the yeoman angular-fullstack generator. I want to add a new url /portfolio so I duplicated the main-folder on the same level and renamed it to "portfolio".
I've created three files:
1) portfolio.controller.js 2) portfolio.html 3) portfolio.js
I've included the js-files in the index.html for the client like this:
<script src="app/portfolio/portfolio.controller.js"></script>
<script src="app/portfolio/portfolio.js"></script>
And the following code can be found in the controller:
'use strict';
(function() {
class PortfolioController {
constructor($http, $scope, socket) {
console.log("working");
}
}
angular.module('myPortfolioApp')
.controller('PortfolioController', PortfolioController);
})();
And this is from the portfolio.js:
'use strict';
angular.module('myPortfolioApp')
.config(function($stateProvider) {
$stateProvider
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/portfolio/portfolio.html',
controller: 'PortfolioController',
controllerAs: 'portfolio'
});
});
you are not declaring a new module, you are missing the array of dependencies:
angular.module('myPortfolioApp',[]) //NOTICE THE BRACKETS
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/portfolio/portfolio.html',
controller: 'PortfolioController',
controllerAs: 'portfolio'
}]);
});
I code a lazyLoadModule function, which is used to loazyLoad angular.js modules.But I found that webpack will require all files in '../modules/' directory, the reason maybe is that var mod = require("../modules/" + module); executed. I want require files when call the function in router resolve.
lazyload.js:
exports.lazyLoadModule = function(module){
var resolver = {
'lazyLoad': ['$q', '$ocLazyLoad', function($q, $ocLazyLoad){
var deferred = $q.defer();
require.ensure([], function (require) {
var mod = require("../modules/" + module);
$ocLazyLoad.load({
name: mod.name,
});
deferred.resolve();
});
return deferred.promise;
}]
}
return resolver;
}
app.js:
var lazyLoadModule = require('../util/lazyLoad.js').lazyLoadModule;
angular.module('app', ['ui.router', 'oc.lazyLoad', 'ngMaterial']);
angular.module('app')
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/home',
template: require('../modules/home/template/home.html'),
resolve: lazyLoadModule('home/home.js')
})
.state('biz1', {
url: '/biz1',
template: require('../modules/biz1/template/biz1.html'),
resolve: lazyLoadModule('biz1/biz1.js')
})
$urlRouterProvider.otherwise('home');
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['app'], {
});
});
You can use bundle-loader to do this:
(require('bundle?name=[path]!../modules/' + module))(function(mod) {
});
This will build every file inside the modules directory as a separate chunk, because of the name=[path] parameter.
I am trying to load a controller so that my view will display. Actually I write my controller .Route or config also .But I am not able to load my controller and route file how to load controller using require.js so that my login.html page is display?
Here is my 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");
}]);
});
Any guess how to load view?
You just need to do:
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")
};
}]);
});
You can follow the tips here - https://www.startersquad.com/blog/angularjs-requirejs/
Got Unknown provider when injecting service into the child state resolve function. But if defined a resolve in the parent state, it just works. Below there are some sample codes:
I defined a service module
angular.module('services', [])
.factory('myService', function() {
// my service here
})
and initialize the app
var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider.state('wizard', {
url: '/wizard',
abstract: true
})
.state('wizard.step1', {
url: '/step1',
templateUrl: ... ,
resolve: {
name: function(myService) {
// do something with mySerice
}
},
controller: function(name) {
// controller codes here
}
})
}]);
I got the error Unknown provider complaining about myService in the wizard.step1 resolve. But if I add a random resolve in the parent state, like
$stateProvider.state('wizard', {
url: '/wizard',
abstract: true,
resolve: {
a: function() { return 1; }
}
})
then it works without error. Wonder what happens here?
In your controller you have to inject your service MyService, so define something like this
.state('wizard.step1', {
url: '/step1',
templateUrl: ... ,
resolve: {
name: ['myService', function(myService) {
// do something with mySerice
}]
},
controller: ['name', function(name) {
// controller codes here
}]
})
You have to inject your service in your config function :
var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', 'myService',
function($stateProvider, $urlRouterProvider, myService) {
...
Another way is to embed your resolve code in a service and assign directly the service :
app.config(['$stateProvider', '$urlRouterProvider' ,'mySuperService',function($stateProvider,
$urlRouterProvider, mySuperService) {
...
resolve: {
name: mySuperService()
}
.constant('mySuperService', function() {
var serv= function(){
// your code
}
return serv;
}
I am using angularjs with requirejs. I am running into a problem where my routes are not being routed properly. It's constantly routing to /. If I change /post to /:post it hits my post route.
// module/post.js
define([], function () {
'use strict';
var app = angular.module('myApp.post', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/post', {
controller: 'PostController',
template: "<div>{{page}}</div>"
}
);
}
]);
return app;
});
// main.js
require.config({
baseUrl: '/static/js',
paths: {
angular: 'vendor/angular/angular',
jquery: 'vendor/jquery/jquery',
_: 'vendor/underscore/underscore'
},
shim: {
angular: {
exports: angular
}
}
});
require([
'module/post'
], function() {
'use strict';
var app = angular.module('myApp', [
'myApp.post'
])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.otherwise({
redirectTo: '/'
});
}
]);
$(function(){
angular.bootstrap(document, ['myApp']);
$('html').addClass('ng-app: myApp');
});
});
Dumb mistake on my part. I'll leave this question opened in case someone runs into this problem.
I did not have html5 mode on
var app = angular.module('myApp.post', [])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/post', {
controller: 'PostController',
template: "<div>{{page}}</div>"
}
);
$locationProvider.html5Mode(true);
}
]);
otherwise my urls would map with hashbang
localhost/#post instead of /post