I am having some problems running my first AngularJS app. When I run my app all objects on my index are displayed properly. When I click on my hyperlink to move to view-2 all objects are displayed on HTML like plain text {{object.property}} What am I doing wrong?
This is my index.html:
<DOCTYPE html>
<html ng-app="tutorialApp">
<head>
<meta charset="UTF-8">
<title> Tutorial App</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MyController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
</DOCTYPE>
this is my app.js:
var app = angular.module('tutorialApp', ["ngRoute", "MyControllerModule"])
app.config(function ($routeProvider){
$routeProvider
.when("/", {
controller: "MyController",
templateUrl: "views/one.html"
})
.when("/two", {
controller: "ControllerTwo",
templateUrl: "views/two.html"
})
.otherwise({
redirectTo: "/"
});
});
this is my MyController.js:
angular.module("MyControllerModule", [])
.controller("MyController", ["$scope", function($scope){
$scope.myFirstObject = {};
$scope.myFirstObject.title = "Main Page";
$scope.myFirstObject.subTitle = "Sub Title";
$scope.myFirstObject.bindOutput = 13;
$scope.myFirstObject.firstname = "Wheelchair";
$scope.myFirstObject.lastname = "Terminator";
$scope.timesTwo = function(){
$scope.myFirstObject.bindOutput *= 2;
}
}])
.directive("myFirstDirective", function(){
return {
restrict: "E",
template: "<div>Hello how are you?</div>"
}
})
.controller("ControllerTwo", ["$scope", function($scope) {
$scope.testObject = {};
$scope.testObject.doSomething = "TEST TEST TEST TEST TEST!";
}
]);
This is my /views/one.html:
<h1>{{myFirstObject.title}}</h1>
<h2>{{myFirstObject.subTitle}}</h2>
<p>Number: {{2 + 2}}</p>
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p>
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p>
<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br>
<br>
<label>First Name:</label>
<input ng-model="myFirstObject.firstname">
<br>
<label>Last Name:</label>
<input ng-model="myFirstObject.lastname">
<br>
CLICK HERE FOR SECOND VIEW
<br>
<br>
<br>
<my-first-directive></my-first-directive>
this is my /views/two.html
<h1>Second View</h1>
<h2>this is the second view...</h2>
<br>
<br>
<p>Call object string: {{testObject.doSomething}}</p>
Change the href to route. Not html page.
CLICK HERE FOR SECOND VIEW
This should be
CLICK HERE FOR SECOND VIEW
As you did in the question, that calls the new html page to load into the browser. Not template of angular app. So, all the unknown stuff like {{object.property}} happens.
Use,
CLICK HERE FOR SECOND VIEW
Observe, href="#two"
<h1>{{myFirstObject.title}}</h1>
<h2>{{myFirstObject.subTitle}}</h2>
<p>Number: {{2 + 2}}</p>
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p>
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p>
<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br>
<br>
<label>First Name:</label>
<input ng-model="myFirstObject.firstname">
<br>
<label>Last Name:</label>
<input ng-model="myFirstObject.lastname">
<br>
CLICK HERE FOR SECOND VIEW
<br>
<br>
<br>
<my-first-directive></my-first-directive>
Check this reference
EDIT:
You seems to have issue with # url's
Solution:
HTML5 Mode
Configuration:
$routeProvider
.when('/two', {
templateUrl: 'views/two.html',
});
$locationProvider
.html5Mode(true);
You should set the base in HTML-file
<html>
<head>
<base href="/">
</head>
</html>
In this mode you can use links without the # in HTML files
link
example:
http://test.com/base/two
Related
I'm new at AngularJS, started 2 days ago, but I can't resolve this problem.
The JS Console Error here
It seems that my directive ng-controller can't find my controller.
Here is my code :
<section class="index" ng-app="indexApp" ng-controller="cRegister">
<form>
<input type="text" ng-model="username" />
<input type="password" ng-model="password" />
<input type="submit" ng-click="" />
</form>
<script>
var app = angular.module('indexApp', [])
app.controller('cRegister', ['$scope', function() {
console.log('controller: true');
}]);
</script>
</section>
(This is a part of the main page, that I displayed with ng-view) :
<html ng-app="web">
<head>
<title>AngularJS, tries</title>
<meta charset="utf-8">
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.2/angular-route.min.js"></script>
<script>
var app = angular.module('web', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/index.php'
})
.otherwise({
redirectTo: '/'
})
});
</script>
</body>
</html>
Hope someone could help me, thank you ! :D
you cannot have two ng-app directive in one html.
remove the inner one and add that controller to the first ng-app
I am using this code to view and add peoples in an array.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
add.html
<h1>Add</h1>
<input type="text" ng-model="new_name" placeholder="Name">
<br />
<input type="text" ng-model="new_age" placeholder="Age">
<br />
<button ng-click="add()">Add</button>
<hr />
Back
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
});
});
app.controller('Ctrl', function($scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
The problem is, I am not getting data from ng-model="new_name" into the controller method $scope.add = function(). After pressing add button only blank strings gets pushed into array. However the model and controller working perfectly without routing and ng-view directive. I think its scope related problem. Can any body help me in this.
Thanks.
Because you should specify the controller for each view. So try doing this:
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'Ctrl'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
A better solution would be to have a separate controller for each view. Also, have a look at the $routeProvider documentation.
Just delete <div ng-controller="Ctrl"> from index.html and add a controller attribute for your route.
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($location,$scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
first you have to wrap your inputs with <form> tag with name='' attribute.
Next step is to give name='' attributes for each <input> tag. Look:
<form name='myLoginForm'>
<input name='nick' ng-model='loginFormModel.nick'>
<input name='password' ng-model='loginFormModel.password'>
</form>
In controller:
app.controller('Ctrl', function($location,$scope) {
$scope.loginFormModel = {}; //now you have whole values from view in this variable, for example nick is available in $scope.loginFormModel.nick
});
I'm learning Angular through a YouTube tutorial series. In the tutorial, you create username and password inputs, and then you use a controller and ngRoute to bring up a dashboard.html page when successful credentials are used. The problem is that when clicking the button, nothing happens, whether the proper credentials are entered or not. Everything is working on the tutorial, and I have triple checked the code thoroughly, and mine looks just like the code in the tutorial. I'm sure I must be missing something though.
What I think:
There is an issue with the click event firing, so maybe there is an issue with how I am calling the function?
The tutorial uses an older angular version (1.3.14), and maybe things have changed? I'm using 1.4.9, but I looked up the api data for the ng-click directive, and all seems well. I also tried using the older version to no avail.
I'm doing something wrong with ngRoute, potentially $scope misuse?
I am inserting all of the code below. Thanks for taking a look!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place Title Here</title>
<meta charset = "utf-8"/>
<meta http-equiv="X-UA-compatible" content="IE-edge, chrome=1">
<meta name = "viewport" content = "width = device - width, initial-scale = 1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="mainApp">
<div ng-view></div>
</body>
</html>
login.html
<div ng-controller="loginCtrl"></div>
<form action="/" id="myLogin">
Username: <input type="text" id="username" ng-model="username"><br>
Password: <input type="password" id="password" ng-model="password"><br>
<button type="button" ng-click="submit()">Login</button>
</form>
controller.js
var app = angular.module('mainApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html'
})
.when('/dashboard', {
templateUrl: 'dashboard.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('loginCtrl', function($scope, $location) {
$scope.submit = function() {
var uname = $scope.username;
var password = $scope.password;
if($scope.username == 'admin' && $scope.password == 'admin') {
$location.path('/dashboard');
}
else {
alert('Nope')
}
};
});
dashboard.html
Welcome User.
Your form needs to be inside the div with ng-controller
<div ng-controller="loginCtrl">
<form action="/" id="myLogin">
Username: <input type="text" id="username" ng-model="username"><br>
Password: <input type="password" id="password" ng-model="password"><br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
Otherwise it won't have access to the submit() function.
Here is what i am trying to do.
In this app, user can click "Add" to add whatever category they want in this form, and i will save all of them, then output it. However, i could not figure out how to output them.
Here is a working example for the dynamic view:http://plnkr.co/edit/j5RGMi3RTPZ85XGvaa2D?p=preview
Here is the js file:
var app = angular.module('plunker', []);
app.controller('ctrl',['$scope', function($scope){
$scope.templates = [];
$scope.addTemplate = function(){
$scope.templates.push('category');
};
}]);
Here is the view:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
<p>Append Category via button click</p>
<button ng-click="addTemplate()">Add Category</button>
<div ng-repeat="template in templates">
<ng-include src="template"></ng-include></div>
<script type="text/ng-template" id="category">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="categoryTitle">Title</label>
<div class="col-sm-10">
<input id="categoryTitle" name="categoryTitle" ng-model="category.title" type="text" class="form-control" placeholder="Input your category title" required>
</div>
</div>
<br>
<!-- Begin textarea -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<textarea id = "nonresizable" class="form-control" ng-model="category.content" placeholder="Input your category content here" rows="5" required></textarea>
<hr>
</div>
</div>
<!-- End textarea -->
</form>
<p>The inputed Category</p>
<label>Title</label>
<div>{{category.title}}</div>
<div class="col-sm-offset-2 col-sm-10">
<textarea>{{category.content}}</textarea>
<hr>
</div>
Any thoughts would be much appreciated!
You want to change the content in $scope.templates after you add the a note/page?
If you want to change the content of every note in the template you can:
var app = angular.module('plunker', []);
app.controller('ctrl',['$scope', function($scope){
$scope.templates = [];
$scope.addTemplate = function(){
$scope.templates.push({
content1 : "content1text",
content2 : "content3text",
content3 : "content3text"
});
};
You can make somethinkg like that
just proposition
Templates.js
var tempsObj = {} | tempsObj;
tempsObj.templates = function(){
var template = [];
template ["templates1"] = "folder1/";
template ["templates2"] = "folder1/";
return template;
}
tempsObj.selectedTemp = "templates1";
Module.js
var app = angular.module("plunker",['ngRoute']);
home.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/',{
templateUrl : tempsObj.templates[tempsObj.selectedTemp]+'plunker.html',
controller : 'plunkerController'
})
.when('/404',{
templateUrl : tempsObj.templates[tempsObj.selectedTemp]+'404.html',
controller : '404Controller'
})
.otherwise({
redirectTo : '/404'
});
});
So, I did more research and made it work! YAY!
Here is a live demo in plunker, http://plnkr.co/edit/AQFlEV6FDEKRAsvBc0PE?p=preview.
$scope.addField = function() {
$scope.data.fields.push({
content: "test " + counter++
});
};
Basically I need to dynamic add the name for each category, everytime push the new category to the scope. Hope this makes sense.
Thanks again for all the answers!
Forgive me for my novelty with Angular but I can't find what the problem to this seemingly simple program. Instead of the $scope displaying "Jonathan" which is defined LoginController, it displays {{logins.username}} in login.html. If I move the controller in the index.html, it works fine. When I move it to app.js file, it does not work. Any help or direction would be greatly appreciated. Focusing on LoginController, below is my code:
Index.html
<!DOCTYPE html>
<html ng-app="millersFormalsApp">
<head>
<meta charset="UTF-8" />
<!-- This add the Angular JS to the program -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<!-- load the logo -->
<img src="img/millers_icon.png">
</head>
<body>
<h2> AngularJS Project</h2>
<div class="container">
<div id="menu">
Home
Login
Register
</div>
<div ng-view=""></div>
</div>
</body>
</html>
login.html
<h2> Login Page</h2>
Username:
<input type="text" placeholder="Username" ng-model="logins.username"
<br />
Password:
<input type="text" placeholder="Password" ng-model="logins.password"
<h2>Your Username is {{ logins.username }} </h2>
app.js
var millersFormalsApp = angular.module('millersFormalsApp', ['ngRoute']);
//** Route Provider takes care of routing functionality based
//** upon what has been selected
millersFormalsApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'HomeController',
templateUrl: 'Views/home.html'
})
.when('/login',
{
controller: 'LoginController',
templateUrl: 'Views/login.html'
})
.when('/register',
{
controller: 'RegisterController',
templateUrl: 'Views/register.html'
})
.otherwise({redirectTo: 'home.html'});
});
//** Controllers are called by the Route Provider to specifically execute
//** the selected item
millersFormalsApp.controller('HomeController', function ($scope)
{
$scope.homePage = "This is Miller's Home Page";
});
millersFormalsApp.controller('LoginController', function ($scope)
{
$scope.logins = {username: "Jonathan", password: ""};
console.log($scope);
});
millersFormalsApp.controller('RegisterController', function ($scope) {
$scope.register = { firstname: "", lastname: "" };
console.log($scope);
});