Issue
I was following a tutorial and I did everything exactly the same. At some point I got to where the behavior of the website was not as intended.
What is supposed to happen is when I put double brackets around title whatever I type in the search bar is immediately passed to the location of the {{title}}. But instead it treats it as a regular HTML file and simply shows {{title}} on the web page.
Usually people tell me not to post the entire code because it should be concise but how else would you be able to find any errors in the code if you cannot see the entire code?
Anyways in WebStorm I get the following errors:
<html lang="en" ng-app="ToDoApp">
attribute ng app is not allowed here.
I have tried changing it to data-ng-app and it gets rid of the error but does not fix the problem.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Then for this part it says there is no local data for this. I can't really download it because I am low in disk space. But the professor did not download it either and it still worked fine for him.
Essentially everywhere I put ng... its saying I cant put it there.
This is the snippet of code that is not acting as intended. It seems to just ignore the ng-model. It also says the input needs labels but again this was not an issue for the professor.
<div ng-controller="TodoListController">
<input ng-model="title" class="form-control"/>
{{title}}
Just in case here is the full Angular index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="ToDoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<h1> Todo List App </h1>
<div ng-controller="TodoListController">
<input ng-model="title" class="form-control"/>
{{title}}
<button class="btn btn-block btn-primary"> Add a todo </button>
<ul class="list-group">
<li class="list-group-item"> Pick up kids </li>
<li class="list-group-item"> Pick up milk </li>
</ul>
</div>
</div>
</body>
</html>
Solution
It will always work as long as you don't name your ng-app and not use ng-controller.
If you are using ng-app="ToDoApp" and Controller ng-controller="TodoListController" you should consider to declare your app in app.js as given bellow.
var app = angular.module('ToDoApp', []);
app.controller('TodoListController', ["$scope", function($scope) {
}]);
Full code as bellow
<!DOCTYPE html>
<html lang="en" ng-app="ToDoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
/**
Scripting in html not recomnded use separate file
*/
var app = angular.module('ToDoApp', []);
app.controller('TodoListController', ["$scope", function ($scope) {
}]);
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<h1> Todo List App </h1>
<div ng-controller="TodoListController">
<input ng-model="title" class="form-control" />
{{title}}
<button class="btn btn-block btn-primary"> Add a todo </button>
<ul class="list-group">
<li class="list-group-item"> Pick up kids </li>
<li class="list-group-item"> Pick up milk </li>
</ul>
</div>
</div>
</body>
</html>
Answered By - Shree29
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.