I have created a Dynamic web project in eclipse IDE. And converted it to angular JS project. I have successfully installed and configured Apache Tomcat 9.0 and I am able to access tomcat on localhost:8080
Below shown is my project directory structure...
When I am trying to run the application on apache server,I am getting error as shown below.........
Below is my code.
controller.js:
var app = angular.module("myApp", [" "]);
index.html:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Controller.js -->
<script src="controller.js"></script>
<body ng-app="myApp">
<div ng-view></div>
<h6>Sample Angular JS App</h6>
</body>
</html>
Related
I just finished an angular app and would like to deploy it to a web server. I'm actually looking for a free solution for now. I'm using
http-server to launch my app so I don't have any other setup such as grunt or yeoman. I thought I could upload the files to my apache server but it shows blank.
This is how my file directory look. index.html
<!doctype html>
<html lang="en" ng-app="musicSearch">
<head>
<meta charset="utf-8">
<title>Angular App</title>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/styles/style.less">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Styles -->
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
<script src="app.js"></script>
<script src="routes.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="directives.js"></script>
I want to run a simple Angular js code but I am not able to do it
in Cordova with Onsen ui
I am getting an error link below :
https://docs.angularjs.org/error/ng/areq?p0=HelloCtrl&p1=not%20a%20function,%20got%20undefined
I am referring this page :
https://onsen.io/blog/onsen-ui-tutorial-angularjs-essentials-for-using-onsen-ui-part-1/
Using Onsen 1
p1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
ons.bootstrap();
var myApp = angular.module('myApp',[]);
myApp.controller('HelloCtrl', function($scope){
$scope.name = "Onsen UI!";
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="HelloCtrl">
<input type="text" ng-model="name">
<p>Hello {{name}}</p>
</div>
</body>
</html>
Output :
Error :
Below is my Directory structure :
You will have to include jQuery in your project, this is what the error is all about.
Error: Bootstrap's Javascript requires jQuery
Also make sure to load jquery.js file before loading bootstrap
Solved It...
Actually when I installed jquery I copied only the jquery.js file from the jquery folder into my js folder but now I copied the whole jquery folder into the js folder and It executed successfully...
Thanks for your support guys.
I have simple add-in of loading SharePoint data on Outlook web add-in using ADAL.js, Angular.js & Office.js.
My add-in is of Task pane, When any user loads an appointment and select this add-in, it fetches data from SharePoint using ADAL js library using oAuth & REST API, and manipulates some values in new appointment form.
Here is the Guide link for Getting Started with adal.js and the Office 365 APIs.
Below is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>My O365 Add-In</title>
<link href="../Content/Office.css" rel="stylesheet" type="text/css" />
<link href="../Content/Custom.css" rel="stylesheet" type="text/css" />
<script src="//appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" type="application/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.js" type="application/javascript"></script>
<script src="../Scripts/adal.min.js" type="application/javascript"></script>
<script src="../Scripts/adal-angular.min.js" type="application/javascript"></script>
</head>
<body ng-app="OfficeApp">
<div ng-view></div>
<script src="Scripts/App.Module.js" type="application/javascript"></script>
<script src="Scripts/App.Routes.js" type="application/javascript"></script>
<script src="Scripts/Services/responseServices.js" type="application/javascript"></script>
<script src="Scripts/Controllers/addInController.js" type="application/javascript"></script>
</body>
</html>
Similar source can be found on GitHub here.
When I try to load the add-in for the first time it gives below error in office.js file, after first call, if I load that add-in again, it works properly.
Error is:
Value cannot be null. Parameter name: ConversationId
This issue is already logged on GitHub and tried all the possible solution. but nothing worked out for me.
Does anyone have encountered such error? I am very glad if you can help me on this.
Thanks in advance.
I've completed a course on AngularJs through codecademy. I followed the angular-seed steps to set up my own local environment to make my first app, but it appears angular is not initializing on my site. I cant even evaluate a simple expression such as {{3+2}} let alone pull scope values from the controller.
my first steps:
1. clone angular seed from git
2. npm install into directory
3. npm start
my code:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
and here is my module:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
controller:
myApp.controller('MainController', function($scope) {
}
];
});
Any help is greatly appreciated.
thanks
my console errors in chrome are :
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)
http://localhost:8000/app/js/app.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/MainController.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/listinginfo.js Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' 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.3.15/$injector/nomod?p0=myApp
at http://localhost:8000/app/bower_components/angular/angular.js:63:12
at http://localhost:8000/app/bower_components/angular/angular.js:1774:17
at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1698:38)
at module (http://localhost:8000/app/bower_components/angular/angular.js:1772:14)
at http://localhost:8000/app/bower_components/angular/angular.js:4115:22
at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20)
at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4099:5)
at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4025:11)
at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1452:20)
at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1473:12)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1473%3A12)
i figured cloning angular-seed and running npm install would setup everything correctly
It would be hard to tell without checking what errors are being thrown. Have you defined your controller though? Try adding a controller in your module like:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}])
and remove
<!-- Controllers -->
<script src="js/MainController.js"></script>
EDIT:
I tried to run your application without much overhead and it works. My files look something like this:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css"> -->
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<!-- <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
app.js
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
MainController.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
}])
I hope this helps.
Your web server may not have access to read the js files inside your bower_components/angular folder. This has happened to me when one time.
Also like the above comment look at your browser console to see what kind of errors you see. Is MainController defined?
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.