The code inside my angularjs config block is not getting executed. I have already checked the similar questions on stackoverflow and nothing helped me. I have already checked the 2 possible errors.
1)Missing ng-app in html.
2)Overriding of module.
I am not sure what's going wrong. I can see that the breakpoint is going to this line but it doesn't go inside this block. I also don't see any error on the console. It just silently ignores it. Even if I change $locationProvider to $locationProvider1 , it doesn't give any error.
myLittleApp .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
index.html
<html class="no-js" ng-app="littleapp">
</html>
app.js
'use strict';
var angular = require('angular');
require('angular-ui-router');
require('angular-ui-bootstrap');
var myLittleApp = angular.module('littleapp', [
'ui.router',
'ui.bootstrap',
require('./modules/firm').name
]);
myLittleApp .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
console.log('test');
}]);
As per the code you provided, Your code seems to have a space between your application variable name and the config function. I removed it. Try it again. I also moved the firmModule outside the app module. One more thing, try following John Papas Style Guide.
Also can you share the .modules/firm code to see how you are exporting the module?
var angular = require('angular');
require('angular-ui-router');
require('angular-ui-bootstrap');
var firmModule = require('./modules/firm').name;
var myLittleApp = angular.module('littleapp', [
'ui.router',
'ui.bootstrap',
firmModule
]);
myLittleApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
console.log('test');
}]);
I was able to resolve this issue on my own. The issue was with ng-app in html file. It should be an attribute of body tag instead of html tag.
wrong
<html class="no-js" ng-app="littleapp">
<body>
</body>
</html>
Correct
<html class="no-js" >
<body ng-app="littleapp">
</body>
</html>
Related
I am following this tutorial, and I have an app structure like this. I've tried to show only the relevant bits as it is sort of a lot of code.
/app
/views
index.ejs
/config
express.js
/public
/external_libs
angular.js
angular-ui-router.js
/js
app.js
controllers.js
/partials
home.html
server.js
Inside my express.js (relevant bit)
app.use(express.static('./public');
I am able to set up my angular controllers, so I know this directory is being hit. For example, my index.ejs
<html ng-app="myapp">
<head>
<script src="external_libs/angular.js"></script>
<script src="external_libs/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"</script>
</head>
<body ng-controller= "MainCtrl"> <!-- an alert in my controller fires, so I know the public directory is accessible, at least the js folder-->
<div ui-view></div>
</body>
</html>
In my app.js
var app = angular.module('myapp', ['ui.router']);
app.config([
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/home.html'
});
}
]);
In controllers.js
var app = angular.module('myapp', []);
app.controller('MainCtrl', [
'$scope', function($scope) {
alert("This alert is indeed alerted");
}
]);
home.html
<h1> This is a test to see if the view on index.ejs is being populated </h1>
I have tried many different combinations for the "templateUrl" inside app.js, including
"partials/home.html"
"/partials/home.html"
"../partials/home.html"
None of these result in home.html being placed inside the div ui-view element on my index.ejs page. I realize I have posted a somewhat limited amount of code, but the fact that I am able to hit my controllers and see an alert message leads me to believe that I am almost there. I am using server side routing to render the initial index.ejs, but other than that I want to handle things client side. Does anyone know how to make angular-ui-router locate my partial with this set up?
The problem is with your controller declaration. Rather than referencing the module you recreate it (and override the existing module) by including the square brackets.
If you rewrite your controller as below it should work:
var app = angular.module('myapp');
app.controller('MainCtrl', [
'$scope',
function($scope) {
alert("This alert is indeed alerted");
}
]);
For more info, check out "Creation versus Retrieval" at https://docs.angularjs.org/guide/module
I am trying to create a simple Angular app and I have recently added a router in route.js. For some reason the association isn't being made between mainCtrl and someview.html The reason I know this is because the view isn't being injected in <div ng-view></div> Anyone have any idea why?
My folder structure is the following
root
------/app
----------routes.js
----------/views
-----------------someview.html
------/public
---------mainCtrl.js
---------index.html
server.js
mainCtrl.js
angular.module('LiveAPP',[])
.controller('MainCtrl', function($scope) {
$scope.Artists = [
{name:"Blink 182",age:14},
{name:"Led Zeppelin",age:12},
{name:"Lil Wayne",age:11}
];
$scope.number = 100;
});
someview.html
<div>{{number}}</div>
route.js
angular.module('LiveAPP', ['ngRoute'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/views/someview.html',
controller : 'MainCtrl'
})
});
index.html
<!doctype html>
<html ng-app='LiveAPP'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="mainCtrl.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000);
console.log("Listening at 3000")
angular.module('LiveAPP',[])
.controller('MainCtrl', function($scope) {
Here, you define a module LiveAPP, that doesn't depend on any other module, and add a controller to this module.
angular.module('LiveAPP', ['ngRoute'])
.config(function($routeProvider, $httpProvider) {
And here, you redefine, once again, a module with the same name, depending on ngRoute. But since you're redefining it, you effectively overwrite the previously defined module and all its components.
A module must be defined once, and only once.
I don't know much about express, but I also don't understand why all your files are not under public, since that is apparently the directory that the web server serves.
In our application we have app.js and the high level content is below.
var app = angular.module('testApp', [ 'ngResource', 'ngRoute', ui.bootstrap', 'infinite-scroll']).config(function($locationProvider) {
$locationProvider.html5Mode(false);
});
var appEmail = angular.module('testAppEmail', ['mnpi', 'ngTagsInput', 'ui.tinymce']);
This app.js is been included in all the html files.
I would like to include treeGrid in one of the html, say treeTest.html, hence, added tree-grid-directive.js in the treeTest.html.
We have a separate js (treeTest.js) for this html file.
treeTest.html,
<html ng-app='testApp'>
<script src='js/jquery/jquery-1.11.1.min.js'></script>
<script src='js/jquery/jquery-ui-1.10.4.min.js'></script>
<link rel="stylesheet" href="css/jquery-ui.min.css" />
<script src="js/angularjs/angular.min.js"></script>
<script src="js/angularjs/angular-resource.min.js"></script>
<script src="js/angularjs/angular-route.min.js"></script>
<script type="text/javascript" src="js/angularjs/tree-grid-directive.js"></script>
<script src="js/test/controllers/treeTest.js"></script>
<body ng-controller="treeTestCtrl">
<div ng-if="loadingIsDone">
<tree-grid tree-data="tree_data"
tree-control="my_tree"
col-defs="col_defs"
expand-on="expanding_property"
on-select="my_tree_handler(branch)"
expand-level="1"
icon-leaf= "">
</tree-grid>
</div>
In treeTest.js,
angular.module('testApp').controller(
//app.controller(
'treeTestCtrl',
function($scope, $location, $http, $modal, $log, $window,
referenceDataService, windowService, dealDataService) {
// loading data for the tree and set the JSON array for the tree
}
Now, treeGrid works fine if i include the treeGrid directive in app.js as below.
var app = angular.module('testApp', [ 'ngResource', 'ngRoute', 'ui.bootstrap', 'infinite-scroll','treeGird']).config(function($locationProvider) {
$locationProvider.html5Mode(false);
});
But the problem is, since it is added to app.js, it is expected to include the tree-grid-directive.js in all the pages.
Is there any way, I can include the treeGrid directive without adding in app.js so that I dont have to include the tree-grid-directive.js in all the pages.
Thanks,
Baskar.S
Maybe you can let the array of dependencies be constructed dynamically, e.g.:
// additional dependencies here, this is the "dynamic part"
var dynamicDeps = ['treeGird'];
// common code
var deps = ['ngResource', 'ngRoute', 'ui.bootstrap', 'infinite-scroll'];
angular.forEach(dynamicDeps, function(dep) {
deps.push(dep);
});
var app = angular.module('testApp', deps).config(function($locationProvider) {
$locationProvider.html5Mode(false);
});
var appEmail = angular.module(...);
...
I was curious if anybody was familiar with separating routes from the main app config function. My route list is getting quite large and I wanted to move them into a separate file and load them into the main config. I have seen this done before but I cannot remember or find where I saw it. Any help would be appreciated.
You can (and should !) use AngularJS modules to separate your application into modules.
Then, each module can define its own routes (with its own .config).
Then, in your main module (usually "app"), you just need to require them as dependencies and you're set to go.
angular.module('blog', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
...
}];
angular.module('app', ['blog', 'user']);
Then you can have each module in its own file.
You can put your config function in a separate file easily:
App-config.js
angular.module('app').config(function(...){...});
Just make sure you include the module definition before you include App-config.js.
App-module.js
angular.module('app',[...]).controller(...).etc
It's easy to set up config file separately. There are few other ways to set this up, and I played around with those structure for config; this seems to work for me the best. Enjoy!
---> myApp.html
<html lang="en" ng-app="myApp">
<head>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/controller.js" type="text/javascript"></script>
...
</head>
<body ng-controller="MainCtrl">
<!-- /* Using ng-view with routeProvider to render page templates */ -->
<div data-ng-view></div>
</body>
</html>
----> app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'ngAnimate',
'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/page1', {
templateUrl : 'partials/page1.html',
controller : 'page1Controller'
});
$routeProvider.when('/page2', {
templateUrl : 'partials/page2.html',
controller : 'page2Controller'
});
$routeProvider.when('/images', {
templateUrl : 'partials/page3.html',
controller : 'page3Controller'
});
$routeProvider.otherwise({redirectTo: '/page1'});
}]);
--->controller.js
angular.module('myApp.controllers', ['myModules'])
.controller('mainCtrl', function($scope) {
...
})
.controller('page1', function($scope) {
...
})
.controller('page2', function($scope) {
...
})
.controller('page3', function($scope) {
...
});
The following file "works" (the sense that it does not throw any errors):
<!doctype html>
<html ng-app="modx">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script>
angular.module("modx", [], function($routeProvider) {
});
</script>
</html>
but this
<!doctype html>
<html ng-app="modx">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script>
angular.module("modx", [], function($routeProvider, $rootScope) {
});
</script>
</html>
gives the error:
Error: Unknown provider: $rootScope from modx
Source File: http://code.angularjs.org/angular-1.0.0rc7.js
Line: 2491
WTF?
You can not ask for instance during configuration phase - you can ask only for providers.
var app = angular.module('modx', []);
// configure stuff
app.config(function($routeProvider, $locationProvider) {
// you can inject any provider here
});
// run blocks
app.run(function($rootScope) {
// you can inject any instance here
});
See http://docs.angularjs.org/guide/module for more info.
I've found the following "pattern" to be very useful:
MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];
function MainCtrl (scope, rootscope, location, thesocket, ...) {
where, MainCtrl is a controller. I am uncomfortable relying on the parameter names of the Controller function doing a one-for-one mimic of the instances for fear that I might change names and muck things up. I much prefer explicitly using $inject for this purpose.
I don't suggest you to use syntax like you did. AngularJs lets you to have different functionalities as you want (run, config, service, factory, etc..), which are more professional.In this function you don't even have to inject that by yourself like
MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];
you can use it, as you know.