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
});
Related
I wrote the program that is having 3 buttons and if i click on the particular button it should redirect to corresponding page mentioned in app.js
my requirement is each button should have a controller and it should redirect properly and it should show a console message that which button is clicked
i'm sharing my code but it is not working
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js"></script>
<script>var myItemsApp = angular.module('myItemsApp', ['ngRoute']);</script>
</head>
<body ng-app="myItemsApp">
<div>
<h3>Test</h3>
<div class="row">
<div class="col-md-4">
<button href="/test1" ng-click="submit1()">Button1</button>
<button href="/test2" ng-click="submit2()">Button2</button>
<button href="/test3" ng-click="submit3()">Button3</button>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
<script src="testcntrl.js"></script>
</html>
#app.js
myItemsApp.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/test1', {
templateUrl : 'test.html',
controller : 'button1Controller'
})
.when('/test2', {
templateUrl : 'test1.html',
controller : 'button2Controller'
})
.when('/test3', {
templateUrl : 'test2.html',
controller : 'button3Controller'
})
.otherwise({
redirectTo: '/'
});
}]);
testcntrl.js
myItemsApp.controller('button1Controller', ['$scope','$location', function($scope,location){
$scope.submit1 = function() {
console.log("I clicked on submit button1Controller");
location.path('/test1');
}
}]);
myItemsApp.controller('button2Controller', ['$scope','$location', function($scope,location){
$scope.submit2 = function() {
console.log("I clicked on submit button2Controller ");
location.path('/test2');
}
}]);
myItemsApp.controller('button3Controller', ['$scope','$location', function($scope,location){
$scope.submit3 = function() {
console.log("I clicked on submit button3Controller");
location.path('/test3');
}
}]);
test1.html
<h1>hello</h1>
You should add ng-view to render template. and add # to url in the href.
also you don't need ng-click when time using <a> tag.and you injected service into controller incorrectly. you should inject $location instead of location
if you want to remove # from url so enable html mode.
<div class="col-md-4">
<a href="#/test1" >Button1</a>
<a href="#/test2" >Button2</a>
<a href="#/test3" >Button3</a>
</div>
<div ng-view=""></div>
</div>
Demo
Your idea is ok, it should work but:
No need href in button.
Instead of button you can simply use anchor with #/test1 #/test2
If you still want this way you need another controller "main controller"
This can work:
// Code goes here
var myItemsApp = angular.module('myItemsApp', ['ngRoute']);
myItemsApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/test1', {
templateUrl: 'test1.html',
controller: 'button1Controller'
})
.when('/test2', {
templateUrl: 'test2.html',
controller: 'button2Controller'
})
.when('/test3', {
templateUrl: 'test3.html',
controller: 'button3Controller'
})
.otherwise({
redirectTo: '/'
});
}]);
myItemsApp.controller('initialController', ['$scope', '$location', function($scope, location) {
$scope.submit1 = function() {
console.log("I clicked on submit button1Controller");
location.path('/test1');
}
$scope.submit2 = function() {
console.log("I clicked on submit button2Controller ");
location.path('/test2');
}
$scope.submit3 = function() {
console.log("I clicked on submit button3Controller");
location.path('/test3');
}
}]);
myItemsApp.controller('button1Controller', ['$scope', '$location', function($scope, location) {
}]);
myItemsApp.controller('button2Controller', ['$scope', '$location', function($scope, location) {
}]);
myItemsApp.controller('button3Controller', ['$scope', '$location', function($scope, location) {
}]);
Plunker demo
I am trying to do routing in angular js and Server is running fine. But angular routing is not working properly, only main.html page is coming in ng-view, second.html is not coming. when clicked on the first and second in html same mainController is working not the secondController.
HTML
<!Doctype html>
<html ng-app="myApp">
<meta charset=utf-8" />
<head>
<script src="http://code.angularjs.org/snapshot/angular.min.js"></script>
<script src="http://code.angularjs.org/snapshot/angular-route.min.js">
</script>
<script type="text/javascript"src="app.js"></script>
<body>
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class = "container">
<div ng-view>
</div>
</body>
main.html
<h1> this is main </h1>
second.html
<h1> this is second </h1>
app.js
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'pages/main.html',
controller: 'mainController',
})
.when('/second',{
templateUrl: 'pages/second.html',
controller: 'secondController',
})
});
myApp.controller('mainController',
['$scope','$log','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("first");
}]);
myApp.controller('secondController',
['$scope','$log','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("second");
}]);
Problem is your scripts, they are not working use the one from googleapis.
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
template: '<h1>Main Page</h1>',
controller: 'mainController',
})
.when('/second', {
template: '<h1>{{ test }}</h1>',
controller: 'secondController',
})
});
myApp.controller('mainController',
['$scope', '$log', '$location', function ($scope, $log, $location) {
$log.info($location.path());
console.log("first");
}])
.controller('secondController', ['$scope', function ($scope) {
$scope.test = 'Testing angular routes';
}]);
<script src="https://code.angularjs.org/1.6.4/angular.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script>
<body ng-app="myApp">
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
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
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);
});
I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo