Why does this Angular script not work?
I'm going through a basic Angular tutorial and there's a portion of it that I can't get to work and I don't know why.
Head out to http://brucegust.com/adm/angular/ and check it out. It's the very last "application."
Here's the code:
It should say, "The name is John" and it doesn't.
I'm looking at Google Chrome and there's nothing in the Console that would give me an indicator as to where I'm blowing it.
Any ideas?
Thanks!
Head out to http://brucegust.com/adm/angular/ and check it out. It's the very last "application."
Here's the code:
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>It should say, "The name is John" and it doesn't.
I'm looking at Google Chrome and there's nothing in the Console that would give me an indicator as to where I'm blowing it.
Any ideas?
Thanks!
ASKER
The URL is https://www.w3schools.com/angular/angular_intro.asp and you can see the example I'm trying to replicate. It looks like you used a different approach and I still can get the "alternatively with HTML" to work.
What do you think?
Also, this does not work:
But this does:
Why?
What do you think?
Also, this does not work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Tutorial</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div style="white-space: normal; border:1px solid #cccccc; border-radius:10pt; margin:auto; width:650px; padding:10px;">
<div data-ng-app="asdf" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
</div>
</body>
</html>But this does:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
</body>
</html>Why?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Julian, thanks so much!
As a courtesy, I want to shut this question down and give you the points, but there's one quandary that I've yet to solve.
I've got two Angular apps running on this page: http://brucegust.com/adm/angular/
The second one still does not work despite the fact that I've (as far as I can tell) implemented your suggestion.
Is the fact that I've got two apps technically named "" present a problem?
Why does the first one work and the other does not?
Also, I appreciate your counsel about the distinctions between Angular vs1 versus 2. The shop that I'm working in right now has an app that is version 1 so I've been asked to get up to speed on that version.
If you could help me understand what I'm still missing on my page, I would certainly appreciate it.
Thanks!
As a courtesy, I want to shut this question down and give you the points, but there's one quandary that I've yet to solve.
I've got two Angular apps running on this page: http://brucegust.com/adm/angular/
The second one still does not work despite the fact that I've (as far as I can tell) implemented your suggestion.
Is the fact that I've got two apps technically named "" present a problem?
Why does the first one work and the other does not?
Also, I appreciate your counsel about the distinctions between Angular vs1 versus 2. The shop that I'm working in right now has an app that is version 1 so I've been asked to get up to speed on that version.
If you could help me understand what I'm still missing on my page, I would certainly appreciate it.
Thanks!
The first question is why do you have two apps on one page - sort of defeats the purpose of a single page application.
Theoretically it is possible but points to a probably design flaw.
If you need to do different things on the same page then you should consider using components - this is the Angular way of doing things.
I can't think of a situation where you would define two apps - and if you did you would need to name them differently so Angular knows what to do with them.
Alternatively, In your case, you can define different controllers for each of the sections if you want to keep them separate - or handle them in the same controller - but components are the way to go.
With a component you essentially create your own tags and then bind an Angular function to that tag to render and control it.
If you just need to modify the functionality of a tag - based on an attribute say - then you need to skill up on directives.
Theoretically it is possible but points to a probably design flaw.
If you need to do different things on the same page then you should consider using components - this is the Angular way of doing things.
I can't think of a situation where you would define two apps - and if you did you would need to name them differently so Angular knows what to do with them.
Alternatively, In your case, you can define different controllers for each of the sections if you want to keep them separate - or handle them in the same controller - but components are the way to go.
With a component you essentially create your own tags and then bind an Angular function to that tag to render and control it.
If you just need to modify the functionality of a tag - based on an attribute say - then you need to skill up on directives.
This is kind of like learning to swim by going to the aquarium and asking to be thrown in the shark tank. You will learn to swim but it will be a horrible experience.
This should work
Open in new window
But then I have to ask you - what are you wanting to achieve?