My angular app works locally (html only) but fails once deployed onto the server. No console error. No 404 errors. Basically...the UI doesn't render. The batarang extension says "module was created but never loaded"...yet when I run my app on localhost it doesn't show that message in Batarang.
I've researched the other similar issues with that issue but none of the solutions match my issue where it only works on localhost and not the server...
var ll_app = angular.module("liveLetter", []);
ll_app.service("ExportService", function()
{
this.export = function(format)
{
//code
};
});
ll_app.controller("MenuController", ["$scope", "$rootScope", "$sce", "ExportService", function($scope, $rootScope, $sce, ExportService)
{
//code
}]);
ll_app.controller("DraftController", ["$scope", "$rootScope", function($scope, $rootScope)
{
//code
}]);
Html....
<!DOCTYPE html>
<html>
<head>
<title>
Live Letter
</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./css/bootstrap-dialog.min.css" />
<link rel="stylesheet" type="text/css" href="./css/app.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="./js/app_kwikies.js"></script>
<script src="./js/angular/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="./js/bootstrap-dialog.min.js"></script>
<script src="./js/app.js"></script>
</head>
<body ng-app="liveLetter">
<div id="main_nav" ng-controller="MenuController" ng-class="loading ? 'default' : 'half_width'">
<p id="header_txt">{{ shuffled_text }}</p>
<div id="menu_buttons" ng-show="!loading">
<div class="menu_icon" ng-repeat="icon in icons">
<span class="symbola" ng-bind-html="icon.html" title="{{icon.title}}" ng-class="active_key === icon.key ? 'active_icon' : 'default_icon'" ng-click="icon.click_fn($event)"></span>
</div>
</div>
<span id="email" ng-show="!loading">rnirnber#gmail.com</span>
</div>
<div ng-controller="DraftController">
<div id="editor" ng-if="editable" contenteditable="true" ng-style="text_color_css">
{{content}}
</div>
<div id="rgb_inputs" ng-if="editable" style="display: block">
<input value="{{red}}" ng-blur="update_rgb(0, $event)" type="number" step="5" min="0" max="255" />
<input value="{{green}}" ng-blur="update_rgb(1, $event)" type="number" step="5" min="0" max="255"/>
<input value="{{blue}}" ng-blur="update_rgb(2, $event)" type="number" step="5" min="0" max="255" />
</div>
</div>
</body>
</html>
Related
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
Having issues getting a simple filter to work for an album selection app i'm building for experience using jsonplaceholderdata. I tried to set ng-model to an expression and filtering by that expression but nothing changes when i enter text into my input bar. Unsure as to what I'm missing.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="album.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="album.css">
</head>
<body>
<div class="bar">
<input type="text" class="search" ng-model="q" placeholder="Enter your search terms" />
<button ng-click="search(q)">Search</button>
</div>
<div ng-app="myApp" ng-controller="AlbumCtrl">
<div ng-click="showme = !showme" ng-init="count=0" ng-repeat="album in albumData|filter:q" id="thumbWrapper">
<h1>{{album.id}}</h1>
<p>{{album.title}}</p>
<div id="thumbList"ng-show="showme"class="albumContent">
<ul ng-controller="PhotoCtrl" id="thumbList">
<li ng-repeat="photo in photoData" ng-if="album.userId == photo.albumId">
<img ng-src={{photo.url}}>
</li>
</ul>
</div>
</div>
</div>
This is my angular js code:
var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function ($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/albums").then(function(response) {
$scope.albumData = response.data;
console.log($scope.albumData);
});
});
app.controller('PhotoCtrl', function($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/photos").then(function(response) {
$scope.photoData = response.data;
// console.log($scope.photoData);
});
});
Any help is much appreciated.
You don't need to use a controller function. Because your q is already on the $scope, it will work as soon as you start typing in the input box.
Your controller is outside of the scope of the 'q' scope variable though.
I am playing with ng-input-tag and wanted to add bootstrap class to the input element of html so as to get its particular bootstrap class styles, but its not working as expected.
Below is the code:
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<tags-input ng-model="tags" class="form-control"></tags-input>
</div>
</div>
So i hope you ran the code and found that i am unable to get bootstrap form-control class style for directive.
Here is Plunker link : https://plnkr.co/edit/jZlAsJ?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<script>
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput"> input</label>
<tags-input ng-model="tags"></tags-input>
</div>
</div>
</body>
</html>
See this plunker ... I've solved this for you ( you may need to modify the styling a bit).
https://plnkr.co/edit/sKxMOLWoDPtYNqE8hunS?p=preview
You need to add jquery in your code.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Bootstrap js will need jquery to run. Please keep in mind that you have added jquery (above script) before bootstrap.js (watch my code carefully, review the sequel).
AngularJS controller not a function in IBM MobileFirst is what I am getting an error. I went through many similar questions being ask on Stack Overflow but nothing helped me.
Error Print Screen
// **************** app.js ***************
var app = angular.module('myApp',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
});
// **************** login.js ***************
app.controller('loginController',function($scope){
$scope.login = function(){
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
console.log($scope.userName, $scope.password);
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
WL.Client.invokeProcedure($scope.loginProcedure, function(){
onSuccess: loginSuccess,
onFailure: loginFailure
});
$scope.loginSuccess = function()
{
alert('success');
};
$scope.loginFailure = function()
{
alert('failed');
};
}
});
<!-- INDEX.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AB</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body ng-app="myApp">
<!--application UI goes here-->
<div id="view" ui-view></div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="library/jquery.min.js"></script>
<script src="library/angular.1.4.9.js"></script>
<script src="library/angular-ui-router.min.js"></script>
<script src="library/bootstrap.min.js"></script>
<script src="controller/app.js"></script>
<script src="controller/login.js"></script>
</body>
</html>
<!-- Login.html -->
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
<!-- Login Box Start -->
<div class="panel panel-primary">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-group" name="lgForm">
<input type="text" class="form-control" id="usrName" ng-modal="usrName" required />
<input type="password" class="form-control" id="pass" ng-modal="pass" required />
<input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
</form>
</div>
</div>
<!-- Login Box End -->
<!-- error Modal start -->
<div class="modal" role="modal" id="errorPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Error</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- error Modal End -->
</div>
You are specifying loginController in your html as well as in your route configuration. I'm not certain that this is the cause of the problem, but doing both is unnecessary. Remove one of them.
In other words, eliminate controller: 'loginController' from below
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
or eliminate: ng-controller="loginController" from:
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
Also, unrelated, but I doubt that these two lines:
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
do what you think. The purpose of angular.element is to wrap elements as jquery elements. I suspect you want to use document.getElementById here to get references to the items. However, you're using ngModel here, so none of this should be necessary if you use consistent spelling. (In one place you have userName and in another usrName.)
issue was wrong spelling of adapter
/* wrong one */
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
/*write one */
$scope.loginProcedure ={
procedure:'login',
adapter:'SQL',
parameters:[$scope.userName, $scope.password]
};
I'm trying to make a working example using Firebase to sync data between an Angular app and Polymer on the same file. I'm using the firebase-element from Polymer
Is it possible? I've have both apps in their own sections so Angular doesn't try to hijack Polymer's binding but I'm not getting data on the Polymer side or throwing any useful errors.
Appreciate any attention. Thank you. Here's the Plnkr.
<!DOCTYPE html>
<html>
<head>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="firebase#1.0.x" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase-debug.js"></script>
<script data-require="angularfire#0.8.x" data-semver="0.8.0" src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<script data-require="firebase-simple-login#1.6.x" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="import" href="firebase-element.html" />
</head>
<body>
<section ng-app="component-angular">
<div ng-controller="MainCtrl">
<h2>Data in Angular</h2>
{{data}}
<h3>
<input ng-model="new.data" placeholder="" />
<button ng-click="addData(new.data)">Add New Data</button>
</h3>
</div>
</section>
<section>
<div>
<firebase-element id="base" location="https://tezt.firebaseio.com/web-components" data="{{data}}" keys="{{keys}}"></firebase-element>
<h3>My Firebase Data</h3>
<template repeat="{{key in keys}}">
<p>{{key}}: {{data[key]}}</p>
</template>
</div>
</section>
<script>
var app = angular.module('component-angular', ['firebase'])
.controller('MainCtrl', function($scope, $firebase, Firebase){
var fb = new Firebase("https://tezt.firebaseio.com/web-components");
var fbSync = $firebase(fb);
$scope.data = fbSync.$asObject();
$scope.addData = function(newData){
fbSync.$push(newData);
}
});
</script>
</body>
</html>