I'm creating a simpleApp using angularJS, unfortunately I have no idea about why it keeps showing blank. I guess AngularJS has failed to glue my controller & view.
Index.html
<!DOCTYPE html>
<html data-ng-app="simpleApp">
<head>
</head>
<body>
<div data-ng-view="">
</div>
<script src="/app/controllers/controllers.js"></script>
<script src="/app/services/customerService.js"></script>
<script src="/app/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>
</html>
App.js
var app = angular.module("simpleApp", []);
app.config(function($routeProvider) {
$routeProvider
.when("/", { controller: "simpleController", templateUrl: "/app/partials/view1.html" })
.when("/view2", { controller: "simpleController", templateUrl: "/app/partials/view2.html" })
.otherwise({ redirectTo: "/" });
});
Controllers.js
app.controller("simpleController", function($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
View1.html
<div>
<input type="text" data-ng-model="filter.name"/>
<ul>
<li data-ng-repeat="cust in customers | filter: filter.name | orderBy: 'Name'">
{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}
</li>
</ul>
<br/>
Customer Name:
<br/>
<input type="text" data-ng-model="newCustomer.Name"/>
<input type="text" data-ng-model="newCustomer.City"/>
<br/>
<input type="button" data-ng-click="addNewCustomer"/>
View 2
</div>
View2.html
<div>
<ul>
<li data-ng-repeat="cust in customers">
{{ cust.Name | lowercase }} - {{ cust.City | upppercase }}
</li>
</ul>
</div>
any idea?
The ng-route module is not part of the core angular.js file, you need to include it separately. Also the order of js files need to be changed
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
<script src="/app/app.js"></script>
<script src="/app/controllers/controllers.js"></script>
<script src="/app/services/customerService.js"></script>
then
var app = angular.module("simpleApp", ['ngRoute']);
Also you have got the filter name uppercase wrong
{{ cust.Name | lowercase }} - {{ cust.City | uppercase }}
Demo: Fiddle
I believe you're missing a reference to the controller on your index.
Something like:
<body ng-controller="simpleController">
Should get your index page going.
Your routing configuration looks fine, but those routes are not affecting the actual index page. Those routes would load your views into an ng-view directive.
it was the path issue. I did miss "." when referencing to all javascript in the index.html file
The following code snippet should fix the issue
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
<script src="./app/app.js"></script>
<script src="./app/controllers/controllers.js"></script>
<script src="./app/services/customerService.js"></script>
Related
I am getting started with Angular routes. When I define the angular route for someNameController by putting its code into a controllers file and putting the html into a html file, the controller does not seem to bind well with the html. However, it is working correctly with my other controllers.
Links I have tried:
ngRoute not working. is there something i am doing wrong
angularjs ngRoute not working
https://docs.angularjs.org/error/ng/areq?p0=controllers%2FsomeNameController&p1=not%20a%20function,%20got%20undefined
index.html
<!DOCTYPE HTML>
<html>
<head>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
<script src="controllers/someNameController.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<div ng-app="someApp">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
someCustomersView.html
<div>
<h2>
Hello, world!
</h2>
<p>
{{ desc }}
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
<input type="text" class="form-control" ng-model="someName"/>
<br>
<p>{{ someName | uppercase }}</p>
<ul ng-repeat="customer in customers">
<li class="list-group-item">{{ customer | lowercase }}</li>
</ul>
</div>
someNameController.js
someApp.controller("someNameController", function($scope){
$scope.customers = ["Customer2", "Customer3", "Customer4", "Customer5"]
})
I made a mistake while declaring routes in config.js file.
I was assigning directory while assigning routes even after including the scripts for controllers in the html along with the directory. I was doing this in config.js:
someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
$routeProvider.when("/showSomeButtonsGroup", {
templateUrl : "views/view3.html",
controller : "controllers/page67Controller"
})
.when("/", {
templateUrl : "views/someCustomersView.html",
controller : "someNameController"
})
}])
instead of doing like this:
someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
$routeProvider.when("/showSomeButtonsGroup", {
templateUrl : "views/view3.html",
controller : "page67Controller"
})
.when("/", {
templateUrl : "views/someCustomersView.html",
controller : "someNameController"
})
}])
So quick question I've been looking at this code for awhile but cannot find why, it just gives me the output on the page
Partials/View1.html
I'm not trying to just post here whenever I run into some small issue but this has been baffling me for awhile now, and I get no errors on the console. I run the code from http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview, mentioned on another post and it works fine, but I don't get the right output from this. The following is the index.html (the main page)
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
</head>
<body>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="scripts.js"></script>
</body>
My script look likes:
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
template: 'Partials/View1.html'
})
.when('/partial2',
{
controller: 'SimpleController',
template: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/'});
} );
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Phoenix'},
{name: 'Jane Doe', city: 'New York'},
{name: 'John Doe', city: 'San Francisco'}
];
$scope.addCustomer = function() {
$scope.customers.push({
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
}
});
And I don't get what is supposed to be shown from the view1.html, I just get what I showed up above. This is the code
<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 | orderBy: 'city'">{{ cust.name }} - {{ cust.city }}</li>
</ul>
<br>
Customer name: <br>
<input type="text" ng-model="newCustomer.name">
Customer city: <br>
<input type="text" ng-model="newCustomer.city">
<br>
<button ng-click="addCustomer()">Add Customer</button>
<br>
View 2
</div>
you should be using templateUrl instead of template:
.when('/partial2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
I am learning Angular and adding a controller to my module only works when all the code is inline on the page. If I replace it with <script src="myModuleFile.js"></script> it fails with
"Error: [$injector:unpr]
http://errors.angularjs.org/1.3.11/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20personController
var app = angular.module('app', [])
.config([function(injectables){
console.log('configuring app');
}]).run([function(injectables){
console.log('running app');
}]).controller("personController", function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="web/stylesheets/app.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<!-- wont work if I include it this way -->
<script src="web/js/app.min.js"></script>
<!-- but works if I put it in here -->
<script></script>
</head>
<body>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"><hr />
<h1>Hello {{ yourName }}!</h1>
<div ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
<p>My first expression: {{ 5 + 5 }}</p>
<div ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</body>
</html>
As Claies mentioned in the comments, the error message looks like it is trying to find a provider for a dependency "a", which is probably a result of minification.
If you do like:
angular.module(..).controller("SomeCtrl", function($scope){});
It might minify $scope to just a. So instead you should use:
angular.module(..).controller("SomeCtrl", ["$scope", function($scope){}]);
Because the string will not be minified, Angular will know which dependency is which. Another way would be to use $injector of course, as Claies also mentioned.
I am trying to walk through an Angular tutorial and having trouble with some basics.
I have the following directory structure:
index.html
angular.min.js
angular-route.js
app
views
customers.html
orders.html
The files in app/views/ folder are templates. In index.html, I have the following
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="customersApp">
<head>
<meta charset="utf-8" />
<title>Angular Test</title>
</head>
<body>
<div ng-view></div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script>
var app = angular.module('customersApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.when('/orders',
{
controller: 'OrdersController',
templateUrl: 'app/views/orders.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('CustomersController', function ($scope) {
$scope.customers = [
{ "id": 1, "name": 'Ted', "total": 5.994 },
{ "id": 2, "name": 'Michelle', "total": 2.994 }
];
});
app.controller('OrdersController', function ($scope) {
$scope.customerId = 5;
});
</script>
</body>
</html>
In customers.html, I have the following:
<div ng-controller="CustomersController">
Search:
<input type="text" ng-model="searchText" />
{{ searchText }}
<h3>Customers: </h3>
<table>
<tr ng-repeat="cust in customers | filter:searchText">
<!-- <td>{{ cust.id }}</td>-->
<td>{{ cust.name }}</td>
<td>{{ cust.total | currency }}</td>
</tr>
</table>
</div>
Given that I have <div ng-view></div> in index.html, I would thing that Angular would correctly route me to the customers.html template, but it displays an empty screen.
I have 2 questions:
Why won't my template display? Am I missing something simple?
How do I debug this problem? I've looked in the F12 tools and see no errors under console. I've stepped through the code and there are no errors.
P.S. I know the directory structure is not optimal.
My module isn't loading, and I can't figure out why. Could someone help me to find out what I am doing wrong?
The following is my HTML in a file named index.html:
<html ng-app="demoApp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
<script type="text/javascript" src="_Script.js"></script>
<script src="angular.min.js"></script>
</head>
<body>
<!-- Get name out of array with controller using a module-->
<h3>Get names out of an array with controller using a module:</h3>
<div class ="container" ng-controller="SimpleController">
<input type="text" ng-model="search" /> {{ search }}
<ul>
<li ng-repeat="naam in namen | filter:search" >{{ naam }}</li>
</ul>
</div>
</body>
</html>
And this is the Javascript in a file named _Script.js:
var demoApp = angular.module('demoApp', []);
function SimpleController($scope) {
$scope.namen = [
'John',
'Will',
'Alex'
];
}
demoApp.controller('SimpleController', SimpleController);
I've looked for everything, so maybe it is simple. But I can't find it and got stuck with it.
Regards,
You're currently loading your _script.js first, and angular JS second. If you reorder them your script should work: