Having an issue connecting my Angular Controller to my View - javascript

I'm trying to connect a controller to my view and I keep getting this error:
Error: ng:areq Bad Argument Argument 'TestAppCtrl' is not a function,
got undefined
I have this view:
<!DOCTYPE html>
<html ng-app lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Resume Page</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- ExtraCSS -->
<link rel="stylesheet" href="css/extra.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<!-- External JS extras -->
<script src="js/script.js"></script>
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="app">
<div class="container">
<div class="row">
<h3>Resume</h3>
</div>
<div ng-controller="TestAppCtrl" id="TestAppCtrl">
{{data}}
</div>
<div class="row">
<div class="col-sm-6 col-xs-12 span4">
<h4>About</h4>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Technical</li>
<li role="presentation">School</li>
<li role="presentation">Experience</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="technical">
</div>
<div role="tabpanel" class="tab-pane" id="school">
.t..
</div>
<div role="tabpanel" class="tab-pane" id="experience">
.z..
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<h4>Contact Info</h4>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And this controller:
// Generated by CoffeeScript 1.9.3
var app;
app = angular.module('app', []);
console.log("hello world");
app.controller('TestAppCtrl', ['$scope', function($scope) {
$scope.data = [1, 2, 3, 4, 5];
}]);
I know it's finding the correct controller because the console log prints. But the data in the controller isn't binding in the view it's just showing as {{data}} any suggestions would help a lot, thank you.

You have ng-app twice
<!DOCTYPE html>
<html ng-app lang="en">
...
</head>
<body ng-app="app">
Angular will use the first one on the page, your initialization statement is referencing the 2nd ng-app
app = angular.module('app', []);

Related

Trying to implement $http in AngularJS

I'm trying to implement simple http service in AngularJS by fetching data from an api in json format. its a blog post and i am trying to show it in my blog. The data is received in my console but is not displaying in my blog. Please help. It uses Bootstrap in the front end. Here is a screenshot.
http://imgur.com/a/8p24h
var a = angular.module('Blog', []);
a.controller('BlogControl', function($http) {
var b = this;
this.heading = 'My Angular Blog';
this.subheading = 'Made by Anurag';
this.baseurl = 'https://projectsapi.edwisor.com/api/blogs/';
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
this.bpost = response.data.data;
});
})
<!DOCTYPE html>
<html ng-app="Blog">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My Angular Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- 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]-->
</head>
<body ng-controller="BlogControl as newBlog">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>{{newBlog.heading}}</h1>
<hr class="small">
<span class="subheading">{{newBlog.subheading}}</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview" ng-repeat="bl in newBlog.bpost">
{{bl.bodyHtml}}
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
<!-- Important JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="angular/app.js" type="text/javascript"></script>
</body>
</html>
this is not the instance of the controller inside the callback. Try to capture it outside and then assign bpost on the captured instance:
var that = this;
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
that.bpost = response.data.data;
});
try this npm module anngularjs-requester--http

making an angular app from html to render data from http rest endpoint using $http

I am an absolute beginner with angularjs. My problem statement is to fetch the data from the database and show it as a grid. I am trying to render the data from the rest end point on clicking the anchor tag "Data Profiling". what is the best way to do it.
This is my first post in stackoverflow so please excuse any mistakes in the post.
<!DOCTYPE html>
<html lang="en" ng-app="d2vapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>D2V</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- 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]-->
</head>
<body>
<!-- Header -->
<a name="about"></a>
<div class="intro-header" ng-controller="d2vappcontroller">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Data to Value</h1>
<h3>Your one stop data explorer</h3>
<hr class="intro-divider">
<ul class="list-group">
<table align='center' width=100%>
<tr>
<td>
<span class="network-name">Data Catalogue</span></br></br>
</td>
<td>
<span class="network-name">Data Exploration</span></br></br>
</td>
</tr>
<tr>
<td>
<span class="dataprofiling">Data Profiling</span></br></br>
</td>
<td>
<span class="network-name">API Catalogue</span></br></br>
</td>
<tr>
<td>
<span class="network-name">RUNDECK</span></br></br>
</td>
<td>
<span class="">Infra Management</span></br></br>
</td>
</tr>
</table>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
Home
</li>
<li class="footer-menu-divider">⋅</li>
<li>
About
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Services
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Contact
</li>
</ul>
<p class="copyright text-muted small">Copyright © Cisco 2016. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- AngularJS javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</body>
</html>
In your controller you have to inject the $http and $scope
angular.module('d2vapp').controller('d2vappcontroller' , function($scope, $http){
$scope.getDataProfiling = function(){
$http.get('path/to/your/route')
.success(function(response){
//do something with your response
})
.error(function(error){
//handle your error
});
}
});
In your html add the click action
<span class="dataprofiling">Data Profiling</span></br></br>
NOTE: Please go through the angularjs documentation for better understanding how various components of angular work

bootstrap tour no working

bootstrap tour no working
Jsfiddle Demo
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap-tour.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<br/>
<div class="container">
<button class="btn" id="tour-go">Start the tour!</button>
<br/>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default" id="my-element">
<div class="panel-heading">
<h3 class="panel-title">Panel title 1</h3>
</div>
<div class="panel-body">
Panel content 1
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" id="my-other-element">
<div class="panel-heading">
<h3 class="panel-title">Panel title 2</h3>
</div>
<div class="panel-body">
Panel content 2
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title 3</h3>
</div>
<div class="panel-body">
Panel content 3
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="bootstrap-tour.js"></script>
<script>
// Instance the tour
var tour = new Tour({
steps: [
{
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
},
{
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step"
}
]});
// Initialize the tour
tour.init();
$('#tour-go').click(function () {
// Start the tour
tour.start();
});
</script>
</body>
</html>
</pre>
Use, it is a cookie based tour, to start it forcefully pass true in .start()
tour.start(true) // Pass true to force the start.
Fiddle

Bootstrap Navbar Collapse Dropdown Menu

I am working on a Bootstrap Website with a dropdown box in the Navbar. When the Navbar is in collapse mode. The dropdown menu is not responding
Does anyone know why this would happen
The website can be found at http://horizonarb.co.uk/index.html
The code is as follows;
Many thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Horizon Arboriculture</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<script src="js/googleFonts.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet"></link>
<!-- Font Awesome -->
<link rel="stylesheet" href="css/fontawesome/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<small>MENU</small>
</button>
<img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize">
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Crown Thinning</li>
<li>Crown Lifting</li>
<li>Crown Reduction</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="container" id="topContainer">
<div class="row">
<div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty">
<img src="img/front/HorizonArb_Transparent.png" width="70%">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The dropdown is opening and closing, but it's hidden from view by the container. The following CSS should fix that:
.navbar-static-top .navbar-collapse.in {
overflow-y: visible; /* Bootstrap default is "auto" */
}

Failed to load module

It's my first day actually experimenting with AngularJS and I'm hitting an error.
Error: $injector:modulerr Module Error
Error Link
The AngularJS code :
var PP = angular.module('PP', []);
PP.controller('documentController', function ($scope) {
$scope.documents = [
{
'filename': 'Untitled-1',
'content': 'Content-1'
},
{
'filename': 'Untitled-2',
'content': 'Content-2'
},
{
'filename': 'Untitled-3',
'content': 'Content-3'
},
];
});
And the HTML:
<!DOCTYPE html>
<html lang="en" ng-app="PP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Core Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.layout.min.css" rel="stylesheet">
<link href="custom/style.css" rel="stylesheet">
<!-- IE Support -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main Wrapper -->
<div class="container-fluid ui-layout-center" id="wrapper" ng-controller="documentController">
<!-- Editor Tabs -->
<div class="row-fluid">
<ul class="nav nav-tabs" role="tablist" id="tabbar">
<li ng-repeat="document in documents">
<a href="#{{document.filename}}" role="tab" data-toggle="tab">
<button class="close closeTab" type="button">x</button>
{{document.filename}}
</a>
</li>
</ul>
</div>
<!-- Editor Contents -->
<div class="row-fluid content">
<div class="tab-content" style="height:100%;">
<div ng-repeat="document in documents">
<div class="tab-pane" id="{{document.filename}}">{{document.content}}</div>
</div>
</div>
</div>
<!-- Panel Tabs -->
<ul class="nav nav-tabs panel-tabs" role="tablist">
<li id="console-trigger"><i class="glyphicon glyphicon-flash"></i></li>
<li id="search-trigger"><i class="glyphicon glyphicon-search"></i></li>
</ul>
</div>
<!-- Panel Contents -->
<div class="ui-layout-south">
<div class="tab-content" id="panel-content">
<!-- Console -->
<div class="tab-pane fade in active" id="console-tab">
</div>
<!-- Search -->
<div class="tab-pane fade" id="search-tab">
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.layout.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.tabdrop.min.js"></script>
<script src="js/mustache.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="extras/ace/ace.js"></script>
<script src="custom/script.js"></script>
</body>
</html>
Any idea what is going on?

Categories