Hi I have problem with install this package :
https://github.com/marceljuenemann/angular-drag-and-drop-lists
in index.ejs I include
<script src="/javascripts/angular-drag-and-drop-lists.js"></script>
He said
Add the dndLists module as a dependency to your angular app. Then I add:
var App = angular.module('TodoListApp', [ dndLists ]);
App.controller('TodoListCtrl', function ($scope, $http, ApiService) {
And result is
https://imgur.com/a/be4a4
What I did wrong?
Related
I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?
I am using mean.js boilerplate. I would like to include angular-stripe in my client side. For that I have installed angular-stripe and it is available under node_modules.
Now I would like to add it in my code as follows
(function () {
'use strict';
angular
.module('myApp', [
'angular-stripe'
])
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('my_key')
})
PaymentController.$inject = ['$scope', '$state', 'Authentication', 'Socket', 'stripe'];
function PaymentController($scope, $state, Authentication, Socket, stripe) {
var vm = this;
}
());
It throws the folowing error
Module 'angular-stripe' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
If you're using MeanJs boilerplate, you have to add your dependencies at config/assets/default.js in client - lib and client-css if the dependecy has a .css file.
module.exports = {
client: {
lib: {
css: [
// bower:css
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
'public/lib/angular-ui-notification/dist/angular-ui-notification.css'
// endbower
],
js: [
// bower:js
'node_modules/angular-stripe/src/index.js',
'public/lib/angular/angular.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/ng-file-upload/ng-file-upload.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-mocks/angular-mocks.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-ui-notification/dist/angular-ui-notification.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/owasp-password-strength-test/owasp-password-strength-test.js',
// endbower
], // rest of the code..
MeanJs highly recommend to use bower for your frontend dependencies.
For more info: MeanJS docs
The problem is that the angular-stripe plugin is not included when the angular module is declared.
When using js modules from node_modules, use the global require() method in your module declaration instead
angular.module('myApp', [
require('angular-stripe')
]);
The other solution is to include the files the "standard" way <script src="....
Good blog post about the require method here
I am trying to setup a Laravel and Angular application. I wanted to place my work files under resources/assets/js and then use webpack and elixir to compile those code and create a single app.js file in my public directory. But I am not sure how to do that? Can anyone guide me with a step based approach for it?
Here is a gulp only process
No webpack used. Please anyone can rewrite this with Laravel Mix I would really appreciate.
1- Install npm modules
`npm i --S bower gulp gulp-concat gulp-uglify`
2- Install Angular with bower
bower install --save angular angular-sanitize angular-ui-router
3- Now that you have your angular assets in bower_components, create a file at the root of your project to load all vendors. Let's create /vendor.json
[
"bower_components/angular/angular.min.js",
"bower_components/angular-sanitize/angular-sanitize.min.js",
"bower_components/angular-route/angular-route.min.js"
]
Add all your vendors to that file. Bower or Npm vendors. Anything you download that is not part of your code.
4- Go to /gulpfile.js and add a task
var gulp = require('gulp),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
gulp.task('vendorjs', function() {
var source = require('./vendorjs.json');
return gulp.src(source)
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/assets/js'))
});
That task will compile all vendors assets to /public/assets/js/vendors.min.js
5- In resources/assets/js, create following directories controllers, modules and the file app.js. Inside of app.js do
// 'resources/assets/js/app.js'
(function(){
angular
.module('myApp', ['app.core', 'app.controllers']);
})();
6- In the modules directory create core/module.js. This is the core module where you load all external modules loaded via bower or npm.
// 'resources/assets/js/modules/core/module.js'
(function(){
angular
.module('app.core', ['ngRoute', 'ngSanitize']);
})();
7- Still in the modules directory create controllers/module.js. All your controllers will be bound to this module.
// 'resources/assets/js/modules/controllers/module.js'
(function(){
angular
.module('app.controllers', []);
})();
8- Now you can write your controllers like this
// 'resources/assets/js/controllers/home.js'
(function(){
angular
.module('app.controllers')
.controller('HomeController', Controller);
//Use injection for assets minification
HomeController.$inject = ['$scope', '$http'];
function HomeController($scope, $http)
{
var vm = this;
activate();
function activate()
{
vm.sayHi = function() {
console.log('Hi');
}
}
}
})();
9- If you want to define routes
// 'resources/assets/js/modules/routes/routes.js'
(function(){
angular
.module('app.routes', [])
.config(routesConfig);
//Use injection for assets minification
routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider'];
function routesConfig($stateProvider, $locationProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/templates/home.html',
controller: 'HomeController'
})
...
}
})();
10 - Create angular task in gulpfile
gulp.task('angular', function() {
var root = 'resources/assets/js';
var source = [
root + '/app.js',
root + '/modules/**/*module.js',
root + '/controllers/**/*js'
];
return gulp.src(source)
.pipe(concat('app.min.js'))
.pipe(uglify()) //comment this line when in development
.pipe(gulp.dest('public/assets/js'))
});
I think that's it. I may have made one or 2 typos, but angular that's the gist of it. How I use gulp with laravel for angular
I couldn't do this from scratch but there is a package that uses lumen, angular2. Providing a link for the same so anyone with the same problem can be benefited. Link: anvel.io
AngularJS v1.6.0.
How to understand what module fails to load? Why and how to fix it?
I get the following error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.0/$injector/modulerr?p0=fooApp&p1=Error%…c%20(http%3A%2F%2Fviic.com%2Flibs%2Fangular%2Fangular.min.js%3A21%3A332)(…)(anonymous function) # angular.js:38(anonymous function) # angular.js:4756q # angular.js:357g # angular.js:4717eb # angular.js:4639c # angular.js:1838Lc # angular.js:1859oe # angular.js:1744(anonymous function) # angular.js:32890b # angular.js:3314
www-embed-player.js:218 GET https://googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENTRd # www-embed-player.js:218Vd # www-embed-player.js:222(anonymous function) # www-embed-player.js:249L # www-embed-player.js:173re # www-embed-player.js:246xk # www-embed-player.js:654(anonymous function) # www-embed-player.js:705(anonymous function) # S0Q4gqBUs7c?controls=0&showinfo=0&enablejsapi=1&showsearch=0&rel=0:10
My app frontend structure:
- public
- js/controllers/VideoChannelCtrl.js
- js/services/CoubService.js
- js/app.js
- js/appRoutes.js
- index.html
- views/player.html
- libs/angular/angular.min.js
- libs/angular-route/angular-route.min.js
...
index.html
...
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/VideoChannelCtrl.js"></script>
<script src="js/services/CoubService.js"></script>
<script src="js/appRoutes.js"></script>
...
js/app.js
var fooApp = angular.module('fooApp', ['ngRoute', 'appRoutes', 'VideoChannelCtrl', 'CoubService']);
js/appRoutes.js
angular.module('appRoutes', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/player.html',
controller: 'VideoChannelController'
});
$locationProvider.html5Mode(true);
}]);
js/controllers/VideoChannelCtrl.js
fooApp.controller('VideoChannelController', ['$scope', 'Coub', function($scope, Coub) {
$scope.tagline = 'To the moon and back!';
Coub.get().success(function(data) {
$scope.videolink = data[0].url;
});
}]);
js/services/CoubService.js
angular.module('CoubService', []).factory('Coub', ['$http', function($http) {
return {
get : function() {
return $http.get('/api/videolinks');
},
delete : function(id) {
return $http.delete('/api/videolinks/' + id);
};
}]);
You didn't inject the VideoChannelController controller correctly.
I suggest you to declare your controller like this :
js/controllers/VideoChannelCtrl.js
angular.module('fooApp')
.controller('VideoChannelController', VideoChannelController);
VideoChannelController.$inject = ['$scope', 'Coub'];
function VideoChannelController($scope, Coub) {
$scope.tagline = 'To the moon and back!';
Coub.get().success(function(data) {
$scope.videolink = data[0].url;
});
}
As VideoChannelController controller is declared as controller of fooApp module application, you don't need injection like :
var fooApp = angular.module('fooApp', ['ngRoute', 'appRoutes', 'VideoChannelCtrl', 'CoubService']);
You can remove VideoChannelController from this declaration.
Also, you should refer to the following AngularJS development guideline :
Angular Style Guide
Is VideoChannelCtrl a controller or a module? If it's a controller, then you can't inject it as a module dependency. Remove it from module dependencies - angular.module('fooApp', ['ngRoute', 'appRoutes', 'CoubService']);
Or create separate module and have this controller inside that module and inject the newly created module. Check whether it is really required to have multiple modules in your app. From what I assume from the given code, you don't need multiple modules.
For eg, you can have the service in the same fooApp like this:
angular.module('fooApp').factory('Coub', ....);
angular.module('fooApp') -> gets the already registered module named fooApp and you can add controllers/services/directives etc to the same module.
So, if you add your given controller, service and config to the fooApp module, then you can define the module as
angular.module('fooApp', ['ngRoute']);
i am using ngRoute module but its showing me error so is there extra file need to add for using this module i search but i did'nt found like other modules resourse,cookies we need seperate files for is it for ngroute also if yes so where can i found this
Error:-
Uncaught Error: No module: ngRoute
var app = angular.module('inventoryApp', ['ngCookies','ngResource', 'ngRoute']);
controller.js
app.controller('storesController', function ($rootScope, $scope, $location, $cookies, $routeParams) {
});
You do need a separate file. Please see:
http://docs.angularjs.org/api/ngRoute
First include angular-route.js in your HTML:
<script src='angular.js'>
<script src='angular-route.js'>
As of AngularJS 1.2.0, ngRoute is separated in its own module.
Download: http://code.angularjs.org/1.2.1/
Changelog: https://github.com/angular/angular.js/blob/master/CHANGELOG.md