I am beginning in the world of AngularJS.
I have created a small app which should pull data from an API with some dummy values. The API works and gives the following JSON(typing /api/employees/):
[{"Id":1,"FirstName":"George","LastName":"Lucas"},{"Id":2,"FirstName":"Peter","LastName":"Jackson"},{"Id":3,"FirstName":"Christopher","LastName":"Nolan"}]
To consume this I have created the following:
(function () {
'use strict';
config.$inject = ['$routeProvider', '$locationProvider'];
angular.module('empApp', [
'ngRoute', 'employeesServices'
]).config(config);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
templateUrl: '/Views/test.html',
controller: 'TestCtrl'
})
.when('/', {
templateUrl: '/Views/list.html',
cntroller:'EmployeeListController'
})
.otherwise({
redirectTo: '/'
});
//$locationProvider.html5Mode(true);
}
angular.module('empApp')
.controller('TestCtrl', TestCtrl);
// Test Contoller - ngView
TestCtrl.$inject = ['$scope'];
function TestCtrl($scope) {
$scope.model = {
message: "This is my app!!!"
};
};
// Employee List Controller
EmployeeListController.$inject = ['$scope', 'Employee'];
function EmployeeListController($scope, Employee) {
$scope.employees = Employee.query();
};
// Employees Service
angular
.module('employeesServices', ['ngResource'])
.factory('Employee', Employee);
Employee.$inject = ['$resource'];
function Employee($resource) {
return $resource('/api/employees/:id');
};})();
I haven't seprated the code into separate files at this time but do intend to. Please also give any advice re naming conventions etc any help is appreciated
I have the following partial html file:
<div>
<h1>List Employees</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>
edit
delete
</td>
<td>{{emp.FirstName}}</td>
<td>{{emp.LastName}}</td>
</tr>
</tbody>
</table>
<p>
Add New Employee
</p></div>
the index.html file contains:
<!DOCTYPE html>
<html ng-app="empApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello Angular JS</h1>
What is 2+2 ?
<br /><br />
Answer = {{2+2}}
<br /><br />
<ng-view></ng-view>
</body>
</html>
Angular works as the expression confirms a 4. But I get no data from the API.
Please help!!
I noticed you have a typo in the routes definition( cntroller:'EmployeeListController').
(and I don't have enough reputation for comments)
Exact. Probably your EmployeeListController was never instantiated by wrong declaration "cntroller" and your employees variable have undefined value.
Well after a lot of reading and web pages I realised that I had not defined the controller as available to the module so my code should read:
angular.module('empApp')
.controller('TestCtrl', TestCtrl)
.controller('EmployeeListController', EmployeeListController);
Thanks for looking!
Related
I have read posts related to the same issue and cross verified my code but the problem persists.
Following is my index.html file
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<link href="Scripts/styles.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<table style="font-family:Arial">
<tr>
<td class="header" colspan="2" style="text-align:center">Website Header</td>
</tr>
<tr>
<td class="leftMenu">
Home<br/>
Courses<br />
Students<br />
</td>
<td class="mainContent">
<div><ng-view></ng-view></div>
</td>
</tr>
</table>
</body>
</html>
script.js file
/// <reference path="angular-route.js" />
/// <reference path="angular.js" />
var myModule = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller: "homecontroller",
})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursescontroller",
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentscontroller",
})
.controller("homeController", function ($scope) {
$scope.message = "HomePage";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["c","c++","c#"];
})
.controller("studentsController", function ($scope) {
$scope.students = [{ name: "Chandu", id: 1, gender: "female" }, { name: "Suma", id: 2, gender: "female" }, { name: "Arin", id: 3, gender: "male" }];
})
})
I have defined home, courses and students html files. After initial loading, when I click on any of the links for eg. home, /#/home is getting appended to the url but the partial template is not loading.
At first, I did not get any console errors also. But now I am getting the following error even though the name of myModule is correctly used in both script.js and index.html files
Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule due to:
Error: [$injector:nomod] Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.9/$injector/nomod?p0=myModule
I very much appreciate any assistance to resolve my issue and help me find out where I am going wrong.
P.S: Index.html is in main directory and partial templates are in templates folder in main directory. And I am using version 1.5.9 of both angular.js and angular-route.js
you haven't added the module js file to your html page. You are only loading the angular libraries you need to add the script.js file after your angular libraries. The error is stating it can't find the module because it hasn't been loaded.
In the header you need to add the following
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/script.js"></script><!-- loading your module -->
<link href="Scripts/styles.css" rel="stylesheet" />
<meta charset="utf-8" />
You forgot to add the main js file. And,
Try change the code to this:
<td class="leftMenu">
Home<br/>
Courses<br />
Students<br />
</td>
This might solve the problem.
Checking out your code it looks like you forgot to include script.js in your html code. Please include that file
<script src="your-path/script.js"></script>
after
<script src="Scripts/angular-route.js"></script>
And yes another thing is you have got error in your script.js file too. Check out your code, all those controllers must be out of that config.
Example:
angular.module('module-name', [])
.config(function() {
//
})
.controller('controller-name', function() {
//
});
Your links are missing the hashPrefix '!'.
This prefix appears in the links to client-side routes, right after the hash (#) symbol and before the actual path (e.g. index.html#!/some/path).
Given your HTML where hashPrefix is added to the links:
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-route.js"></script>
<script src="script.js"></script>
<meta charset="utf-8" />
</head>
<body>
<table style="font-family:Arial">
<tr>
<td class="header" colspan="2" style="text-align:center">Website Header</td>
</tr>
<tr>
<td class="leftMenu">
Home<br/>
Students<br />
</td>
<td class="mainContent">
<div>
<ng-view></ng-view>
</div>
</td>
</tr>
</table>
<script type="text/ng-template" id="home.html">
Content of HOME template.
</script>
<script type="text/ng-template" id="students.html">
Content of STUDENTS template.
</script>
</body>
</html>
And your angular module:
var myModule = angular.module("myModule", ["ngRoute"])
.config(function ($locationProvider, $routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "homeController"
})
.when("/students", {
templateUrl: "students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
console.log('This is home controller');
})
.controller("studentsController", function ($scope) {
console.log('This is students controller');
});
It works.
In my app I have index.html where there is ng-view directive. Inside that directive I add information from main.html as defalut - it's a table of names and links. By clicking a link the content of ng-view updates and information about the particular link from link.htmlappears. Please, see my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head> ... </head>
<body ng-controller="myCtrl">
<h1>AngularJS</h1>
<ng-view></ng-view>
</body>
</html>
My main.js:
angular
.module('app', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main.html'
})
.when('/link/:id', {
templateUrl: 'partials/circle.html',
controller: 'linkCtrl'
})
.otherwise({
redirectTo: '/'
})
})
.controller('myCtrl', function($scope) {
$scope.obj = [
{name: "aaa", link: "000"},
{name: "bbb", link: "111"},
{name: "ccc", link: "222"}
];
$scope.clickFunc = function() {
alert('Im doubleclicked');
};
})
.controller('linkCtrl', function($scope, $routeParams) {
$scope.id = $scope.obj[$routeParams.id];
});
Here is my main.html:
<h2>Information</h2>
<table>
<thead>
<tr>
<td>Name</td>
<td>Link</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="link in obj">
<td>{{ link.name }}</td>
<td>{{ link.link }}</td>
</tr>
</tbody>
</table>
And here is link.html:
<p>Welcome to the new link {{ id }}</p>
Back to home
I also need to be able to double click the same link. The question is how to do that because adding ng-dblclick directive doesn't work. Is there any way to make it possible?
I've seen here a similar question but I didn't see the answer.
Thank you for your help in advance!
I have been trying to Export a table from a jsp page to Excel using AngularJs.
Will Angularjs not work in IE? and also getting this error SCRIPT5009: 'Node' is undefined
In Chrome and Firefox, the excel is getting opened only when i save it and not with open with option. The saved Excel is not proper. Trying to solve this for weeks.
Even tried using Jquery, but no luck.
Please suggest me a solution.Really grateful.
My jsp:
<html>
<head>
<script src="/Pulse/static/scripts/jquery-1.11.2.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
</head>
<body>
<div id="myCtrl" ng-app="myApp" ng-controller="myCtrl">
<table>
<tr><td>
<p ng-click="exportData()" id="myImg">Click here</p>
</td></tr>
</table>
<div id="exportable">
<table width="100%" id="myTable">
<thead>
<tr>
<th>Num</th>
<th>Sq</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
My angularjs:
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl',function($scope, $http) {
$scope.exportData = function() {
var blob = new Blob(
[ document.getElementById('myTable').innerHTML ],
{
type : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
window.saveAs(blob, "MyRep.xls");
}
});
</script>
i get this, when clicking on open with excel in firefox:
On opening the saved excel :
Can anyone please point out what i am doing wrong?
you can prube this:
var myApp = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngTouch', 'mgcrea.ngStrap']);myApp.controller('myCtrl',function($scope, $http,$timeout) {
$scope.exportData = function() {
$timeout(function () {
var blob = new Blob([ document.getElementById('myTable').innerHTML ],
{
type : "application/vnd.ms-excel"
});
saveAs(blob, "MyRep.xls");}, 2000);
}
});
i guess that run good in firefox
and i have this others scripts in my page where i use
<link href="~/Content/Controls/AngularStrap/libs.min.css" rel="stylesheet" /><script src="~/Content/Controls/AngularStrap/angular-strap.min.js"></script><script src="~/Content/Controls/AngularStrap/angular-strap.tpl.min.js"></script><script src="~/Content/Controls/FileSaver/FileSaver.js"></script>
I have been learning AngularJs and currently have an application that uses Apache Tiles. Prior to adding AngularJs to the application, I had a working piece of code inside my footer tile that calculated the current year that looks like this:
footer.html
<script type="text/javascript">
var year = new Date().getFullYear();
</script>
<tr ng-Controller="AppController">
<td>Created <script>document.write(year)</script>
</td>
</tr>
controller.js
var controllers = {};
controllers.AppController = ['$scope', function ($scope) {
$scope.currentYear = new Date().getFullYear();
}];
proxy.controller(controllers);
app.js
var proxy = angular.module('proxy',['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/index',{
templateUrl: 'search.jsp',
controller: 'AppController'
});
});
The footer now only shows "Created" on the index.html page. Is there a way with angular that I can successfully calculate the year? Why does the JS in this file stop working when AngularJs is added to the application?
Since you're using AngularJS, you can write the code like this:
<script type="text/javascript">
angular.module('app', []).controller('YearController', ['$scope', function ($scope) {
$scope.currentYear = new Date().getFullYear();
}]);
</script>
<table ng-app="app">
<tr ng-controller="YearController">
<td>
Created {{currentYear}}
</td>
</tr>
</table>
Edit: This is how it would look like if it was in it's own separate HTML and JavaScript files.
index.html:
<!DOCTYPE html >
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div ng-include="'footer.html'"></div>
</body>
</html>
footer.html:
<table>
<tr ng-controller="YearController">
<td>
Created {{currentYear}}
</td>
</tr>
</table>
app.js (better to have it's own separate file):
var app = angular.module('app', []);
var controllers = {};
controllers.YearController = ['$scope', function ($scope) {
$scope.currentYear = new Date().getFullYear();
}];
app.controller(controllers);
I learning AngularJS routing and can't seem to figure out why the 2nd when() on $routeProvider does not work.
index.html
<html lang="en" ng-app="myApp" class="no-js">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<div>
<ng-view></ng-view>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
'use strict';
// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
'ngRoute'
]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'partials/li.html', controller: 'MainCtrl'}).
when('/new', {templateUrl: 'partials/edit.html'}).
otherwise({redirectTo: "/"})
}]);
app.controller('MainCtrl', ['$scope', 'persons', function ($scope, persons) {
$scope.persons = persons
}]);
app.factory('persons', [function () {
var persons = [
{fname: "Dave", lname: "Thomas"},
{fname: "John", lname: "Smith"},
{fname: "Jason", lname: "Doe"},
{fname: "Stupid", lname: "Guy"},
];
return persons;
}]);
li.html ( for some reason, I cannot save this as list.html in WebStorm)
<table class="table table-striped" style="width: auto" >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<td><span class="glyphicon glyphicon-plus"></span></td>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr >
<td>{{person.fname}}</td>
<td>{{person.lname}}</td>
<td><span class="glyphicon glyphicon-edit"></span ></td>
</tr>
</tbody>
</table>
Whenever I click on plus icon, it throws me a 404 error. Even in the IDE, the 2nd when in app.js is of other color than the 1st one and the otherwise().
EDIT: Also help me with $locationProvider which throws this error when adding to app.config() - Error: [$location:nobase] $location in HTML5 mode requires a tag to be present!
You need to update from
href="/new"
to
href="#/new"