I'm trying to implement the angular-wizard module.
I have a angular app generated by yeoman. I used bower install angular-wizard to get the module and referenced it in my index.html right above the app.js script tag with the other modules, like angular-resource, angular-cookies etc.
The main view loads fine until I add the mgo-angular-wizard reference to the controller dependencies, when added the page loads blank with no errors in the console.
eg:
'use strict';
angular.module('merlinApp', ['mgo-angular-wizard']) // this is where everything breaks
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
My index.html has the following scripts included in this order:
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
Lodash (or Underscore) dependency ?
If still not working, try adding wizard directive in your html page.
Related
I tried to include the carousel in my angular project and added the required dependencies via npm install angular-jk-carousel --save and its gets installed in node_modules folder successfully,
Src
https://github.com/juank11memphis/angular-jk-carousel
and added jkAngularCarousel as dependency to module and included the script and css file in index and its not working,
How to use the node module dependencies to include to work properly?
myproject/
--/bower-components/
--/gulp/
--/.tmp/
--/node-modules/
---/angular-jk-carousel
--/src/
---/app
----/app.module.js
----/app.run.js
----/app.route.js
----/mydev/
-------/app.mydev.module.js
-------/app.mydev.config.js
-------/app.mydev.controller.js
-------/app.mydev.tmpl.html
---/index.html
--package.json
--bower.json
--gulpfile.js
--.bowerrc
app.module.js
(function() {
'use strict';
angular
.module('app', [
'ui.router','ngAnimate', 'ngCookies', 'ngSanitize', 'ngMessages', 'ngMaterial','googlechart', 'chart.js', 'ui.calendar', 'angularMoment', 'uiGmapgoogle-maps', 'md.data.table', 'ngFileUpload','app.mydev',
'jkAngularCarousel'
])
})();
package.json
{
"name": "ABC",
"version": "2.5.0",
"private": true,
"devDependencies": {
"angular-jk-carousel": "^0.1.6",
//other dependencies
},
"engines": {
"node": ">=0.10.0"
}
}
index.html
<!doctype html>
<html class="no-js" ng-app="app">
<head>
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body translate-cloak ng-class="bodyClasses">
<div layout="row" ui-view="main"></div>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
<script src="../node_modules/angular-jk-carousel/dist/jk-carousel.min.js"></script>
<link href="../node_modules/angular-jk-carousel/dist/jk-carousel.min.css" >
</body>
</html>
console
GET http://localhost:3001/node_modules/angular-jk-carousel/dist/jk-carousel.min.js
(index):316 GET http://localhost:3001/node_modules/angular-jk-carousel/dist/jk-carousel.min.js
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module jkAngularCarousel due to:
Error: [$injector:nomod] Module 'jkAngularCarousel' 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.
I have used grunt and following is the current structure:
<!-- build:js scripts/vendors.min.js -->
<!-- bower:js -->
<script src="../file/path.js"></script>
<script src="../file/path2.js"></script>
<script src="../file/path3.js"></script>
<script src="../file/path4.js"></script>
<script src="../file/path5.js"></script>
<script src="../file/path6.js"></script>
<script src="../file/path7.js"></script>
<script src="../file/path8.js"></script>
<!-- endbower -->
<!-- endbuild -->
As defined it gives the output file vendors.min.js, But I want to get output files as follows:
vendors1.min.js
vendors2.min.js
vendors3.min.js
Is there a way to get this done?
I'm using the following directive https://github.com/d-oliveros/ngSmoothScroll to make stuff in this project smoothly scroll to the selected element.
Here's my code:
...
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="bower_components/ngSmoothScroll/dist/angular-smooth-scroll.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/initcontroller.js"></script>
<!-- endbuild -->
<script src="scripts/libs/materialize.min.js"></script>
<script src="scripts/libs/angular-materialize.js"></script>
</body>
...
That's where the script is included (~/angular-smooth-scroll.min.js) and inside my app.js file I have:
angular
.module('sccateringApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.materialize',
'smoothScroll'
])
'smoothScroll' being the actual dependency inclusion to the project. Following the instructions inside the link given at the beginning of this post this is what I do inside my view:
<li>Contáctame</li>
...
<section class="service-info" id="service-info">
<h1 class="sofia-font">Detalles de Servicio</h1>
...
However, there is no smooth scroll happening and also, there are no warnings/errors given by either the console or jslint on my grunt serve task.
Any idea what I might be doing wrong? I'm VERY new to angular and I'm still trying to find my way through it.
I'm not sure but it may be because you are using the container-id on a link and not a non-anchor tag. I'm using this to scroll to an element in my footer. My code is:
//the anchor link in my nav
Click Me
...
//the element I want to scroll to
<div id="footer"></div>
...
The minified version wasn't working for me so my scripts go as follows:
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-aria/angular-aria.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-material/angular-material.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/ngSmoothScroll/lib/angular-smooth-scroll.js"></script>
<script src="/js/app.module.js"></script>
<script src="/js/app.controller.js"></script>
<script src="/js/app.service.js"></script>
And for the module:
angular
.module('glasser', [
'ngMaterial',
'ngSanitize',
'smoothScroll'
])
It didn't work for me either, try Angular-Scroll instead. It has a live demo to test in your browser first.
It also has a 'spy' directive so you can add classes to elements that are in view.
The full error
Error: [$injector:unpr] Unknown provider: FIREBASE_URLProvider <- FIREBASE_URL <- Post
The local server spun up a working app just a couple of days ago. Now when I start it, app is blank and throws up this error. Anyone knows the issue?
Im following a online lesson and perhaps the versions are outdated?
The error link leads to this page. ERROR LINK PAGE IN ANGULARJS but my definitions are ok since they were working previously?
Attached is my index.html scripts.
<!-- build:js scripts/vendor.js -->
<!-- <script src="vendor/someContribJs.js"></script> -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!--all the scripts for the app -->
<!-- endbuild -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
This is just a wild guess, but try placing the angularfire.js script before the firebase-simple-login.js
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
Another guess would be to check if there is a missing configuration concerning the firebase url.
I solved it.
I had another Var X = angular.module(myapp, []) line hidden somewhere in the app.js codes.
Not sure how it got there but removing that did the trick. So the error message was correct.
I am new to AngularJS. I am currently facing problem in writing pretty urls for my views.I have set $locationProvider.html5Mode(true); to remove # from the urls displayed in the address bar. However,upon doing so I am unable to reroute to desired views.
I keep getting the error Cannot GET /login
I get the home page /login when the app is launched first time , but when I refresh the page I get the same error.
Here the main page of application (index.html)
<!doctype html>
<head>
<meta charset="utf-8">
<title>F-1 Feeder</title>
<meta name="viewport" content="width=device-width">
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<base href="/login"/>
<!-- endbuild -->
</head>
<body ng-app="F1FeederApp" class="col-md-8">
<ng-view></ng-view>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/loginHttpBackend.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/driver.js"></script>
<script src="scripts/controllers/drivers.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->
My app.js file(where rerouting takes place) looks like this
angular.module('F1FeederApp.controllers', []);
angular.module('F1FeederApp',
[ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ])
.config([ '$routeProvider','$locationProvider', function($routeProvider,$locationProvider,$location) {
console.log('---------------inside config----------------');
console.log($routeProvider);
$routeProvider.when("/login", {
templateUrl : "views/login.html",
controller : "loginController"
}).when("/drivers", {
templateUrl : "views/drivers.html",
controller : "driversController"
}).when("/drivers/:id", {
templateUrl : "views/driver.html",
controller : "driverController"
}).otherwise({
redirectTo : "/login"
});
$locationProvider.html5Mode(true);
} ]);
I also made following important observation
If I set the base href on index.html to point to the root as <base href='/'>
and perform rerouting as
$routeProvider.when("/", {
templateUrl : "views/login.html",
controller : "loginController"
}).when("/drivers", {
templateUrl : "views/drivers.html",
controller : "driversController"
}).when("/drivers/:id", {
templateUrl : "views/driver.html",
controller : "driverController"
}).otherwise({
redirectTo : "/"
});
my app works fine here.But I want '/login' to be my default page. Kindly guide me on where I am going wrong or is it an issue with AngularJS itself.
Other than enabling html5Mode on, you also need to update your server-side to redirect all the request like /login or /home etc to a single entry-point, like an index.html.
Server side
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)
Search for "Server side" on this documentation page:
angular $location docs