I am practicing with very simple website using AngularJS. I have made controller to work and now I am implementing routing. It should be simple and I have done in many times in Codecademy.com, but this time home.html code does not appear on the screen. Folder structure and full code can be found here. Maybe someone knows what is the problem?
My index.html is;
<!DOCTYPE html>
<html>
<head>
<title>EventsApp</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"></script>
</head>
<body ng-app="EventsApp" ng-controller="HomeController" >
<header class="container">
<div class="row">
<h1 class="col-sm-8">EventsApp</h1>
</div>
</header>
<section class="jumbotron">
</section>
<h1> {{test}} </h1>
<div ng-view></div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<!-- Services -->
</body>
</html>
app.js file:
var app = angular.module("EventsApp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
HomeController.js:
app.controller('HomeController', ['$scope',
function($scope) {
$scope.test="Success";
}]);
And home.html:
<h1> {{test}} </h1>
<section class="container">
<h1> {{test}} </h1>
<div class="col-sm-4">
<div class="card">
<img class="img-responsive" src="https://s3.amazonaws.com/codecademy-content/projects/red-eye-photography/p1.jpg" />
<div class="block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="..." >
<div class="block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</section>
Your scripts should be imported in the <head> tag on your index.html, not after the content:
<head>
...
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
</head>
Also, you don't need to set ng-controller="HomeController" in your <body> tag, as it will be set only for the view by ngRoute:
$routeProvider.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
});
Remember Always scripts must be imported in head tag.
In your case you need to add these in index.html page under head tag as shown
<head>
...
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/HomeController.js"> </script>
Secondly, you need to add
Home
in index.html file.This defines link for your home.html page.
Then you need to update section tag in home.html page as:
<section class="container" ng-controller="HomeController">
This will tell your home.html page to use "HomeController". No need to write HomeController in tag of index.html page.
Hope this helps!.
I have to apologize for this question. The problem was that this was supposed to be a final Codecademy project. Previous projects were done in their system and this was the first project to be done on my own computer. As a newbie I did not know that to test AngularJS projects, local server has to be created. Codecademy project description and step by step guide did not tell this either. It said only to launch html on the browser. At the moment they should be fixing this problem of their step by step guide. Thank you for patience.
Related
New to angular.js I want to use ng-include for header and footer that are common to many pages of my site for easier update
I developped a small very basic example (basic.html) to test this but this is not working
<html ng-app>
<head>
<title>Basic Angular.js</title>
<script src="angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
<div ng-include="'myFile.html'"> Inclusion 1</div>
<div ng-include src="'myFile.html'"> Inclusion 2</div>
</body>
</html>
Myfile.html is as follow
<div>
<h1> Footer example </h1>
</div>
All files : basic.html, myFile.html and angular.min.js are in the same root directory (that was an issue in other posts related to ng-include errors)
While the first part of the basic.html is working fine (name input and dynamic display with angular) the ng-include is not working in both syntaxes:
<div ng-include="'myFile.html'">...
or
<div ng-include src="'myFile.html'"> ...
I did not miss the two consecutive quotes " and ' that were an issue in other posts related to ng-include errors.
I'm at a loss to understand what is the correct syntax or what is missing
Make sure you have angular.module and angular.controller defined. ng-include won't work without them being defined. I hope it helped.
Your code should look like this, note that ng-app="myApp":
(function(angular){
// create the module and register it to angular
var app = angular.module('myApp', []);
app.controller("maincontroller", ["$scope"]);
}(angular));
<html ng-app="myApp">
<head>
<title>Basic Angular.js</title>
<!--I'm using the cdn for demo purpose-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
<!--both of these syntax should work-->
<div ng-include="'myFile.html'"> Inclusion 1</div>
<div ng-include src="'myFile.html'"> Inclusion 2</div>
</body>
</html>
I'm trying to get this fiddle to work locally. It does not render properly. I've no idea why. The linked .less file is copied directly from the fiddle. The result of my markup is a blank page. I opted to use the CDN because when I downloaded the source I was unsure which less.js file to copy.
Here's the markup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>radial-progress</title>
<link rel="stylesheet/less" type="text/css" href="styles/radial-progress.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head>
<body>
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage"></div>
</div>
</div>
<script>
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(95));}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
</script>
</body>
</html>
My guess is you are running off the C: drive instead of a local server so the relative protocol link is breaking.
src="//cdnjs..."
needs to be
src="http://cdnjs..."
Better yet look into running your own server. It is simple with python or node.
I am working on a single page application called 'bookMarks' using HTML+CSS+jQuery as the front end and Django as my back end. I created a Django project and put my app.html+app.js+app.css+jquery.js in /static.
My question is: I would like my view to return the app.html as it should be without using Django template. I have tried this:
#app/views.py
from django.shortcuts import render_to_response, HttpResponse
import urllib
def index(request):
index = urllib.urlopen('static/app.html').read()
return HttpResponse(index)
#static/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My Bookmarks</title>
<link type="text/css" rel="stylesheet" href="app.css">
<script src="jquery.js"></script>
<script type='text/javascript' src="app.js">
jQuery.noConflict();
</script>
</head>
<body>
<div id="title">
Easy-Save Bookmarks
</div>
<div class="left">
<h3 class="tag">News</h3>
<div>
<p> A book mark here!</p>
</div>
<h3 class="tag">Reading</h3>
<div>
<p> A book mark here!</p>
</div>
<div id="newTag"></div>
<div>
<form name="addTagForm">
<input type="text" name="newTag">
<input id="addTag" type="button" value="Add a new tag">
</form>
</div>
</div>
<div class="right">
</div>
</body>
</html>
But it seems that all JS and CSS effects are ignored.
Could someone help me to fix this?
Finally I found that's because I didn't include my js+css files in the absolute way.
Now when I put my HTML+JS+CSS files in my_app/static/, and include absolute
The view will return my html correctly.
I've been beating my head against what is probably a stupid mistake for the last couple hours. My angular .config module isn't being called and I can't figure out why.
In an effort to eliminate potential sources of trouble, I've reduced my app down to only the entry point index.js file and and am not injecting any dependencies other than ngRoute.
All the files are being loaded just fine and I can trace code execution to the app.config line but breakpoints inside the passed function never get hit and neither of the console.logs ever fire. What am I doing wrong here? I've made angular apps before and never had this issue. I've probably got a typo somewhere that I'm missing but damned if I can find it.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<div class="container">
<div class="row" id="controls">
...
</div>
<div class="row" id="content">
<div ng-view></div>
</div>
<div class="row" id="footer">
...
</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--<script type="text/javascript" src="static/js/services.js"></script>
<script type="text/javascript" src="static/js/controllers.js"></script>-->
<script type="text/javascript" src="static/js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
/*global angular*/
var app = angular.module('pagednaApp', ['ngRoute'/*, 'pagednaApp.services', 'pagednaApp.controllers'*/]);
app.config(function($scope, $routeProvider){
console.log('test');
console.log($scope);
$routeProvider
.when('/', {
templateUrl: 'content.html',
controller: 'mainController'
});
});
I think you've forgotten the
ng-app="pagednaApp"
put ng-app
<html lang="en" ng-app="pagednaApp">
You could do angular.bootstrap on your page. That will initialize angular on page.
Add below code to your HTML page.
CODE
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(document, ['pagednaApp']);
});
</script>
Thanks.
I have been attempting to follow several different online tutorials, but keep keep failing on the same thing: getting AngularJS to load a HTML template file into the ng-view section in my page.
I have stripped it down as much as possible and am now essentially just copying this simple tutorial.
Please have a look at my test page here: http://inigowebdesign.co.uk/atest/ You should be able to see all the files there in the source code and confirm that they exist and are linked properly. Please, what am I doing wrong?
EDIT: Here is my code as it stands:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Shizzle!</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp">
<header>
<h1>Header</h1>
</header>
<div ng-view></div>
<footer>
<h3>Footer</h3>
</footer>
</div>
<script type="text/javascript">
angular.module('myApp', ['ngRoute']).config(function($routeProvider)){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});
</script>
</body>
</html>
In console you have error: Uncaught SyntaxError: Unexpected token )
This ) was at the end of the first line.
Fixed:
angular.module('myApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});