I am new to Meteor and AngularJs. I am trying to follow the example app on https://github.com/lvbreda/Meteor_angularjs but I have not been able to get it working so far.
I am getting an error 'app is not defined' in this piece of code:
app.controller('MeteorCtrl', ['$scope', '$meteor', function ($scope, $meteor) {
Uncaught ReferenceError: app is not defined
$scope.todos = $meteor("todos").find({});
$meteor("todos").insert({
name: "Do something",
done: false
});
I tried to re-write the above as:
var MeteorCtrl = function ($scope, $meteor) {
$scope.todos = $meteor("todos").find({});
$meteor("todos").insert({
name: "Do something",
done: false
})
};
which is still throwing an error 'Error: Unknown provider: $meteorProvider <- $meteor'
The only other example of meter+angularjs at https://github.com/bevanhunt/meteor-angular-leaderboard appears to be dated.
Can someone please post a simple, but fully working, downloadable example of meteor+angularjs using the package at https://github.com/lvbreda/Meteor_angularjs?
I'm obviously biased but our team wrote and maintain this library - angular-meteor and we've also released a tutorial for combining the two - angular-meteor tutorial
While I'm not using lvbreda's Angular package, I have been able to integrate Angular with Meteor + Blade as the HTML templating language, in a relatively simple way. I started off with Daniel Olano's Ng-Meteor package, and ended up with my own implementation of a Meteor/Angular bridge. I'm new to both Meteor and Angular, but it appears to work well and I like that the code is very transparent so that I understand pretty well how it works.
I've written the following CoffeeScript module, named client/ngMeteor.coffee, which defines the bridge between Meteor and Angular:
define("ngMeteor", [], ->
angular.module('ngMeteor.directives', [])
angular.module('ngMeteor.services', [])
angular.module('ngMeteor.blade', []).run(['$templateCache', '$rootScope', '$compile',
($templateCache, $rootScope, $compile) ->
bodyTemplate = Template.body
if !bodyTemplate
throw new Error("A body template must be defined ('body.blade')")
# Render each template and place in Angular's template cache
$templateCache.put "#{key}.blade", render() for own key, render of Template
# Render the body template and have Angular compile it, then inject it into the DOM's body element
Meteor.startup(()->
# Necessary?
Spark.finalize(document.body)
$('html').attr('data-ng-app', '')
$('body').html($compile(bodyTemplate())($rootScope))
$rootScope.$apply()
)
])
angular.module 'ngMeteor', ['ngMeteor.blade', 'ngMeteor.services', 'ngMeteor.directives']
)
For a full working example see this example project of mine. Feedback is appreciated.
I just created a simple example which shows how to create a simple angular-meteor application.
The app displays some items from a mongo collection and can update the collection through the browser-console in realtime. (just default meteor features with angular-js)
It can be found on github: https://github.com/tom-muhm/angular-meteor-example.
You can find some examples in a different fork
https://github.com/alex-okrushko/Meteor_angularjs
I build an app in https://github.com/linepos/linepos but now it's not working because lvbreda changed the code
There is a different approach you can use https://github.com/kievechua/flame-on
Just had the same problem. Solved by adding meteor dependency
angular.module('meteorapp', ["meteor"]) # <------------------- Here
.config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
$locationProvider.html5Mode(true)
$routeProvider.when '/',
controller: 'home'
]
I am also new to Meteor and Angular - and I also had a hard time to make this work. But I think I managed to get the basic Angular functionality running.
What I found out I put onto github: https://github.com/dirkk0/angularjs-meets-meteorjs
I hope this works for you, too.
I've been going at this problem myself and made a package for angural.
example code is at: https://github.com/bramtervoort/meteor-angular-stack/tree/example
example at: http://bramtervoort-todo.meteor.com
Its very simple just install meteor and run: mrt add angular-stack
My answer will be simple: don't mix meteor and angular!
Why should you?
For the data binding capabilities? Meteor does it for you much simpler than angular with helpers and the publish/subscribe mechanism.
To build you own directives? Meteor templates and Blaze do that for you too.
After having used angular for quite a while, I've used meteor recently and find it so much simpler: much less code to achieve the same, cleaner declaration of directives, a whole lot is done for you in the background, especially for pulling subsets of data.
There is no need to use angular with meteor, just use meteor. I haven't yet found a case where I needed angular with it.
The hardest concept to grasp in meteor is the publish subscribe model but once you get it, it is very powerful as you can define what data is pushed to the client with parameters. Then all you need is a template to render it.
Lookup this article for more details
https://www.discovermeteor.com/blog/understanding-meteor-publications-and-subscriptions/
EDIT: Jan 2016
Looking at benchmarks of Angular 2 in Meteor, I now can see a reason maybe to use it. That was definitely not the case with prior versions:
See the article:
http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor
Angular 1.x was way way slower than Blaze and React just 6 months ago. Angular 2 seem way better, yet I'm still not a fan of the over-complexity.
For simplicity AND speed, also look up Aurelia.io built by former Angular lead and designed to last and move with the Javascript framework itself.
Related
.factory("user", userService);
function userService($q, $http) {
function User (){
//....
}
return User;
}
or
.factory("User", ["$q", "$http", function ($q, $http) {
var User = {
//....
}
return User;
}])
I often see both depending of the situation (or rather depending of the author), but I've been wondering for quite a long time now (since I've begun learning Angular), what makes it different, and if I can use one or the other without changing anything. I usually use the first one and following the logic because I find it easier, and because I'm confused with the second one. I may have made mistakes but that's why Im asking for some help. Thanks !
The second code snippet in your question is the one that I'd recommend you to use for all your angularjs services.
Angular framework offers Dependency Injection (DI) feature out of the box that can be used when defining components such as services, directives, filters, animations or when providing run and config blocks for a module.
If you define the dependencies without using an array of string in your angular app, then you are doing it wrong. This way of registering the dependencies will work well for non minified version of the JavaScript source file.
But if you intend to minify the files for production, which everyone must, then all those (dependency) arguments will be changed to something really random which angular will not be able to map to any registered component. So ultimately, an error will be thrown by the framework.
To avoid this mistake, one can just make sure to always use an array of type string to instruct the dependencies. Read this in more detail. If you are your own then you can maybe keep this tip in mind. However, if working in a team, it is good to configure this using the options below so that everyone in the team follows this. If not, then they will encounter an error.
I'd recommend you to use strict DI mode.
How to enable strict mode?
This mode can be enabled using two options as mentioned below.
Option-1:
<div ng-app="myApp" ng-strict-di>
<!-- your app here -->
</div>
Option-2:
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
Learn why is strict DI mode good for your AngularJS app in my blog post.
The first form will not work with minification. The second form is required when minification is used. The reason for this is that the AngularJS injector uses the function parameter names to resolve the $q and $http dependencies in the first form. If the function parameter names are changed (e.g., by minification), that will fail. The second form relies on the strings "$q" and "$http", which will not be changed by minification.
This is discussed in step 7 of the AngularJS tutorial.
With the current strategy, at the root of each module I have an index.js file defining all of the Angular 1.X pieces are to be included within the application.
A very basic example is:
angular.module('app', [])
.config(require('./app.states'))
.service('appService', require('./app.service'))
.directive('appDirective', require('./app.directive'));
The team has been using directives for stuff that is simply silly. I'm sure you can relate to people stuffing controllers with too much and all the other bad examples for 'not having enough time'.
I'm wanting to start using components over directives for many instances where we're really just wanting a 'smart' template for a state yet it doesn't seem like I can refer to or register a component in the same way that I would the service/directive like in the example above.
In short, using 'appComponent' as the name of the component from within the state definition isn't something that works in the same way ::
angular.module('app', [])
.config(require('./app.states'))
.service('appService', require('./app.service'))
.component('appComponent', require('./app.component'));
What should I try next?
The answer was that in the earlier versions of Angular from 1.5 on, components gained support. As it stands, to register a component within the angular module definition, you still use the directive() and simply require the component in lieu of the directive.
angular.module('app', [])
.config(require('./app.states'))
.service('appService', require('./app.service'))
.directive('appComponent', require('./app.component'));
I am quite new to to angular and most things and concepts are completely new for me.
I am working on a page that have a URL as follows:
http://domain/araneum/page/show/1
Is there any easy way to read the '1' from URL?
What I was able to understand there are two ways:
Read it on backend and create JS variable to be used by angular (not sure if that is the best practices)
Pass the parameter as hash. in my case it is not that convenient, because this page is quite complex already and I wanted to have a separate application for it. Also, there are couple of validations that must happen on backend before page rendering.
Is there any other better approach?
Thanks,
I recommend completing the AngularJs tutorial if you haven't already done so. In particular look at https://docs.angularjs.org/tutorial/step_07
Relevant code for you
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
In this example the phoneId will be in place of 1 in your URL.
I'd like to work with both angularjs and requirejs. Before that, I worked with backbonejs and requirejs. I felt a bit more comfortable with that combination.
I also got the bower-seed from github, but it's too nested for the beginning.
Here's what I don't understand:
Require forces me to bootstrap angular myself.
Therefore I create a module named by my app.
Then I bootstrap that module to the document.
angular.module('app', []);
angular.bootstrap(document, ['app']);
That happens after the document ist ready, which is checked by this function:
angular.element(document).ready(function() { ... bootstraping ... }
So far I get it. But how and at what point do I put the ng-app into the header?
app.js has the function to put all my controllers, routers etc. into the app. By returning all modules I loaded inside the require-module. In my case I only load controllers
///app.js///
define(['angular', 'controller'], function (angular){
return angular.module('app',[
'app.controller',
'app.router'
]);
});
My controller:
define(['index', 'uirouter'], function(controllers){
controllers.controller('homeCtrl', function($scope, $routeParams){
$scope.logId = "testId";
});
});
Each controller puts it's content in a collection inside the index-module
my Index file:
///index///
define(['angular'], function(angular){
return angular.module('app.controllers',[]);
});
The Index file returs the controller-module to every controller-file requiring it. So I have all controllers in one module, by loading different controller-files
Here's my question: is this procedure correct and can I go on loading all angular-modules like this?
Im confused by working with angular-modules and require-modules ... Maybe anyone got a nice instruction in how to set up a angular-require project easily :)
Here's a link to the project:LINK ;)
Maybe anyone could help me a little bit :)
I am experimenting with this example: https://github.com/nikospara/angular-require-lazy
I also mentioned it in this SO question.
It needs work, but it is working; discussion on this topic really interests me.
A similar question was asked here but it did not help me.
I am learning angularjs and I noticed the controller is executed twice.
I have a very simple fiddle example that shows the behavior here
I built the example as I was learning about services and at first I thought it was the injecting of the services into the controller but I commented all the code related to the services and still the controller is executed twice.
My example works but I am afraid I am doing something wrong.
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
{{data1}}
</div>
</div>
var app = angular.module('MyApp', [])
app.service('Service1', function(){
return {
ajxResponse1: 'dataFromService1'
};
});
function MyCtrl($scope, Service1){
alert('Entering MyCtrl');
$scope.data1 = Service1.ajxResponse1;
alert('Exiting MyCtrl');
}
One possible source is this: if you are using Routing and specify the controller in routes - you must not specify it in template that the route uses. We had that problem when this was overlooked.
Your controller was running twice in the fiddle because angular is referenced twice (once via the Frameworks & Extensions drop down and another as an External Resource).
See this updated fiddle where I removed the External Resource and the alerts only show up once.
The code remains unchanged:
function MyCtrl($scope, Service1, Service2, Service3){
alert('Entering MyCtrl');
$scope.data1 = Service1.ajxResponse1;
$scope.data2 = Service2.ajxResponse2;
$scope.data3 = Service3.ajxResponse3;
alert('Exiting MyCtrl');
}
I had a similar problem and it was due to slashes in my routing.
I had something like /post{slug:[a-z0-9-]*/} for my route and when visiting the page at domain.com/post it would redirect to the version with a slash on the end.
Took me ages to work it out!
Edit:
Actually, just took a more detailed look at your code and noticed there is no routing in there, so this is probably not the cause in your case.
Might be useful for people like me who were looking for a different solution though.
For all the people using rails and angularjs:
The rails framework that maps URLS to views and loads them clashes with the angularjs $route even when you have a single-view application.
To prevent the double-loading of your controller:
go to application.js and remove "//= require turbolinks
You're welcome.