I am developing a MEAN app. My Angular folder structure is the following:
and get the following errors on my app:
but when I rename the 'users' folder to anything else, like 'user', it works:
why is that?
EDIT:
app.js as requeseted:
var mainModuleName = 'mean';
var mainModule = angular.module(mainModuleName, ['ngRoute', 'example', 'users']);
mainModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('!');
}]);
if (window.location.hash === '#_=_') window.location.hash - '#!';
angular.element(document).ready(function() {
angular.bootstrap(document, [mainModuleName]);
});
I think you're missing the second argument for angular.module in your first case. You should have
angular.module('users',[]).factory('auth',[auth]);
Because you don't have the brackets, you're not actually creating a new instance of user and that's where the error is coming from.
This link might help
https://docs.angularjs.org/api/ng/function/angular.module
Bwah! Silly me.
I have a method as my API that is at the following:
http://localhost:3000/users
so instead of serving files, it reaches for the API and that is also why Mongoose throws an error there in the console picture.
Related
I'm building a Chrome extension and surprisingly, I could create one AngularJS app for the extension side and another for the content script side. The latter is useful to work with a modal-like element injected in the page. I injected this app with this content script:
var myApp = angular.module('ContentApp', []);
/**
* Append the app to the page.
*/
$.get(chrome.runtime.getURL('templates/modal.html'), function(data) {
$($.parseHTML(data)).appendTo('body');
// Manually bootstrapping AngularJS app because template was also manually imported.
angular.element(document).ready(function() {
angular.bootstrap(document, ['ContentApp']);
});
});
The problem comes now that modal.html is getting big and I still have to add more elements. I thought that I could start creating components in Angular and did it like this:
angular.module('ContentApp').
component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
This actually works. I can see the Hello, world message in the rendered page. But when I changed template for templateUrl, it failed:
// This doesn't work
templateUrl: 'templates/component.html',
// Neither does this
templateUrl: 'templates/component.html',
// Although this is similar to the way I got the main template, it didn't worked either
templateUrl: chrome.runtime.getURL('templates/component.html'),
Worth to mention that I added the permission to manifest.json:
"web_accessible_resources": [
"templates/*"
],
The error that I got in the console is this:
Error: [$sce:insecurl] http://errors.angularjs.org/1.5.11/$sce/insecurl?p0=chrome-extension%3A%2F%2Fext_id%2Ftemplates%2Fmodal.html
at chrome-extension://ext_id/scripts/lib/angular.min.js:6:426
at getTrusted (chrome-extension://ext_id/scripts/lib/angular.min.js:154:156)
Does anyone know how to make it work? Or am I asking too much for a Chrome extension?
I found the answer in this link. Thanks to faboolous who pointed me in the right direction ;)
Since templateURL is processed before $scope execution, the proper way to secure a template path in a Chrome extension is this:
// This works. Yay!
angular.module('ContentApp').
component('greetUser', {
templateUrl: ['$sce', function ($sce) {
return $sce.trustAsResourceUrl(chrome.runtime.getURL('templates/component.html'));
}],
controller: function ($scope) {
...
I'm totally new to the Restangular and trying to learn it by implementing a simple application by calling a webapi. I'm able to call this service with simple $http service and getting the correct response.
The code I have written is as below.
I have googled the issue to find the solution but no like.
var myApp = angular.module('myApp', ['restangular']);
myApp.config(function (RestangularProvider) {
var newBaseUrl = "";
newBaseUrl = 'http://localhost:37103/api/'
RestangularProvider.setBaseUrl(newBaseUrl);
})
myApp.controller("myCtrl", function ($scope, Restangular) {
$scope.data = "Default Value"
$scope.data = Restangular.one("employee").get();
})
The error which I'm getting on chromes console is as below
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…0Bc%20(http%3A%2F%2Flocalhost%3A37103%2FSource%2Fangular.min.js%3A21%3A179)
The above error is clickable and it says may be the file is mot included. But I have included the restangular.js file and I could see it getting loaded in the network tab.
Thanks!
For this issue I found something was wrong in the restangular.js file which I downloaded. I replaced it with the cdn tag cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.js and it worked. Its very strange.
I've just installed the following package with bower:
https://github.com/urish/angular-spinner
The package is added successfully. I've also added:
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.js"></script>
When I try to inject it like this:
(function()
{
angular.module('employeeApp',['angularSpinner']).controller('schoolController', schoolController);
It crashes and I receive the error:
Argument 'indexController' is not a function, got undefined
When I remove ['angularSpinner'] everything works again.
What should I do?
--EDIT--
indexController
angular.module('employeeApp').controller('indexController', indexController);
function indexController($location, authenticationFactory,constants)
{
var vm = this;
vm.setName = function()
{
return constants.firstname;
}
}
in angular you create module for your app and there you specify the dependencies. and once you create controller or service you get the module by name and create controller\ service in that module.
//create module for app
angular.module('employeeApp', [ /*add your dependencies here*/ ]);
//create controller\ service
angular.module('employeeApp').controller(function(){
//controller implementation
});
what might happen is you may re initialize your app by mistake.
for simplification you could store your angular module in a variable as follows:
var app = angular.module('employeeApp', ['angularSpinner']);
and define a controller like this:
app.controller('indexController',function(angularSpinner){
//controller code here
});
So I'm taking my first steps with Angular. In the slightly simplified code below I'm trying to load a JSON file that matches the URL (eg. ex1.html loads ex1.json).
var exerciseApp = angular.module('exerciseApp', ['ngAnimate', 'ui.router']);
exerciseApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('exercise', {
url: '/{exId:ex[0-9]{1,2}}',
controller : 'loadContent'
});
});
exerciseApp.controller('loadContent', function($scope, $stateParams, $http) {
$http.get('/content/'+$stateParams.exId+'.json').success(function(data){
$scope.excontent=data;
})
});
It works fine if the $http.get just says ('/content/ex1.json').
As it is, the app does seem to be seeing the ex.json file (a file not found error isn't returned if there is an ex1.json file in the content folder).
I'm sure I've seen something like this working elsewhere. What am I doing wrong?
Solved: Realised my mistake. I hadn't wrapped the values I wanted to display in the view template within ui-view. The JSON was loading but there was nowhere in the view to show it.
I am pretty new to Angular.JS and Typescript and try to use them together but I am stuck at a point, which should not be a problem for most of you.
Is successfully made route with a view and a controller.
This works perfectly if they are in the some file like this.
var collabClientApp = angular.module('collabClientApp', ['ui.router']);
console.log("started routing");
collabClientApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/projects");
$stateProvider
.state('projects', {
url: "/projects",
templateUrl: "views/projects.html",
controller: "ProjectListController"
})
});
collabClientApp.controller("ProjectListController",
function ProjectListController($scope) {
$scope.projects = projects;
}
);
Then I tried to move the controller to a separate file like this:
/// <reference path="../controllers.ts"/>
/// <reference path="../collabClientApp.ts"/>
"use strict";
collabClientApp.controller("ProjectListController",
function ProjectListController($scope) {
$scope.projects = projects;
});
collabClientApp.ts is the name of the file which does the routing.
I get the following message:
Uncaught ReferenceError: collabClientApp is not defined
The reference part is correct, so collabClientApp should be found in the controller-file.
Or do I miss something?
Help is very much appreciated.
You need to compile with the --out option to get a single file. OR include all files using script tags OR use a module loader like RequireJS