Im using appgyver and are not able to load new module. I get this error message: Failed to instantiate module legeApp due to:\n[$injector:nomod] Module 'legeApp' 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
Here is my code, please help!
Js file
angular
.module('legeApp', ['angular-carousel'])
.controller('IndexControllerOrer', function($scope, supersonic, $filter) {
});
My Layout.html
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title><%= yield.viewName %></title>
<link rel="stylesheet" href="/components/supersonic/css/supersonic.css" />
<link rel="stylesheet" href="/app/common/stylesheets/application.css" />
<link rel="import" href="/components/supersonic/components/import.html">
<link href="/components/angular-carousel/angular-carousel.css" rel="stylesheet" type="text/css" />
<script src="/components/angular-carousel/angular-carousel.js"></script>
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/components/angular/angular.js"></script>
<script src="/components/supersonic/supersonic.js"></script>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<% _.each(yield.modules, function(module) { %>
<script src="/app/<%= module %>.js"></script>
<% }); %>
</head>
<body ng-app="<%= yield.moduleName %>">
<%= yield.view %>
</body>
</html>
My view
<div ng-controller="IndexControllerOrer">
<super-navbar>
<super-navbar-title>
Helseplager
</super-navbar-title>
</super-navbar>
<ul class="list" rn-carousel>
<li ng-repeat="plagerOret in plagerOret" class="item item-checkbox checkbox-assertive" >
<label class="checkbox">
<input type="checkbox" ng-model="plagerOret.checked">
</label >
{{plagerOret.value}}
</li>
</ul>
<button class="button button-block button-assertive" ng-click="checkValues()" value="checkitems" >
Diagonoser
</button>
</div>
The angular-carousel files is under the components/angular-carousel/angular-carousel.css and components/angular-carousel/angular-carousel.js
There is a syntax error in your javascript. It should be:
angular
.module('legeApp', ['angular-carousel'])
.controller('IndexControllerOrer', function($scope, supersonic, $filter) {
});
Related
I tried a template where I put the layout in a folder (/views/layout) and named it mainlayout.blade.php.
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="description" content="Ogani Template">
<meta name="keywords" content="Ogani, unica, creative, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Web | {{ $title }}</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#200;300;400;600;900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="css/nice-select.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Then, I create the first page to simulate on how the pages interact. Let's call it PAGE 1 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Listing -->
#foreach ($blog as $post)
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="blog__item">
<div class="blog__item__pic">
<img src="img/blog/blog-2.jpg" alt="">
</div>
<div class="blog__item__text">
<ul>
<li><i class="fa fa-calendar-o"></i> May 4,2019</li>
<li><i class="fa fa-comment-o"></i> 5</li>
</ul>
<h5>{{ $post["title"] }}</h5>
<p>{{ $post["writings"] }} </p>
Selengkapnya <span class="arrow_right"></span>
</div>
</div>
</div>
#endforeach
As you can see, I tried to simulate where I picked data from a 'database', called the 'slugs' and 'writings' variable. To demonstrate this, I build PAGE 1 ROUTE
Route::get('/blog', function () {
$blog_posts = [
[
"title" => "Judul Post 1",
"slug" => "judul-post-1",
"author" => "Author 1",
"images" => "Gambar 1",
"writings" => "Tulisan 1",
],
];
return view('FrontEnd.blog', [
"title" => "Blog",
"blog" => $blog_posts
]);
});
From that one, I tried to redirect it to another page, let's call it PAGE 2 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Content -->
<!-- Content End -->
</body>
To connect those pages, I create PAGE 2 ROUTE, where I use the slugs to name the web page
Route::get('/blog/{slug}', function ($slug) {
return view('FrontEnd.blogdetails', [
"title" => "Blog Details"
]);
});
==================================================================================
My question is, Why is the layout is not applied on PAGE 2? When I tried to access the PAGE 2 independently (basically changes it as the 'home' page), the layout applies/work. Where did I go wrong?
Thanks in advance!
I don't get it, why you are using <!DOCTYPE html> on every inner page. Let me explain how its done correctly.
You need to define a layout under views/layouts let's call it.
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name</title>
</head>
<body>
<div class="container">
<!-- this is where content will be shown -->
#yield('content')
</div>
</body>
</html>
Now, on the controller we are returning the view.
return view ('frontend.blog.index',compact('data'));
Nex, on this blade file we need to extend the layout.
<!-- resources/views/frontend/blog/index.blade.php -->
#extends('layouts.app')
#section('content')
<p>This is my body content.</p>
#endsection
In this way, you could solve the layout mystery.
For detail, visit https://laravel.com/docs/9.x/blade#defining-a-layout.
Some of the issues I notice on your code:
you are missing the yield field example #yield('content')
next on your view file you need to call #section('content') ... #endsection
#PS:(you can replace content text with body or anything you like.)
I'm trying to add a default 404 error page to my Spring app, and I thought it would be nice to add an animate template like that: https://codepen.io/wikyware-net/pen/xywexE
The whole idea is a validation of form and redirection to the error page, if it fails.
Basically, redirection works fine, but the problem I have is I can not make the JS part running (the tost doesn't pop up :-/)...
Here's how my error page looks like:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
<script type="text/javascript" th:src="#{/static/js/error.js}"></script>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img"
src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
</div>
</body>
Both CSS and JS code I use, is included in the template I attached at the very beginning.
Here's also the snapshot of the project's resources structure:
What am I doing wrong here?
What are best practices in importing such a HTML template into a Spring Boot/Thymeleaf project?
Thank you in advance for your help.
Kind regards,
Matthew
EDIT:
So I changed my html page to that form:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</div>
</body>
Plus, I also updated my build.gradle file:
buildscript {
ext {
springBootVersion = '2.0.5.RELEASE'
}
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
plugins {
id 'war'
}
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'
group = 'pl.mpas'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
targetCompatibility = 1.8
repositories {
mavenLocal()
mavenCentral()
}
dependencies {
compile('org.springframework.boot:spring-boot-starter-data-jpa')
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
compile('org.springframework.boot:spring-boot-starter-web')
compile group: 'org.springframework.boot', name: 'spring-boot-starter-validation', version: '2.3.7.RELEASE'
compile group: 'org.webjars', name: 'bootstrap', version: '3.3.6'
compile group: 'org.webjars', name: 'bootstrap-datepicker', version: '1.0.1'
compile group: 'org.webjars.bower', name: 'jquery', version: '3.5.1'
runtime('org.springframework.boot:spring-boot-devtools')
runtime('com.h2database:h2')
runtime('mysql:mysql-connector-java')
testCompile('org.springframework.boot:spring-boot-starter-test')
compile('org.apache.struts:struts2-core:2.3.16.1')
providedCompile('javax.servlet.jsp:jsp-api:2.1')
providedCompile('javax.servlet:javax.servlet-api:3.1.0')
}
Thanks to that, I no longer see any errors in the browser's console.
However... JS still doesn't work as expected. :-/
Your files structure looks good. you have added your js file in error page by
<script type="text/javascript" th:src="#{/static/js/error.js}"></script>
but I don't thing you need to mention static in your source URL for JS, Change it to
<script type="text/javascript" th:src="#{/js/error.js}"></script>
also please add the below dependencies in your pom.xml for jQuery and Bootstrap
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.6</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.0.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.9.1</version>
</dependency>
change your error.html file as shown below
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img" src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
</body>
</html>
now it will work fine. Let me know if any doubt.
Refer:https://www.springboottutorial.com/spring-boot-with-jquery-and-bootstrap-web-jars
A couple of notes:
Change your JavaScript reference for your error.js script to this:
<script type="text/javascript" th:src="#{/js/error.js}"></script>
There is no need to include the /static portion of the URL.
Also, have you included jQuery in the page? For example:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
You will see an error in the browser's console if jQuery is not available.
Try to change your JavaScript reference in your HTML page:
<link rel="stylesheet" href="../static/css/error.js" type="text/javascript" th:href="#{/error.js}">
All right guys, I finally made it running. In my case the problem was a lack of jQuery's script tag in html's head section. I used Google's CDN hosting:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
So the final, working version of my page looks as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Ooops... Something went wrong!</title>
<meta name="description" content="Создание адаптивного сайта"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="#{/css/error.css}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="ag-page-404">
<div class="ag-toaster-wrap">
<div class="ag-toaster">
<div class="ag-toaster_back"></div>
<div class="ag-toaster_front">
<div class="js-toaster_lever ag-toaster_lever"></div>
</div>
<div class="ag-toaster_toast-handler">
<div class="ag-toaster_shadow"></div>
<div class="js-toaster_toast ag-toaster_toast js-ag-hide"></div>
</div>
</div>
<canvas id="canvas-404" class="ag-canvas-404"></canvas>
<img class="ag-canvas-404_img"
src="https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/404-error-smoke-from-toaster/images/smoke.png">
</div>
</div>
<div>
<a th:href="#{/home}" target="_blank" class="btn-primary">Go back</a>
</div>
<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/error.js}"></script>
</div>
</body>
Thanks again for your help! Cheers!
i need to keep my controller page in separate folder.But it is showing me the below error.
Error: [ng:areq] http://errors.angularjs.org/1.4.6/ng/areq?p0=homecontroller&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
I am explaining my code below.
app.js:
var GoFastoApp=angular.module('GofastoHome',['ngRoute']);
GoFastoApp.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/home.html',
controller : 'homecontroller'
})
.when('/deptinfo',{
templateUrl : 'view/info.html',
controller : 'infocontroller'
})
.when('/TimeTable',{
templateUrl : 'view/time.html',
controller : 'timecontroller'
})
.when('/course',{
templateUrl : 'view/course.html',
controller : 'coursecontroller'
})
.when('/subject',{
templateUrl : 'view/subject.html',
controller : 'subjectcontroller'
})
.when('/hod',{
templateUrl : 'view/hod.html',
controller : 'hodcontroller'
})
.when('/faculty',{
templateUrl : 'view/faculty.html',
controller : 'facultycontroller'
})
})
In the above code i have declared different controller for different template.All the partial template will add into below index page.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/app.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top:50px">
<div class="container" style="width:1270px;">
<div class="navbar-header navbar-brand">
Computer Science & Engineering
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Dept. info</li>
<li>Time Table</li>
<li class="dropdown">
Edit <span class="caret"></span>
<ul class="dropdown-menu">
<li>Course</li>
<li>Subject</li>
<li>HOD</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Faculty</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--main_heading_div-->
<!--middle_content_details_data-->
<div class="row" style="padding-top:90px;" ng-view>
</div>
<!--end_middle_content_details_data-->
</div>
<!-- /.page-content -->
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<!--<script src="controller/HomeController.js" type="text/javascript"></script>-->
</body>
</html>
Here i need suppose for home.html partial template i will create new homecontroller file in separate folder and include this file in master page.Here i created one file(i.e-HomeController.js) which is given below.
HomeController.js:
var homeapp=angular.module('GofastoHome',[]);
homeapp.controller('homecontroller',function($scope){
})
When i include this file i did not get any partial template and when i removed this file link from master page(i.e-index.html) the above error is coming.Please help me to resolve this issue. I am using angular.js version 1.4.6.
To get a reference to an existing module you must not declare a dependency list!
Remove the brackets and it should work.
var homeapp=angular.module('GofastoHome');
Always include Angular Plugin file first, then include application app.js, configuration files if any and at the end include all angular modules dependencies created like services, directives, factories and at last controllers.
app.js
// Angular Module initialization
var goFastoApp=angular.module('GofastoHome',['ngRoute']);
// Config Block
GoFastoApp.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/home.html',
controller : 'homecontroller'
})
});
home.controller.js
// Consider this code you have added in separate file for controller
goFastoApp.controller('homecontroller',function($scope){
$scope.username = "Satya";
})
index.html
<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Page Content -->
<!-- Plugin Files -->
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<!-- End Plugin Files -->
<!-- JS Files -->
<script src="controller/app.js" type="text/javascript"></script>
<script src="controller/HomeController.js" type="text/javascript"></script>
<!-- End JS Files -->
</body>
</html>
I'm testing AngularJS and when I try to visualize this example the browser's console shows me something like this:
Error: Argument 'mainController as mainCtrl' is not a function, got undefined
at Error (native)
at bb
I only have two files in my project
index.html
<!doctype html>
<html ng-app="my-app">
<head>
<title>Angular controllers</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- AngularJS and JQuery include. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form name="particleForm" ng-controller="mainController as mainCtrl" ng-submit="mainCtrl.addData()">
{{ mainCtrl.data.email }}
<div class="form-group">
<label for="text" class="col-sm-2 col-sm-offset-2">E-mail</label>
</div>
<div class="col-sm-10">
<input type="text" name="text" class="form-control" ng-model="mainCtrl.data.email" placeholder="Enter e-mail..."></input>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
(function (){
var app = angular.module('my-app', []);
var list = [];
app.controller ('mainController', function (){
this.data = {};
this.addData = function (){
list.push (this.data);
list.data = {};
};
});
})();
I only want to show everything I put on that input field.
The FooController as FooCtrl syntax is only available starting with AngularJS 1.1.5 (see this). You're using 1.0.8.
I am pretty new to this whole angularjs thing and am having some trouble solving an issue. So we have a single page app that loads each page in an ng-view i have a directive that actually loads the date picker code into the view. When the page first loads it is fine but if I click to another page and then click back to the "add" page it gives me an error that says "Error: $(...).datepicker is not a function". I'm not sure if it's a jquery issue or what.
Here is my code:
index.html (towards the middle of the page is the ng-view where the views get loaded)
<!DOCTYPE html>
<html>
<head>
<title>Rx Pricing Maintenance</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<!-- <link rel="stylesheet" href="./resources/bootstrap-datepicker/css/datepicker.standalone.css"> -->
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap.css">
<link rel="stylesheet" href="resources/css/main.css">
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap-dialog.css">
<link rel="stylesheet" href="resources/DataTables-1.10.5-dist/css/jquery.dataTables.css">
<!-- External Sources -->
<script src="resources/jquery-2.1.3-dist/jquery-2.1.3.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="./resources/angular-1.3.15/angular.js"></script>
<script src="./resources/angular-1.3.15/angular-route.js"></script>
<script src="./resources/angular-1.3.15/angular-resource.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap-dialog.js"></script>
<script src="resources/DataTables-1.10.5-dist/js/jquery.dataTables.js"></script>
<script src="resources/angular-datatables-dist/angular-datatables.js"></script>
<script src="resources/angular-datatables-dist/vendor/datatables-columnfilter/js/dataTables.columnFilter.js"></script>
<script src="resources/angular-datatables-dist/columnfilter/angular-datatables.columnfilter.js"></script>
<script src="resources/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Internal Sources -->
<script src="resources/js/serviceCaller.js"></script>
<script src="./resources/js/controllers.js"></script>
<script src="./resources/js/application.js"></script>
<script src="resources/alasql/alasql.min.js"></script>
<script src="resources/alasql/xlsx.core.min.js"></script>
<script src="resources/alasql/alasql.js"></script>
</head>
<body ng-app="pricingApp" style="padding-top: 50px;">
<div class="container-fluid">
<nav><nav>
<div ng-view></div>
<footer>
<div class="footer-container">
</div>
</footer>
<!-- end footer -->
</div>
</body>
</html>
application.js
'use strict';
/* App Module */
var pricingApp = angular.module('pricingApp', [
'ngRoute',
'pricingControllers'
]);
pricingApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl : 'views/home.html'
}).when('/home', {
templateUrl : 'views/home.html'
}).when('/add', {
templateUrl : 'views/add.html',
controller : 'SchedulesController'
}).when('/help', {
templateUrl : 'views/help.html',
controller : 'VersionController'
});
$locationProvider.html5Mode(false).hashPrefix('!');
} ]);
pricingApp.directive('myDatePicker',function(){
return {
restrict: 'E',
templateUrl: 'views/dates.html',
controller: function($scope){
$(document).ready(function() {
$('#startDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
$('#endDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
});
}
}
});
add.html
<div class="main-container shadow-effect insert-tab">
<h2>Insert a New Pricing Schedule</h2>
<div>
<form class="form-inline" name="pricingInsertForm"
ng-submit="submitData()" role="form" novalidate >
<my-date-picker></my-date-picker>
</form>
</div>
I have left a lot of the filler code out but this is basically how it works. So When I load the application from localhost on the add view it works fine. But when I click off the add view to the home view or something like that and go back to the add view I get the error.
I want to know what is causing the datepicker not a function error and what I can do to fix it. Thanks in advance!