I am trying to add 'base64' module to my Angular page controller.
Until now I have declared my controller like this:
angular.module('app').controller('newProjectController', newProjectController);
now what I should be doing looking at the git (https://github.com/ninjatronic/angular-base64) is
angular.module('app', ['base64'] ).controller('newProjectController', newProjectController);
However, what happens is that my view is just empty. It does not give any error message, but the view is rendered empty. I have included the js file in my index.html page, before using the controller.
The same problem persists when I use
angular.module('app', [] ).controller('newProjectController', newProjectController);
so the 'base64' module cannot be the problem in this...
Any ideas of what's going wrong? I am on Angular version 1.4.1.
first define module
angular.module('app',['base64'])
second define controller by referencing to defined module
angular.module('app' ).controller('newProjectController', newProjectController)
third make good tea ))
Related
I'm following a tutorial for integer Angular JS on a RoR project.
In my controller js files i've got this:
raffle.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
#RaffleCtrl = ($scope) ->
$scope.entries = [
{name:"name1"}
{name:"name2"}
{name:"name3"}
{name:"name4"}
]
and in my controller html (generated by rails) i've got this:
index.html.erb
<h1>Raffle</h1>
<div ng-controller="RaffleCtrl">
<form>
<input type="text" ng-model="newEntry.name">
</form>
<ul>
<li ng-repeat="entry in entries">
{{entry.name}}
</li>
</ul>
</div>
so it should repeat the four name in the array entries but it doesn't work: i open the log and i found this error:
Argument 'RaffleCtrl' is not a function, got undefined
You must define the ng-app directive in application.html.erb:
<html ng-app="Raffler">
...
</html>
Then in raffle.js.coffee replace this:
#RaffleCtrl = ($scope) ->
With this:
angular.module('Raffler', []).controller "RaffleCtrl", ($scope) ->
You must set the required ng-app directive in your Angular apps--this specifies the element as the root element. Do this in your application layout, on a high-level/root element like a body or html tag. Important note, you can designate this directive once and only once--if you mistakenly add multiple then the first designation in the app will be used to define the root element.
After you add ng-app, then specify a matching root module using the name you specified in ng-app. Leaving the array empty in the definition indicates that you're defining the module rather than invoking it. It doesn't matter what name you use, just make sure it's something relatively descriptive of your app, unique among your modules and that you specify precisely the same name for your root module that you added in `ng-app. This module will either contain your application code directly, or will have dependencies on other modules that contain it.
Basically, you must give your application an ng-app attribute, designating the doc's root element. And then you must create your Angular root module using that same name--"Raffler" in this case.
This should be relevant regardless but FWIW I was using Rails '4.1.5' and the angularjs-rails gem 1.4.4.
I've just started with Angular after many years working with MVC. I'm quite familiar with js, HMTL but still beginner in the Angular world.
I lost 3 hours trying to figure out what is wrong with my app.
So the app has 3 files
index.html
<body ng-app="perica">
<p>main</p>
{{ tagline }}
<a ng-click="logOut();">Logout</a>
<div ng-view><p>inside</p></div>
</body>
<script type="text/javascript" src="../components/angular/angular.js"></script>
<script type="text/javascript" src="../AgularApp.js"></script>
<script type="text/javascript" src="../controllers/AcountController.js">
AngularApp.js
debugger;
angular.module('perica', ['ngRoute']).config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {
console.log('in');
debugger;
$routeProvider.when('/test', {
templateUrl: 'views/Account/_Login.html'
})
$locationProvider.html5Mode(true);
}]);
and AccountController.js
var myApp = angular.module('perica', []);
myApp.controller('AcountController', ['$scope', function ($scope) {
$scope.tagline = 'The square root of life is pi!';
}]);
So as you can see it is a super simple application.
By all the coding logic, I should load angular core scripts the first, then my angular app and at the end angularcontroles.
When I run the app, Chrome hit the first debugger (above angular.module inside AngularApp.js file) and jumped straight into AccountContoler.js and completely ignored what is defined inside of the AngularApp.js.
but
When I reversed paths and put first AccountController.js and afterwards AngularApp.js everything worked without any issue
I would be really grateful if someone can shed some light on this issue
Thanks!
By using...
var myApp = angular.module('perica', [])
... in your AccountController.js, you're not loading your already existing 'perica' application (declared in the previously loaded AngularApp.js):
you are re-defining the perica application.
The correct way to refer to your already existing module is using:
angular.module('perica')
^
no dependency declared
instead of:
angular.module('perica', [])
^
dependencies
The logic behind this is quite simple once you're acquainted to it: if you're declaring dependencies while "loading" a module, you're creating that module. Otherwise, you're referring to it.
TL;DR: You're basically using a setter here twice and never actually enhancing your existing module.
Here's a working JSFiddle (link) with your application running. I loaded AngularJS directly from the Javascript framework/extensions menu and referred to an external JS resource for angular-route (fetched from cdnjs: https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js).
I basically simply concatenated both your AngularApp.js and AccountController.js contents to emulate loading them one after the other.
Please note that your also have to declare the controller that controls your view: I took the liberty to enhance your <body ng-app="perica"> element as follows:
<body ng-app="perica" ng-controller="AcountController">
I'm constantly getting this error -
https://docs.angularjs.org/error/$injector/nomod?p0=interactive-main
The project structure (with multiple people developing and all new to angularjs) looks like this -
public
|--css, font-awesome
|--js (where angular.min.js and other jquery libraries are)
|--views (where html for each pages are)
|--myHTMLcontents
|--js
index.html
The index.html has it's own data-ng-app name and it's used in the app.js file.
I have my HTML files in the views folder, and the corresponding js files are in the views folder also.
I tried to create with
angular.module('myApp').controller(....
But I guess you're supposed to only create angular.module once (which is in the app.js), but I'm still unsure how to add 'myApp' in app.js.
I tried to do this:
(function () {
angular.module('data-ng-app Name', [
'ui.router', // Routing
'oc.lazyLoad', // ocLazyLoad
'ui.bootstrap', // Ui Bootstrap
'myApp'
])
})();
The nodejs server doesn't throw error, but nothing shows on the page (after I added 'myApp').
How do you solve this?
You need to create the module 'myApp' once and run it in app.js.
below is an example.
angular.module('myApp', []).run()
And then in your controller
angular.module('myApp.controllers', []).controller('RegisterCtrl', function () {});
First make sure your declare the myapp module file in your index before inject it into an other one :
<script src="js/myapp.js"></script>
<script src="js/my-module-injecting-myapp.js"></script>
Then two ways :
The first one is directly calling the module, by the way you did :
angular.module('myApp').controller(....
The second and what I used to do is declaring it as variable:
var myAppModule = angular.module('myApp', []);
Then to declare a controller, service , whatever, just call the variable:
myAppModule.controller("myAppController", function(){...
One last thing, I don't know if was an example but do not declare your module name with space :
angular.module('data-ng-app Name', [....
should be :
angular.module('myModuleNamewithoutSpace', [....
I have two files in which I define services in my angular app, but when I try to use them both in my directive, I get an error saying the service provider is not found for whichever directive I define second. It seems like one service is overwriting the other. If I change the module definition in service2.js to myapp.services2, then it works. I would think I could add multiple factories to the same module this way. Can someone point out what I'm doing incorrectly?
service1.js:
var services = angular.module('myapp.services',[]);
services.factory('Service1', function() {
// service code
});
service2.js:
var services = angular.module('myapp.services',[]);
services.factory('Service2', function() {
// service code
});
mydirective.js:
angular.module('myappdirective', []).directive('myapp', ['Service1', 'Service2',
function(service1,service2) {
// directive code
}]);
This is from the docs:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Found here:
https://docs.angularjs.org/guide/module
This is possible, however will be error prone, hence not recommended
Make small modification to what you are already doing
Just do not re-declare the module variable in other files other than service1.js or put the module definition to a file of its own and include these JS file in the order of Module.js, services.js, directive.js then it will work
I'm trying to implement the code from https://github.com/Ciul/angular-facebook or more specifically the code from http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview
I included the Javascript code from http://rawgithub.com/Ciul/angular-facebook/master/lib/angular-facebook.js and script.js
In script.js, I replaced:
angular.module('CiulApp', ['facebook'])
with
angular.module('app', ['facebook'])
because I already have a module called 'app' and it is the one for the entire site:
<html data-ng-app="app">
However, I get the following error in the browser console:
Error: Unknown provider: app.configProvider <- app.config
at Error ()
at http://localhost:8888/bower_components/angular-complete/angular.js:2652:15
...
...
I cannot figure out why I'm getting this error.
I do have a module called 'app.config' in my app.js file:
angular.module('app.config', []).value('app.config', { .... })
However, I don't think my app.config module is the source of the problem because I've changed the name of it and I still get same error. (I did not get any errors before I tried to implement http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview)
Can anyone help?
So, are there more than 1 line like this in your code now:
angular.module('app', [...
?
One for initializing the module, another one for handling Facebook auth? If yes, try this:
Locate the 1st occurrence of the code (that is, where you declare the module) and put all dependency declarations there:
angular.module('app', ['facebook', 'other dependencies...'])
Then, locate the other line, where you are dealing with the FB auth, and replace it with:
angular.module('app').doYourStuff(
This way you will declare the module only once, and when you want to alter it, you'll get the already initialized version instead of creating another module over and over.
It would be easier if you would provide jsFiddle/plunker of the non-working code. Anyway it seems that you are initializing your 'app.config' module with itself
angular.module('app.config', []).value('app.config', { .... })
and because your are not giving enough information I'm guessing that your trying to inject your 'app.config' somewhere in your code?
If you want to configure you 'app' you should do in this way
angular.module('myModule',[]).value('foo'{bar:'abc'})
angular.module('app',['myModule']).config(function($routeProvider){
$routeProvider.when('/',{templateUrl: 'partials/phone-list.html', controller:'SomeCtrl')
}).run(function($foo){
alert($foo.bar)
})
Also checkout the documentation how to use modules. AngularJS : module