Ref: https://github.com/jvandemo/angular-growl-notifications
What will be the app.js file for Growl notifications ? I just need a simple notification as shown in the " Basic Example in the link below.
http://jvandemo.github.io/angular-growl-notifications/examples/index
Yes, we need one. Here is the Plunker.
http://plnkr.co/edit/ZZHW0JKumXfdFgjTjVJz?p=preview
var app = angular.module('plunker', ['growlNotifications']);
app.controller('MainCtrl', function($scope, $timeout) {
});
Related
I am making an app using angular and firebase. I want to implement angular-trix editor so that users can post their own articles. But I don't know how to integrate angular-trix. I have included the js files and in app.js I have injected the 'angularTrix'.
var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate', 'firebase', 'ngSanitize','angularTrix']);
This is my html page.
<div>
<trix-editor ng-model="trix" angular-trix></trix-editor>
<button ng-click="save()">Save!</button></div>
and this is controller
app.controller('profileCtrl', ['$scope', "$routeParams", "$firebaseObject", "$sce", "Auth", function($scope, $firebaseObject, $routeParams, $rootScope, Auth, $sce) {
// Demo controller
console.log('In ctrl');
$scope.trix = '<p>Hello</p>';
$scope.save = function() {
alert($scope.trix);
};}]);
I don't know what I have to include in a controller. I want that when a user will press submit button, it should extract the HTML and save it to the firebase.
I know how to save data in firebase but not how to extract the HTML from AngularTrix.
A snippet of code of controller would be of much help.
The inner html is stored in the model which you pass to the editor through ng-model attribute like this:
<trix-editor angular-trix ng-model="foo"></trix-editor>
Here, foo would have your markup:
angular.module('trixDemo', ['angularTrix']).controller('trixDemoCtrl', function($scope) {
$scope.foo = '<div>Hello world!</div>';
});
Small Demo
I am trying to create a login page and I have the html looking how I want it so now I am trying to create a controller but for some reason the js controller isnt working with the html. here is the plunker. The {{name}} data bind should display world but it isnt. Here is the controller:
(function() {
"use strict";
var app = angular.module('plunker', []);
app.controller('LoginController', function($scope) {
$scope.name = 'World';
});
})();
http://plnkr.co/edit/mqc6ksw1xo7NMhj74Noa?p=preview
The issue is your angularjs link is not working , just replace with this,
<script data-require="angular.js#*" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
Working code
You have the wrong link so it can't load angular, change
https://code.angularjs.org/2.0.0-alpha.31/angular.js
to
https://code.angularjs.org/2.0.0-alpha.31/angular2.js
note the extra '2' at the end
I am using for my Slide up/down effect this genius written .js modul.
https://github.com/EricWVGG/AngularSlideables
http://jsfiddle.net/3sVz8/19/
I could include it to my project and it is working the way I want.
But now I want to trigger this inside my controller, how do I do this?
html
Open smoothly
<div id="derp" class="slideable">
open/hidden content
</div>
.js
var myApp = angular.module('myApp', ['ngAnimate', 'angularSlideables']);
angular.module('angularSlideables', [])
.directive('slideable', function () {
return {
all the code from the github
})
myApp.controller("ContactControllerHeading", function ($scope, $http) {
$scope.Triggerhere= function() {
/* trigger here this slide-toggle="#derp" */
}
});
Thank you a lot
I gave up solving it with this. I used jquery slide up and down function which seems to be a adequate solution
http://www.w3schools.com/jquery/eff_slidetoggle.asp
I'm working on a mobile app using OnsenUI for the UI, running within the Monaca / Cordova framework, using Firebase as a BaaS through the angularfire module.
I've setup the module without Firebase as follows:
var myAppController = angular.module('myApp', ['onsen.directives']);
myAppController.controller('EventListCtrl', ['$scope', function($scope) {
However, as soon as I add Firebase as a module, the app stops working.
var myAppController = angular.module('myApp', ['onsen.directives', 'firebase']);
myAppController.controller('EventListCtrl', ['$scope', '$firebase', function($scope, $firebase) {
Can you please tell me what I'm doing wrong?
Thanks
According to this link, how about trying it this way:
var myAppController = angular.module('myApp', ['onsen.directives', 'firebase']);
myAppController.controller('EventListCtrl', function($scope, $firebase) {
Thought I should answer this myself to help anyone else facing the same situation.
My issue was that the firebase js script reference was wrong., ie. I was careless.
Regards
I'm having trouble managing my app. I would like to separate my controllers on several files. I read Brian's Ford blog ( http://briantford.com/blog/huuuuuge-angular-apps.html ) but I cannot quite understand how should I do it.
On my controller.js file I had something like this :
function loginCtrl($scope){
....
}
function landingCtrl($scope){
...
}
And the only way I found to separate controller per file is to do this:
app.js:
var musicApp = angular.module('musicApp', []);
controller1.js:
musicApp.controller('loginController', ['$scope', loginCtrl],function loginCtrl($scope){
....
});
controller2.js:
musicApp.controller('landingCtrl', ['$scope', landingCtrl],function landingCtrl($scope){
....
});
Is there a better way to do this?
I'm using a similar way as below:
Main.js
angular.module('app', []);
FooCtrl.js
angular.module("app").controller("FooCtrl", [
"$scope", function($scope) {
}
]);
Another way adopted by google is:
# init empty Object
var docsApp = {
controller: {},
directive: {},
serviceFactory: {}
};
# FooCtrl.js
docsApp.controller.FooCtrl = ['$scope', function($scope){}]
# BarCtrl.js
docsApp.controller.BarCtrl = ['$scope', function($scope){}]
... add services
... directives
# bootstrap angular
angular.module('docsApp', ['...']).
config(...).
factory(docsApp.serviceFactory).
directive(docsApp.directive).
controller(docsApp.controller);
Take a look at this js from google angularjs tutorial: http://docs.angularjs.org/js/docs.js
You can achieve this in multiple ways.
one file for all your controllers using "."
musicApp.controller('loginController', ['$scope', loginCtrl,function loginCtrl($scope){
....
}]).controller('landingCtrl', ['$scope', landingCtrl,function landingCtrl($scope){
....
}]);
just remember to include the function inside the injected paramenters array.
or one controller for each file.
just need to include every js file with whatever method you are using (script tag, requirejs, etc.)
I have something similar:
main_router.js:
var myApp = angular.module('theApp', ['controllers'])...
var controllers = angular.module('controllers', []);
some_controller.js:
controllers.controller('SomeCtrl', ['$scope',
function ($scope) { ... }
]);