Angular sample followup - javascript

Here is the code snippet from Angular tutorial, instead of calling the ng-app directive in the html tag, am creating a span tag and calling it there. Why is the UL list in the javascript not showing up?? Thanks for your help!!
var phonecatApp = angular.module('phoneCatApp', []);
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<span ng-app="phoneCatApp">
<body ng-controller="PhoneListController">
<p>Nothing here {{'yet' + '!'}}</p>
<p>1 + 2 = {{1 + 2}}</p>
<ul>
<li ng-repeat="phone in phones">
<span>
{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</span>
</html>

I think HTML doesn't like <span> outside <body>
var phonecatApp = angular.module('phoneCatApp', []);
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}];
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="phoneCatApp" ng-controller="PhoneListController">
<p>Nothing here {{'yet' + '!'}}</p>
<p>1 + 2 = {{1 + 2}}</p>
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>

Related

Insert new html element into every ng-repeat (AngularJS)

I'm having some trouble figuring out a way to insert a <p> in the DOM in each item of ng-repeat.
I'm doing ng-repeat of this array of objects:
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
then in the html file I have:
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
{{insertHTML(item.paragraph)}}
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
the insert.HTML(str) function is supposed to transform the string on each item.paragraph into an html element.
Here's the function:
$scope.insertHTML = function(str) {
var wrapper = document.createElement('div');
wrapper.innerHTML = str;
};
I created this plunker where you can check the whole code running
Try Directives. See demo here
var app = angular.module('plunker', []);
app.directive('myDir',function(){
return{
link : function(scope,element){
element.append(' <br><br><p>this is the beginning of box</p>');
element.append('<p>'+scope.item.name+'</p>');
element.append(' <p>this is the end of box<br><br><br></p>');
}}
})
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<my-dir></my-dir>
</div>
</body>
</html>
You should use Angular's built in ng-bind-html and ngSanitize:
angular.module("demo", ["ngSanitize"]);
angular
.module("demo")
.controller("demoController", ["$scope", "$sce", function($scope, $sce) {
$scope.items = [{
name: "john",
paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
},
{
name: "rita",
paragraph: "<p>hi, im rita</p>"
},
{
name: "joe",
paragraph: "<p>hi, im joe</p>"
}
];
}])
.red {
background-color: red
}
.blue {
background-color: blue
}
.green {
background-color: green
}
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="demoController">
<p>hello everyone</p>
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
<div ng-bind-html="item.paragraph"></div>
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>
</html>

AngularJS not able to route to different page

I have a simple web project that has a phone list and each element in that list contains a phone detail information. If I clicked on a phone id, it should bring me to a page for that phone only, however, nothing happened after a phone id was clicked.
When the app was loaded, it went to the index page with a url:
http://localhost:8080/angular-route-multiple-views/index.html#!/phones
After I clicked on the first phone id, the url was changed to the following but it didn't go to that page at all:
http://localhost:8080/angular-route-multiple-views/index.html#!/phones#%2Fphones%2Fnexus
Can someone please help and let me know why it didn't go to the phone detail page ? Thanks.
index.html
<!DOCTYPE html>
<html ng-app="mainModule">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="js/main-module.js"></script>
<script src="js/phonelist-module.js"></script>
<script src="js/phonelist-component.js"></script>
<script src="js/config.js"></script>
<script src="js/phonedetail-module.js"></script>
<script src="js/phonedetail-component.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
main-module.js:
angular.module('mainModule', ['ngRoute', 'phoneList', 'phoneDetail']);
config.js:
angular.module('mainModule').
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.
when('/phones', {
template: '<phone-list></phone-list>'
}).
when('/phones/:phoneId', {
template: '<phone-detail></phone-detail>'
}).
otherwise('/phones');
}
]);
phonelist-module.js:
angular.module('phoneList', ['ngRoute']);
phonelist-component.js:
angular.module('phoneList').component('phoneList', {
templateUrl: 'js/phone-list.template.html',
controller: function PhoneListController() {
this.phones = [
{
id: 'nexus',
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.',
},
{
id: 'motorola-xoom',
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.',
}
];
}
});
phonedetail-module.js:
angular.module('phoneDetail', ['ngRoute']);
phonedetail-component.js:
angular.module('phoneDetail').
component('phoneDetail', {
template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
controller: ['$routeParams',
function PhoneDetailController($routeParams) {
this.phoneId = $routeParams.phoneId;
}
]
});
phone-list.template.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Phone List</title>
</head>
<body>
<li ng-repeat="phone in $ctrl.phones" >
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
Your forgot to add ! in the href attribute.
<ul>
<li ng-repeat="phone in $ctrl.phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>

AngularJS templates not loading correctly

I recently started learning web development basics by myself, and at the moment, I try to start with AngularJS. But unfortunately my first project won't work out. I tried to fix it by myself, but I can't find the problem. In my opinion, I simply failed to include or import the Angular code in the right way.
My Problem: Instead of computing the results of the angular script app.js, it shows: {{ here should be Angular related stuff }}
I hope you may help me with my annoying debugging problem. I also would love to hear other feedback about my first code and which things are useless or what else I need to do or to think about.
Thank you very much for your help and time.
my folder tree:
App
app.js
bower_components
angular
bootstrap
d3
jquery
css
style.css
js
index.js
node_modules
bower.json
index.html
// Define the `SmartIndustryInterfaceApp` module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);
smartIndustryInterface.controller('WaelzlagerListController',
function WaelzlagerListController($scope) {
$scope.WaelzlagerList[
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
});
<html lang="de" ng-app="SmartIndustryInterface">
<head>
<title>Smart Industry Interface</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- angular material-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- Angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- Bower -->
<script src="/bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- local -->
<script src="App/app.js"></script>
</head>
<body>
<div>
<p id="dynamischerHTML">Dieser Text wird noch geladen... ... ... ... </p>
</div>
<div ng-controller="WaelzlagerListController">
<ul>
<li ng-repeat="waelzlager in WaelzlagerList">
<span>{{waelzlager.name}}</span>
<p>{{waelzlager.snippet}}</p>
</li>
</ul>
</div>
<div>
<p ng-controller="testing"> {{firstName + "" + lastName}} </p>
<script> var app = angular.module("SmartIndustryInterface", []);
app.controller("testing", function($scope) {
§scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</div>
<!--<md-list>
<md-list-item class="md-2-line" ng-repeat="item in todos">
<md-checkbox ng-model="item.done"></md-checkbox>
<div class="md-list-item-text">
<h3>{{item.title}}</h3>
<p>{{item.description}}</p>
</div>
</md-list-item>
</md-list>-->
<script src="js/index.js"></script>
</body>
</html>
The main issues are:
1 - wrong character § when it should be $.
§scope.firstName = "John";
should be
$scope.firstName = "John";
2 - Missing equal sign in $scope.WaelzlagerList = [...]
I cleaned up the code a bit by moving the inlined controller to together with the first one.
// Define the SmartIndustryInterfaceApp module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);
smartIndustryInterface.controller('WaelzlagerListController',
function ($scope) {
$scope.WaelzlagerList = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM',
snippet: 'The Next, Next Generation tablet.'
}
];
});
smartIndustryInterface.controller("testing", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
//angular.element(document).ready(function () {
// angular.bootstrap(document, ['SmartIndustryInterface']);
//});
<html lang="de" ng-app="SmartIndustryInterface">
<head>
<title>Smart Industry Interface</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- angular material-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- Angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- Bower -->
<script src="/bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- local -->
<script src="App/app.js"></script>
</head>
<body>
<div>
<p id="dynamischerHTML">Dieser Text wird noch geladen...</p>
</div>
<div ng-controller="WaelzlagerListController">
<ul>
<li ng-repeat="waelzlager in WaelzlagerList">
<span>{{waelzlager.name}}</span>
<p>{{waelzlager.snippet}}</p>
</li>
</ul>
</div>
<div>
<p ng-controller="testing">{{firstName + ' ' + lastName}}</p>
</div>
<script src="js/index.js"></script>
</body>
</html>
A couple of things so far:
The array of objects is badly defined:
$scope.WaelzlagerList = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
And then the Inline JS has a dodgy char in it:
**§**scope.firstName = "John";
You perhaps need to ask yourself why this needs to be inline, it will make testing harder for you. There are other issues, but those are the two to kick off with. There seems to be a load order issue with the "testing" controller too. See if that helps.
Add plunkr, thanks VRPF:
plunkit

Not able to display view in Angular

Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?
index.html
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('KanbanBoard', ['ngRoute']);
(function () {
app.config(function ($routeProvider) {
$routeProvider.when("/boards", {
controller: "BoardsController",
templateUrl: "/app/boards/boardsView.html"
});
$routeProvider.otherwise({ redirectTo: "/boards" });
});
})();
controller.js
'use strict';
(function () {
app.controller('BoardsController', ['$scope', function ($scope) {
$scope.users;
this.users = [
{
id: 0,
email: 'a#a.com',
name: 'A',
surname: 'B',
initials: 'AB',
boards: [
{
id: 0,
title: 'Welcome Board',
description: 'Board sample',
isArchived: false,
},
{
id: 1,
title: 'Project X',
description: 'Project X description',
isArchived: false,
}
]
}
];
$scope = this.users;
}]);
})();
boardView.html
<div ng-controller="BoardsController as boardsCtrl">
<div ng-repeat="user in boardsCtrl.users">
{{user.name + " " + user.surname}}
<ul>
<li></li>
</ul>
</div>
</div>
In the body of your webpage it seems that you are missing ng-view:
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div> <!--this is required.-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
From the documentation:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
You missed adding the Boardview.html with controller on your index.html
It could be done inline or by using ng-include:
<div ng-include="boardView.html"></div>

AngularJs not loading sometimes

I am running a very basic program in angularjs but don't know why the script is not loading
the evaluation tags are displayed on the view page.
Can anyone tell me what's wrong with the program?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Your Shopping Cart</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script type="text/javascript">
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: '8', price: '3.95'},
{title: 'Polka dots', quantity: '17', price: '12.95'},
{title: 'Pebbles', quantity: '5', price: '6.95'}
];
$scope.remove = function(index) {
// splice is an ECMA javascript function
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
I tried this code, this runs fine
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="ContactController">
Email:<input type="text" ng-model="newcontact"/>
<button ng-click="add()">Add</button>
<h2>Contacts</h2>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</div>
<script type="text/javascript">
function ContactController($scope) {
$scope.contacts = ["hi#email.com", "hello#email.com"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</body>
</html>
Change this :
<html ng-app='myApp' >
to this
<html ng-app >
You don't have a module called 'myApp'
DEMO
You didn't declare your angular app. Try that:
var app = angular.module('myApp', []);
app.controller('CartController',function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: '8', price: '3.95'},
{title: 'Polka dots', quantity: '17', price: '12.95'},
{title: 'Pebbles', quantity: '5', price: '6.95'}
];
$scope.remove = function(index) {
// splice is an ECMA javascript function
$scope.items.splice(index, 1);
}
});

Categories