I have set up a AngularJS MVC structure. Unfortunately, there is no specific errors or warnings in the script. However, the screen is displaying nothing and views is not redering according to the URLS give in the address bar.
Please help me to fix this issue.
Please see the below codes sepearate
-----------------controller.js---------------------
var demoApp = angular.module('demoApp', []);
var controllers = {};
demoApp.controller('simpleController', function ($scope) {
$scope.customers = [{
name: 'Rex',
city: 'Kensas'
}, {
name: 'Cyrin',
city: 'Texas'
}, {
name: 'Vijith',
city: 'Florida'
}];
$scope.addCustomer = function () {
$scope.customers.push({
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
$scope.newCustomer.name = '';
$scope.newCustomer.city = '';
};
});
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/view1', {
controller: 'simpleController',
templateUrl: 'Partials/view1.html'
})
.when('/view2', {
controller: 'simpleController',
templateUrl: 'Partials/view2.html'
})
.otherwise({
redirectTo: '/view1'
});
});
-----------------------index.html--------------------------
<!doctype html>
<html ng-app="demoApp">
<head>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div>
<div ng-view=""></div>
</div>
</body>
</html>
-------------Partials/view1.html----------------------------
<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="name" />
<br />
<ul>
<li ng-repeat="cust in customers | filter:name">{{ cust.name }}</li>
</ul>
<br />
User Name:<br />
<input type="text" ng-model="newCustomer.name" />
<br />
User Name:<br />
<input type="text" ng-model="newCustomer.city" />
<br />
<button ng-click="addCustomer()">Add Customer</button>
<br />
View 2
</div>
Not including view2.html as it is less important here.
Hoping for the quick fix. :)
Thanks for your time!
Rex
Which version of Angular you are using?
If you are using 1.2* then you have to explicitly inject ngRoute module into your app by including angular-route.js separately
See docs: https://docs.angularjs.org/guide/migration#ngroute-has-been-moved-into-its-own-module
Import ngRoute in your code
var demoApp = angular.module('demoApp', ['ngRoute']);
Also you have not defined your controller to any of your HTML elements.
<div ng-controller="simpleController"></div>
DEMO PLUNKER
Note: Before you ask anything see your browser's console for any errors. If you haven't already included ngRoute, it throws an error you can see it in console.
you have to define your ng-controller
<div ng-controller="simpleController">
You have defined your app (ng-app).. But you have not defined your controller in any of your HTML files.
For the HTML file where you need to use the controller, call it there via:
<div ng-controller="simpleController">
// The rest of your HTML
</div>
Related
I have the below mentioned Angular code that uses the config and the routeProvider. View1 and View 2 are also enclosed.
<!DOCTYPE html>
<html>
<head>
<title>My test application</title>
</head>
<body ng-app="myApp">
<div>
<div ng-view></div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/view1.html'
})
.when('/view2',{
controller: 'SimpleController'
templateUrl:'Partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('SimpleController',SimpFunc);
function SimpFunc($scope){
$scope.customers = [
{name:'Dave Smith', city:'New York'},
{name:'Will Smith', city:'Phily'},
{name:'Will Die', city:'Cincy'},
{name:'Die till', city:'New Jersey'},
{name:'Till What', city:'Cincy'}
];
$scope.addCustomer = function(){
$scope.customers.push(
{
name: $scope.newCust.name,
city: $scope.newCust.city
});
};
}
</script>
</body>
</html>
View1.html
<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="filter.name" />
<br />
<ul>
<li ng-repeat="cust in customers | filter:filter.name">{{ cust.name
}} - {{ cust.city }}</li>
</ul>
<br />
Customer Name:
<br />
<input type="text" ng-model="newCust.name" />
Customer City:
<br />
<input type="text" ng-model="newCust.city" />
<br />
<button ng-click="addCustomer()">Add customer</button>
<br />
View 2
</div>
View 2
<div class="container">
<h2>View 2</h2>
City:
<br />
<input type="text" ng-model="filter.city" />
<br />
<ul>
<li ng-repeat="cust in customers | filter:filter.city">{{ cust.name
}} - {{ cust.city }}</li>
</ul>
</div>
I am not able to render view1 and/or view2 in the page. How can I do that?
Your script library URLs are giving 404 error.
I used below
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js
And comma missing after SimpleController
.when('/view2',{
controller: 'SimpleController',
you have some syntax error in your app.config, also you have to make ng-href instead href for example <a ng-href="#!/view2">View 2</a>, replace your codes with below codes.
also you miss define the controller in the Html
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/',
{
controller: 'SimpleController',
templateUrl: 'partials/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Dave Smith', city: 'New York' },
{ name: 'Will Smith', city: 'Phily' },
{ name: 'Will Die', city: 'Cincy' },
{ name: 'Die till', city: 'New Jersey' },
{ name: 'Till What', city: 'Cincy' }
];
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCust.name,
city: $scope.newCust.city
});
};
});
<div ng-app="myApp" ng-controller="SimpleController">
<div ng-view></div>
</div>
Don't see what I'm missing here. My javascript isn't throwing any errors, but when I run the main page all I get is a blank screen; it appears that view1.htm isn't loading.
Here's the main page:
<!doctype HTML>
<html ng-app="demoApp">
<!--- This is how you integrate with partials (views)... --->
<head>
<title>Using AngularJS Views</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<!-- normally would put this in it's own js file and call with script src="" -->
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when("/",
{
controller:"simpleController",
templateURL:"partials/view1.htm"
})
.when("/view2",
{
controller:"simpleController",
templateURL:"partials/view2.htm"
})
.otherwise({ redirectTo: "/"});
});
demoApp.controller('simpleController', ['$scope', function($scope) {
$scope.customers = [
{name:"David Jones", city:"Phoenix"},
{name:"James Riley", city:"Atlanta"},
{name:"Heedy Wahlin", city:"Chandler"},
{name:"Thomas Winter", city:"Seattle"}
];
$scope.addCustomer = function(){
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
}]);
</script>
</head>
<body>
<div>
<!-- placeholder for the views -->
<div ng-view></div>
</div>
</body>
</html>
and here's partials/view1.htm:
<div class="container">
<h2>View 1</h2>
Name:
<br/>
<input type="text" ng-model="filter.name" />
<br/>
<ul>
<li ng-repeat="cust in customers | filter:filter.name">{{cust.name}}</li>
</ul>
<br/>
Customer Name:<br/>
<input type="text" ng-model="newCustomer.name" />
<br/>
Customer City:<br/>
<input type="text" ng-model="newCustomer.city" />
<br/>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>
Thanks for any help.
Found it. templateURL should be templateUrl.
Hi What wrong am i doing. I am new to angular js and i am using ng-template for routing withing the views.
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationPro vider) {
$routeProvider.
when('/', {
templateUrl: 'add.html',
controller: 'myAppCtrl'
}).
when('/edit',{
templateUrl:'edit.html',
controller:'myAppCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
}])
But its not working. Please help me .
below is my part of html
<body ng-controller="myAppCtrl">
<div ng-view>
<script type="text/ng-template" id="add.html">
<div>
<input type="text" ng-model="$storage.myname"/>
<input type="text" ng-model="$storage.myid"/>
<input type="number" ng-model="$storage.mynumber"/>
<button ng-click="submit();"> submit </button>
</div>
</script>
</div>
You are confusing a couple of things:
The controller that you defined in your body (ng-controller="my AppController") is also defined as controller for the route. I suspect you want one or the other but not both.
Your script tag containing the template is inside the div that it will replace (<div ng-view>). The ng-view div should be empty (<div ng-view></div>)and the template defined outside of it, possibly in the header.
I looked through your code, got solution for your routing here is working fiddle
Fiddle
Here is code
//html
<div ng-app="app">
<div ng-controller="MainCntl">
Choose:
add |
Edit |
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
</div>
<script type="text/ng-template" id="add.html">
Add
</script>
<script type="text/ng-template" id="edit.html">
Edit
</script>
</div>
//app.js
var myApp = angular.module('app', [], function($routeProvider, $locationProvider) {
$routeProvider
.when('/add', {
templateUrl: 'add.html',
controller: MainCntl
})
.when('/edit', {
templateUrl: 'edit.html',
controller: MainCntl,
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
function MainCntl($scope, $route, $routeParams, $location) {
}
I have been leaning AngularJS from e-book of Dan Wahlin. There author tried to explain about Modules, Route and Factories from the page 53. Then, I wrote the code in index.html as:
<div class="container" data-ng-app="demoApp">
<div>
<h3>Adding Module Configuration and Routing</h3>
<!-- ng-view handles loading partials into it based
upon routes -->
<div data-ng-view=""></div>
</div>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: urlBase + 'View1.html'
})
//Define a route that has a route parameter in it (:customerID)
.when('/view2',
{
controller: 'SimpleController',
templateUrl: urlBase + 'View2.html'
})
.otherwise({ redirectTo: '/View1' });
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
});
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
</script>
Then I created two html pages - View1.html and View2.html and in the View1.html, I wrote:
<div class="container">
<h3>View 1</h3>
Name<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
<br />Customer Name<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
<br />Customer City<br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer</button>
<br />
View 2
</div>
When I browse as http://localhost/angular/index.html#/view1 , I do not see anything that's mean no output. I do not understand actually where I did wrong.
The biggest issue here is that you are not including the routing module, which is required since Angular 1.2+
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', ['ngRoute']);
//Snip...
</script>
As mentioned by goutham in the comments, you also need to define urlBase which you do not appear to do anywhere.
Because JavaScript does type coercion for string concatenation, you are going to end up with the word 'undefined' appended to your templateUrl.
console.log(undefined + "view1.html"); // 'undefinedview1.html'
I'm unsure if this is a repeat but I honestly can't seem to solve this error. I've been following AngularJS Fundamentals In 60-ish Minutes. It works well till I get to routing. I keep getting the uncaught error: No module and an uncaught syntaxerror: unexpected token (when i check the chrome console). It doesn't seem like the routes are working properly as view1 isn't accessed after i access UsingDirectives.html.
UsingDirectives.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html data-ng-app="demoApp">
<head>
<title>Using angular contoller</title>
</head>
<body>
<div>
<!--Placeholder for views -->
<data-ng-view></data-ng-view>
</div>
<script src="lib/angular.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'partials/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'partials/view2.html'
})
.otherwise({redirectTo: '/'});
});
demoApp.controller('SimpleController', function($scope)){
$scope.customers = [
{ name: 'John Smith', city: 'Phoenix'},
{ name: 'John Doe', city: 'New York'},
{ name: 'Jane Smith', city: 'San Fran'}
];
$scope.addCustomer = function() {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
}
</script>
</body>
</html>
view1.html (it is in the folder called partials):
<div class='container">
<h2>View 1</h2>
Name:
<br />
<input type ="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name">{{cust.name}} - {{cust.city}}
</ul>
<br />
Customer Name:<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
Customer City:<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
<button data-ng-click="addCustomer()"> Add Customer </button>
<br />
view 2
</div>
I'm using eclipse
function($scope)){
^--- there should only be one parenthesis here