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>
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 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!
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) {
});
i am using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)
I'm new to Angular.js and i can't figure out why my partial templates are not bound to the ng-view div.The ng-view is just not there when i try to inspect it with firebug. Here is my code :
html header and body:
<html lang="en" ng-app="BPMNApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- External Libraries -->
<script src="js/external/jquery-1.10.2.min.js"></script>
<script src="js/external/modernizr-2.6.2.min.js"></script>
<script src="js/external/angular.js"></script>
<script src="js/external/angular-resource.js"></script>
<script src="js/external/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<!-- General Navigation Bar -->
<nav>Simple Bootstrap nav
</nav>
<div><h1>View Should be right under here</h1></div>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
App :
'use strict';
/* App Module */
var BPMNApp = angular.module('BPMNApp', [
'ngRoute',
'BPMNControllers',
'BPMNServices'
]);
BPMNApp.config(['$routeProvider','$resourceProvider','$locationProvider',
function($routeProvider,$resourceProvider,$locationProvider) {
$routeProvider.
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
}).
when('/process-definitions', {
templateUrl: 'partials/process-definitions.html',
controller: 'ProcessDefinitonCtrl'
}).
when('/process-definitions/:definitionId', {
templateUrl: 'partials/definition-detail.html',
controller: 'DefinitionDetailCtrl'
}).
otherwise({
redirectTo: '/landing'
});
//$locationProvider.html5Mode(true);
}]);
Controllers :
var BPMNControllers = angular.module('BPMNControllers', []);
BPMNControllers.controller('LandingCtrl',['$scope',
function($scope){
$scope.welcome = 'BPMN - Rest Interface';
}])
BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope', 'ProcessDefinitions',
function($scope, ProcessDefinitons) {
$scope.defs = ProcessDefintions.query();
}]);
BPMNControllers.controller('DefinitionDetailCtrl', ['$scope','$routeParams','ProcessDefinitions',
function($scope,$routeParams, ProcessDefinitions) {
$scope.def = ProcessDefinitions.get({id : $routeParams.definitionId})
}]);
and the templates:
process-definitions.html :
<div class="container-fluid">
<div class="row" ng-repeat="def in defs">
<div class="col-md-1">{{def.name}} </div>
<div class="col-md-1">{{def.id}} </div>
<div class="col-md-1">{{def.version}}</div>
</div>
landing.html :
<h1>{{welcome}}<h1>
Even the simple landing.html is not displayed correctly, and i can't figure out why. Thanks for your help.
<a href="/process-definitons/{{def.id}}">
you need a # before the url
<a href="#/process-definitons/{{def.id}}">
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
})
I see a typo there. change templareUrl to templateUrl.