ng-include use for header / footer - javascript

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>

Related

AngularJS routing issue: Home page is not displayed

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.

how to inject an html element with angular directives using jquery?

I want to inject one HTML element which has been announced with angular directives. With jquery. but the application is not working.
<!doctype html>
<html>
<head>
<title>test angular</title>
</head>
<body>
<div id ="header" ng-app="loginApp"></div>
<script src="js/jquery.js"></script>
<script src="js/angular.js"></script>
<script>
$("#header").load("header.html");
var app=angular.module("loginApp",[]);
app.controller("loginCtrl",function(){
$scope.data="mydata";
});
</script>
</body>
</html>
and the header.html is :
<div ng-controller="loginCtrl">
{{data}}
</div>
but there is no result also no error messages:
You can use the ngInclude directive for that:
<div ng-controller="loginCtrl">
<div ng-include="'header.html'"></div>
</div>

LESS client side

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.

Django: return HTML file including script

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.

Angular, services, and module dependency confusion

I'm starting out with Angular and am running in to problems. I'm not sure I am understanding how module dependencies work.
When creating a module, you pass in an array of required modules (that contain services), right? And when you actually use a controller in that module, you pass it a service function defined in one of your required modules.
This is the error I am encountering in my application:
Failed to instantiate module MyApp due to:
Error: [$injector:modulerr]
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MyApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body data-ng-app="MyApp">
<div data-ng-controller="MyAppCtrl">
<div class="three columns">
<h1 id="logo">LOGO</h1>
</div>
<div class="nine columns">
<div id="settings-nav" class="row">
<select class="three columns">
<option value="settings">My Settings</option>
<option value="users">Add/Edit Users</option>
<option value="account">Account Settings</option>
</select>
</div>
<div class="row">
<nav id="main-nav">
<ul class="six columns">
<li><a id="machines-link" class="button" href="/machines">Machines</a></li>
<li><a id="customers-link" class="button" href="/customers">Customers</a></li>
<li><a id="inspections-link" class="button" href="/inspections">Inspections</a></li>
</ul>
<div class="three columns">
<form id="search">
<input type="text" placeholder="search" />
</form>
</div>
</nav>
</div>
<div data-ng-view id="template-wrapper"></div>
</div>
</div>
<!-- required libraries. -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.min.js"></script>
<script src="js/vendor/angular-animate.min.js"></script>
<script src="js/vendor/angular-resource.min.js"></script>
<script src="js/vendor/underscore.min.js"></script>
<!-- services for each controller. each are under their own module. these talk to the rest server. -->
<script src="js/services/customer.js"></script>
<script src="js/services/inspection.js"></script>
<script src="js/services/machine.js"></script>
<!-- sets up the main MyApp module and dependencies. -->
<script src="js/setup.js"></script>
<!-- controllers for each view. all are under the MyApp module. these are loaded automatically with angular's routing. -->
<script src="js/controllers/customers-list.js"></script>
<script src="js/controllers/inspections-list.js"></script>
<script src="js/controllers/machines-list.js"></script>
<script src="js/controllers/customer.js"></script>
<script src="js/controllers/inspection.js"></script>
<script src="js/controllers/machine.js"></script>
<!-- routing config and main modustri controller. -->
<script src="js/routing.js"></script>
<script src="js/controllers/MyApp.js"></script>
</body>
</html>
I define my service modules like this:
var MachineServices = angular.module('MachineServices', ['http']);
MachineServices.factory('Rest', function($http){
return{
//get machine from server
//save machine to server
//delete machine from server
//get machine list from server
}
});
In setup.js, after the modules with services are loaded, I create my main module:
var MyApp = angular.module('MyApp', ['ngRoute', 'ngAnimate', 'CustomerServices', 'InspectionServices', 'MachineServices']);
There is something wrong with the way these modules and their containing services are created. When I remove them as dependencies I no longer get an error.
What am I missing here?
Thanks in advance.
I think your problem is likely within your module definition:
var MachineServices = angular.module('MachineServices', ['http']);
You don't need to depend upon http. The $http service is part of the Angular core, so it is not a module you need to import. Doing so will give you an error.
I should also correct you on your use of "Services" and "Modules" interchangeably. A module is a collection of factories, services, directives, controllers, filters, etc that can be injected into other modules to use. "Service" has a specific meaning in Angular and is more granular than "Module".

Categories