So I can't seem to get my controller to work when it is in a different file.
Right now I am just trying to do small test controller to see how angular works. Here are my files:
Here is my app.js
(function(angular) {
var AngularApp = angular.module('AngularApp', []);
})(window.angular);
Here is my controller file: TestController.js
(function(angular) {
var AngularApp = angular.module('AngularApp');
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
})(window.angular);
Here is my html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="" ng-app="AngularApp" ng-controller="TestController"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title ng-bind="appTitle"></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/assets/css/main.css">
<script src="/assets/libs/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/assets/libs/angular/angular.js"></script>
</head>
<body>
...
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/libs/jquery-1.11.2.min.js"><\/script>')</script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/app/app.js"></script>
<scirpt src="/app/components/home/TestController.js"></script>
</body>
</html>
Right now I am just trying to replace the title of the page. I have tried numerous different ways of doing this. Right now I have the js wrapped in immediately invoked functions, but I have tried with out that. I have tried making the module a global variable and just using that variable to define a controller. Ex:
App.js:
AngularApp = angular.module('AngularApp', []);
TestController.js:
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
I have also tried the dependencies with and without the array notation.
The controller seems to work fine when it is in the same file but I can't get it to work when it is in a seperate file. I always get the following error:
I am using angular version 1.4.8
Any help would be greatly appreciated!
Related
I m trying to add angular-schema-form to AngularJs Seed.
I followed the steps in angular-schema-form repository:
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute', 'schemaForm'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'FormController'
});
}])
.controller('FormController', function ($scope) {
$scope.schema = {
type: "object",
properties: {
name: {
type: "string",
minLength: 2,
title: "Name",
description: "Name or alias"
},
title: {
type: "string",
enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
});
view1.html
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<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/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[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 ng-view></div>
<div>Angular seed app: v<span app-version></span></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>
<script src="view1/view1.js"></script>
<script src="view2/view2.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>
</body>
</html>
I got the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.view1 due to:
Error: [$injector:modulerr] Failed to instantiate module schemaForm due to:
Error: [$injector:nomod] Module 'schemaForm' 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.6.8/$injector/nomod?p0=schemaForm
You are missing the references for the schemaForm, you need to add it above app.js
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
I am just starting on angular material, so I built a skeleton page with a toolbar, sidenav, and content.
Yet, when I try to toggle the sidenav with $mdSidenav's toggle(), it gives me the following error:
TypeError: $mdSidenav is not a function
Here's the HTML:
<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS Sandbox</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="mainCtrl" layout="row" layout-fill ng-cloak>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<md-sidenav id="sideNav" md-component-id="left" class="md-sidenav-left md-whiteframe-z2">
<md-toolbar id="sideNav-bar" layout="row"></md-toolbar>
<md-divider></md-divider>
</md-sidenav>
<div layout="column" flex layout-fill>
<md-toolbar layout="row" id="topBar" layout-align="left center" layout-padding>
<a class="fa-holders" ng-click="openSideNav('left')"><i class="fa fa-bars"></i></a>
<span layout="column" ng-bind="currentTitle"></span>
</md-toolbar>
<md-content id="content_wrapper" flex layout="row"></md-content>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
and the JS:
'use strict';
angular.module('myApp', [
'ngMaterial'
])
.config([function () {
}])
.controller('mainCtrl', ['$scope', function ($scope, $mdSidenav) {
$scope.soKai = 'soKai';
$scope.currentTitle = 'Maths';
$scope.appName = 'KaiAcademics';
$scope.openSideNav = function(componentId) {
$mdSidenav(componentId).toggle();
}
}])
;
Here's angular material's documentation. Am I missing anything?
You forgot to inject $mdSidenav.
.controller('mainCtrl', ['$scope', '$mdSidenav', function ($scope, $mdSidenav) {
...
}])
https://docs.angularjs.org/guide/di
Below is the code snippet that I am using but onbeforeunload event handler is never called.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Submit</title>
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="Link1" runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link id="Link2" runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<link rel="stylesheet" href="/Content/themes/ab1.css" media="screen">
<link rel="stylesheet" href="/Content/themes/ab2.css" />
<link rel="stylesheet" href="/Content/themes/ab3.css">
<link rel="stylesheet" href="/Content/themes/ab4.css">
<!-- LayerSlider styles -->
<link rel="stylesheet" href="/Content/themes/ab5.css">
<link rel="stylesheet" href="/Content/themes/ab6.css" id="coloroption">
<link rel="stylesheet" href="/Content/themes/ab7.css">
<link rel="stylesheet" type="text/css" media="screen" href="/Content/themes/ab8.css">
<link rel="stylesheet" href="/Content/themes/ab9.css" id="styleswitcher">
<script src="/Content/themes/Scripts/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="/Content/themes/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Content/themes/Scripts/jquery-ui.js"></script>
<!-- jQuery with jQuery Easing, and jQuery Transit JS -->
<%--<script src="layerslider/jQuery/jquery-easing-1.3.js"></script>
<script src="layerslider/jQuery/jquery-transit-modified.js"></script>--%>
<!-- LayerSlider from Kreatura Media with Transitions -->
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="/Content/themes/Scripts/combobox/dd.css" />
<script src="/Content/themes/Scripts/combobox/jquery.dd.js"></script>
<script type="text/javascript">
function fnCallUnload() {
debugger;
var xmlData = "<Root sMethodName='SaveState'>";
fnSetCommonDataToXMLVariable(xmlData);
xmlData += "</Root>";
CallServer(xmlData, "");
}
window.onbeforeunload = fnCallUnload;
</script>
</head>
I tried onbeforeunload event in the master page and calling a function of content page in the try catch. It does work smoothly there. But this page where I am trying to use onbeforeunload does not require master page. Its a stand alone page in the application. So, I guess there is some minor concept I am not aware of regarding the use of onbeforeunload.
Any help will be hugely appreciated.
Thanks
This should work, however unbeforeunload requires a string to be returned. If not it will not fire due to security reasons.
Add this as last line.
return "Do you want to quit?";
However this thread blames jQuery as culprit
window.onbeforeunload not firing
change
window.onbeforeunload = fnCallUnload;
to
window.addEventListener("beforeunload", fnCallUnload, false);
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I run the following in my browser I get two list items, but nothing is displayed within the two items. So the loop itself works but nothing is being pulled from my list.
I reedited my submission to show an accurate representation of my problem
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<!-- initial angular declaration -->
<body id="main" ng-app>
<div ng-controller ="EductationCtrl">
<ul class = "list-unstyled">
<li ng-repeat = "school in schools">
{{schools.name}}
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
Javascript
function EductationCtrl($scope) {
$scope.schools = [
{name: 'university', major: 'Computer Science'},
{name: 'College', major: 'Politcal Science and Finance'},
];
}
This is the end result:
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
You have a typo: {{peole.name}} should be {{people.name}}
Plunker Demo
Its a typo:
{{schools.name}}
to
{{school.name}}
i have a problem with some Events in PhoneGap. When i try to register an event-listener to the pause and backbutton event for an phonegap-app (build on PhoneGap-Build) the events aren't recognized.
My code looks like the following:
function onBackKeyDown() {
console.log("Back");
}
function onMenuKeyDown() {
console.log("Menu");
}
function pause() {
console.log("Menu");
}
function ready(){
console.log("ready");
document.addEventListener("pause", pause, false);
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
}
document.addEventListener("deviceready", ready, false);
If i run this app on a HTC Wildfire i can see in the logs, that the function ready is reached (the output is done). But if i hit the Back or search button or exit the app, then no other function is called.
Can anyone help me with this?
Thanks!
The rest of my code looks like the following (I just wrote a small example to be sure that there are no errors in my code...)
main.js:
function onBackKeyDown() {
console.log("Back");
alert("Back");
}
function onMenuKeyDown() {
console.log("Menu");
alert("Menu");
}
function onMenuSearch() {
console.log("onMenuSearch");
alert("onMenuSearch");
}
function pause() {
console.log("Menu");
alert("Pause");
}
function onResume(){
console.log("Resume");
alert("Resume");
}
function ready(){
alert("Ready");
console.log("ready");
document.addEventListener("pause", pause, false);
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
document.addEventListener("searchbutton", onMenuSearch, false);
document.addEventListener("resume", onResume,false);
}
document.addEventListener("deviceready", ready, false);
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/main.js"></script>
</body>
</html>
As I already said, I am using PhonegapBuild to build the application over several platforms, therfore i do not have the cordova script integrated in my application.
Thanks...
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/main.js"></script>
</body>
</html>