There are no errors thrown, and the app works in Chrome.
/* app.js */
var app = app || angular.module('app', []);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/look', {templateUrl: 'partials/look.html', controller: 'DataCtrl'});
}]);
/* Controllers */
var app = app || angular.module('app', []);
app.controller('DataCtrl', ['$scope', '$http', function($scope, $http){
$scope.orderProp = 'id';
$http.get('data/data.json').success(function(data){
$scope.data = data;
});
}]);
Any hint of what could be going wrong? Please let me know if more data is needed.
Related
This is my ngRoute (AngularApp.js)
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/register', {templateUrl: 'partials/AdminPage/register.html', controller: 'registerCtrl'}).
when('/updateEmployee', {templateUrl: 'partials/AdminPage/updateEmployee.html', controller: 'updateEmployeeCtrl'}).
when('/designers',{templateUrl: 'partials/CreateSurvey/design.html',controller: 'DesignCtrl'});
});
This is Another js file where my other controllers are (AngularApp2.js)`
var app = angular.module("myApp", []);
app.controller('myController',function($scope,$http){
$http.get('data.json').success(function(response){
$scope.myData = response;
});
$scope.removeName = function(row) {
$scope.myData.splice($scope.myData.indexOf(row),1);
}
});
But when I include both angular code in one file as below, the 'myController' is not working.
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/register', {templateUrl: 'partials/AdminPage/register.html', controller: 'registerCtrl'}).
when('/updateEmployee', {templateUrl: 'partials/AdminPage/updateEmployee.html', controller: 'updateEmployeeCtrl'}).
when('/designers',{templateUrl: 'partials/CreateSurvey/design.html',controller: 'DesignCtrl'});
});
app.controller('myController',function($scope,$http){
$http.get('data.json').success(function(response){
$scope.myData = response;
});
$scope.removeName = function(row) {
$scope.myData.splice($scope.myData.indexOf(row),1);
}
});
What is the error I am making?
You have 2 different modules app and myApp but never inject one as dependency of the other
Assuming your ng-app uses app as main module you need to inject the myApp module into app one, or make both names the same so you only have one module
Problem is you have
var app = angular.module('app', ['ngRoute']);
it shoud be
var app = angular.module('myApp', ['ngRoute']);
Also make sure you use the ng-app="app" in the HTML if you are declaring as first way.
DEMO
I am getting javascript run time error
myApp is undefined
for my angular service. Don't know what wrong im doing here..
This is how i defined my app.js
app.js
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource',]);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/motors', {
templateUrl: 'View/motorList.html',
controller: 'motorController'
}).
when('/motors/:Id', {
templateUrl: 'View/motorDetails.html',
controller: 'motorDetailsController'
}).
otherwise({
redirectTo: '/motors'
});
}]);
This is how i am creating/calling myApp in controller.
Controller
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
This is how i am trying use myApp in my service. but it gives error myApp is undefined.
Service:
myApp.service('motorService', ['$http', function ($http) {
//////
}
and this is how i declared it in my html
<html ng-app="myApp">
Looking forward for some help.
Thanks
I think that the error is in the controller's declaration, because you're defining the app 'myApp' twice.
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
should be
angular.module('myApp').controller('motorController', function ($scope, motorService) {
//////
}
Edit
#simbada
It's up to you. You can separate them in different modules.
(function(angular){
angular
.module('myApp', ['myApp.Controllers']);
angular
.module('myApp.Services', [])
.service('mySrv', function($http){
function _get(){
return $http.get('url');
}
return {
get: _get
}
});
angular
.module('myApp.Controllers', ['myApp.Services'])
.controller('myCtrl', function($scope, mySrv){
$scope.var = 'Hello';
});
})(angular);
You have passed comma in dependancy after ngResource just remove that it'll work fine.
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
I think this should be
angular.module('myApp').controller('motorController', function ($sc...
whitout [ ] brackets.
also see how you declare your service:
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
when your service is 'motorService'
Your service should be:
myApp = angular.module('motorServices');
myApp.service('motorService', ['$http', function ($http) {
//////
}
This is my first attempt to create a sample angular application.
In app.js I defined the following -
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
I have created corresponding sample.js for controller, sample.html for template and sampleModel.js for model.
In grunt console, it throws app is not defined in controller and model file
Here is the controller file -
'use strict';
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
All the files are included in index.html and the resources are loading correctly which I checked by chrome developer tool but I can't find the reason why it says app not defined. Is there anything I am missing?
As they are separate files and grunt/jshint will not know that the variable is available in other files. Instead of that it would be a best practice to use it in this way:
Instead use this:
angular.module('myTestApp')
.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
Another general pattern you might have noticed in most the other's code, wrapping the code inside an IIFE.
(function() {
"use strict";
var app = angular.module('myTestApp')
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
})();
In this app will not pollute the global namespace and it's local to that function.
Here if you've noticed, I've not used [] while using angular.module(), it means that we're just getting that module.
So in your app.'s alone, it will be with [] and in other files without []
(function() {
"use strict";
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
$routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
})();
If everything else is fine, this line is causing the issue in your code -
app.config(function ($routeProvider) {
routeProvider
you should instead use -
app.config(function ($routeProvider) {
$routeProvider
And yes, if var app is not working, try using
angular.module('myTestApp')
.controller('SampleCtrl',...
I tried to use the code below to set cookies:
angular.module('myApp').controller('myController', ['$scope', '$http','$cookies', function ($scope, $http, $cookies) {
$scope.setMyCookie = function () {
$cookies.put('Mykey', 'MyValue');
};
$scope.setMyCookie();
}]);
I updated to version 1.3.14 of angular cookies, I know there is a breaking change, but how should I write the above code now ?
Running the above code I get this error : Error: $cookies.put is not a function
UPDATE :
I have to do this in 2 files:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
}]);
angular.module('myApp', ['ngCookies']).controller('cookiesExample', ['$cookies', function ($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
It happends via setting the $cookies variable:
angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
Your version:
angular.module('myApp', ['ngCookies'])
.controller('myController', ['$scope', '$http','$cookies', function ($scope, $http, $cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
Source
NOTE:
Remember to include <script src="angular-cookies.js"> in your html.
You must inject ngCookies in your module:
angular.module('myApp', ['ngCookies'])
Missing ngcookies in your module
angular.module('myApp', ['ngCookies'])
I have module with directive and application which is module with controllers.
angular.module('ValidationWidgets', [])
.directive('validationfield', function () {
....
});
angular.module('MyPage', ['ValidationWidgets'])
.controller('MyFirstController', function ($scope) {
....
});
Is there some pretty syntax to declare many controllers in app module, because .controller('MyFirstController', function ($scope) { looks bad?
I want to write something like:
var myPage = angular.module('MyPage', ['ValidationWidgets']);
myPage.controllers.MyFirstController = function($scope) {
...
}
var app = angular.module("myApp", []);
app.controller("my controller", function(){});
or
var app = angular.module("myApp", []);
var controllers = {};
controller.myController = function(){};
app.controller(controllers);
Take a look at this video http://egghead.io/video/angularjs-thinking-different-about-organization/
The whole series is amazing to be honest.
To expand on what #Jacob Dalton said, you can do this:
Setup your routes:
app.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/view1', {templateUrl: 'partials/view1', controller: 'View1Ctrl'}).
when('/view2', {templateUrl: 'partials/view1', controller: 'View2Ctrl'}).
otherwise({redirectTo: '/view1'});
}]);
Then you can declare your controllers by simply declaring a function:
function View1Ctrl($scope, $http) {
}
function View2Ctrl($scope, $http) {
}
Those functions will be auto wired as controllers. As stated before, however, this makes it less obvious that these functions are controllers.