this is home.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>SPM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common.css" />
<link rel="stylesheet" type="text/css" href="../js/treeview/css/angular.treeview.css">
<script src="../js/jquery/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="../js/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/treeview/angular.treeview.min.js"></script>
<script type="text/javascript" src="../js/AJcontrollers/spmControllers.js"></script>
<script type='text/javascript'>//<![CDATA[
//angular module
'use strict';
alert("1");
var myApp = angular.module('myApp', ['angularTreeview','ngLoadScript']);
myApp.controller('commonController', ['$scope', '$http', function($scope, $http) {
$scope.menus = [
{ link : '/summary', treeState : '' , url: 'body.html'},
{ link : '/indicator', treeState : '' , url: 'manageHierarchy.html'}
];
$scope.menu = $scope.menus[0];
}]);
</script>
</head>
<body ng-controller="commonController">
<div>
<div ng-include="'head.html'"></div>
</div>
<!-- footer -->
<footer class="footer">
<div ng-include="'footer.html'"></div>
</footer>
<!-- footer -->
</body>
</html>
and
head.html is
<script type='text/javascript'>
myApp.controller('headController', ['$scope', '$http', function($scope, $http) {
$scope.change = function (param){
alert(param);
};
}]);
</script>
<div ng-controller="headController">
details......
</div>
use angularjs version 1.3.7
problem is 'can't find headController'
in my code what shoud i do ?
can i change my angular version?
1.2.X version can allow function headController($scope){ .....};
but 1.3.7 not work
what can i do ?
This is a know issue that has been reported.
https://github.com/angular/angular.js/issues/3756
https://gist.github.com/endorama/7369006
Long story short, the script tag is a special little flower and angular does not treat it as such. If you include jquery before you include angular this issue will resolve itself. Otherwise you can do the script lazy loading technique that the github links recommend.
Or just move the script tag from head.html and put it on home.html since it will always be needed. (Disclaimer: I would not do this for an app of any size and complexity, but for something small it is the easiest solution. Of course creating js files and including them via seperate scripts would be best.)
Related
I have two simple files: leads.html and leadsController.js. I want to have leadsController.js as a linked javaScript file in leads.html. When I link it using the following code <script src = "leadsController.js"></script> in my leads.html ... leads.html does not render properly.
However, when I include the contents of leadsController.js as a part of the code of leads.html it works.
Am I not linking the .js file correctly?
Below is what works and what doesn't.
I want this to work when connected to leadsController.js
Yes ... it's in the same directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script src = "leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js looks like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
This works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try absolute uri of the script file. eg if ur script is in /scripts folder then
src="~/scripts/leadsController.js" that should work.
Try <script src = "./leadsController.js"></script>
UPDATE: typo. I didn't upload the file to the server ... facepalm. Thanks all for your suggestions as they lead me to figure that out in the first place.
I have this index.html page:
<html>
<head ng-app="myApp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App/title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
index2
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
And this is my app.js script:
'use strict';
var myApp = angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/index2', {
templateUrl: 'views/index2.html'
})
.otherwise({redirectTo: '/views/index2.html'});
});
myApp.controller('mainController', function ($scope) {
});
And my views/index2.html is contains only single 123 element.
When I'm clicking link on my index.html, nothing happens, no routing.
What I'm doung wrong?
upd: I run it from IntelliJ IDEA so it's nothing about webserver is missing ,I think.
You have ng-app directive applied to your head tag:
<head ng-app="myApp">
This means that ng-app will apply to head tag only. Instead you need to move it to your html tag:
<html ng-app="myApp">
I am getting the following error in my angular application: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined. My JS and HTML are below. This is actually a part of an ionic/cordova project, but here is a simplified jsfiddle in which I encounter the same problem.
My JS:
var app = angular.module('TourneyTime', ['ionic']);
app.controller = ('HomeController', function($scope) {
$scope.players = "testing";
});
And here is my HTML:
<html ng-app="TourneyTime">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World!</title>
<link href="bower_components/ionic/lib/css/ionic.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="bower_components/ionic/lib/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="HomeController">
<div class="app">
<h1>Apache Cordova</h1>
<h1>{{players}}</h1>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="bower_components/jquery/dist/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
What is causing this error? I was planning on using $stateProvider and $urlRouterProvider but tried this simple example with an in-line ng-controller attribute first and encountered this error. I think I'm using the correct syntax but please correct me if I am wrong.
Thank you very much for your time. Let me know if you need any additional information or if I am being unclear.
controller() is itself a function to be called, not a property to be assigned as you're doing.
Try this instead:
var app = angular.module('TourneyTime', ['ionic']);
app.controller('HomeController', function($scope) {
$scope.players = "testing";
});
Update your code to
app.controller('HomeController', function($scope) {
$scope.players = "testing";
});
Correct code should be:
var app = angular.module('TourneyTime', ['ionic']);
app.controller('HomeController', function($scope){
//code
});
Working Fiddle
I am trying to send the value from a $scope to a front end. That is a URL from google embade. But it seems like its throwing some error.
Here i am attaching a error screenshot.
And here is how my controller looks like
var module = angular.module('app', ['onsen']);
module.controller('ListingMapCtrl', function($scope, $http, $rootScope) {
ons.ready(function() {
$scope.mapLocation="https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong;
});
});
And here is i am calling it:
<iframe ng-src="{{mapLocation}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>
Do anyone else had the same problem? Any way to rectify the problem?
Here is how my HTML Head tag looks like
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Come To Woodstock</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" type="text/css" href="styles/custom.css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="lib/onsen/js/angular/angular-sanatize.min.js"></script> //Script we want to include
<script type="text/javascript" src="js/custom.js"></script>
</head>
You need to mark the URL as safe first, first inject ngSanitize into your app and include it in your html (<script src="angular-sanatize.min.js">), and add $sce to your controller. From there you can use trustAsResourceUrl on your url and use that in your ng-src.
JS
var module = angular.module('app', ['onsen', 'ngSanitize']);
module.controller('ListingMapCtrl', function($scope, $http, $rootScope, $sce) {
ons.ready(function() {
$scope.mapLocation = "https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong;
$scope.mapLocationURL = $sce.trustAsResourceUrl($scope.mapLocation);
});
});
HTML
<iframe ng-src="{{mapLocationURL}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>
I am learning AngularJS and trying to test routes. I am wondering if Plunker supports this so that I can navigate different pages.
*Clicking "Log in" returns Preview does not exist or has expired. in the View
Plunker Demo
HTML
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8" />
<title>Into to Angular.js</title>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12">
<h1>Intro to Angular</h1>
<div id="view" ng-view></div>
</div>
</div>
<button class="btn" onclick="location.href = '/login.html'">Login Page</button>
</body>
</html>
JS
var app = angular.module("app", []).config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
});
});
app.controller('LoginController', function () {
});
Yes, it is possible to use the client-side navigation in the plunker.
Example plunker: http://plnkr.co/edit/XH8yfhvbFpeP4l0EmJ8S?p=preview
Instead of modifying the location.href yourself, you have to use $location.path() or just use a simple a tag like this:
Login
In order to use the $routeProvider, you have to include the ngRoute module file:
<script src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
And put 'ngRoute' as a depencendy of the app module:
var app = angular.module("app", ['ngRoute'])