I am trying to set up a simple login screen. Why is this coming back blank?
index.html
<!DOCTYPE html>
<html >
<head>
<title>Joe Kleckler</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="kleckDev">
<div ui-view></div>
</body>
<script src="./app/angular.min.js"></script>
<script src="./app/ui.router.js"></script>
<script src="./app/kleckDev.js"></script>
<script src="./app/controllers/loginController.js"></script>
<script src="./app/controllers/realmController.js"></script>
<!--<script src="./app/bootstrap.min.js"></script>-->
<script type="text/javascript">
console.log("angular object", angular);
</script>
</html>
kleckDev.js
var app = angular.module('kleckDev', ["ui.router"]);
app.config(function($stateProvider) {
$stateProvider
.state("login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
.state("realm", {
url:"/realm",
controller: "RealmController",
templateUrl: "views/realm.html"
})
});
loginController.js
app.controller("LoginController", ['$scope', '$http', '$state', function($scope, $http, $state) {
$scope.registration = {
firstName: undefined,
lastName: undefined,
email: undefined,
username: undefined,
password: undefined,
checkPass: undefined
}
$scope.login = {
username: undefined,
password: undefined
}
$scope.registerUser = function() {
var data = {
firstName: $scope.registration.firstName,
lastName: $scope.registration.lastName,
email: $scope.registration.email,
username : $scope.registration.username,
password : $scope.registration.password,
checkPass : $scope.registration.checkPass,
access: 0
}
$http.post("php/register.php", data).success(function(response) {
console.log(response);
localStorage.setItem("user", JSON.stringify({user: response}));
$state.go("realm");
}).error(function(error) {
console.log(error);
});
};
$scope.loginUser = function() {
var data = {
username: $scope.login.username,
password: $scope.login.password
}
$http.post("php/login.php", data).success(function(response) {
console.log(response);
localStorage.setItem("user", JSON.stringify({user: response[0].username}));
$state.go("realm");
}).error(function(error) {
console.log(error);
});
}
}])
It was showing up less than an hour ago, and I tried to add something, but when I removed it cuz it broke stuff nothing will show now.
Your index.html file is already inside the app directory. Nothing works because it doesn't load angular or any of the specified files.
remove the ./app directory from all your script sources.
<script src="angular.min.js"></script>
<script src=".ui.router.js"></script>
<script src="controllers/loginController.js"></script>
<script src="controllers/realmController.js"></script>
<script src="kleckDev.js"></script>
And load the kleckDev.js file last.
Related
I'm trying to use Angular UI modal, but I keep getting an unknown provider error message: "Error: [$injector:unpr]".
I use custom build to minimize the overall size of the file. I have injected the ui dependency in the app when creating it. The build files are added to the index.html page.
//This is the app.js file
(function() {
angular.module('locatorApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationid', {
templateUrl: '/locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
angular
.module('locatorApp')
.config(['$routeProvider', '$locationProvider', config]);
})();
//This is the controller file
(function() {
angular
.module('locatorApp')
.controller('locationDetailCtrl', locationDetailCtrl);
/*Inject $routeParams service into controller to protect from minification*/
locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'locatorData'];
function locationDetailCtrl($routeParams, $uibModal, locatorData) {
var vm = this;
vm.locationid = $routeParams.locationid;
locatorData.locationById(vm.locationid)
.success(function(data) {
vm.data = {
location: data
};
vm.pageHeader = {
title: vm.data.location.name
};
})
.error(function(e) {
console.log(e);
});
vm.popupReviewForm = function() {
alert("Let's add a review");
};
}
})();
<!-- This is the index.html file-->
<!DOCTYPE html>
<html ng-app="locatorApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body ng-view>
<script src="/angular/angular.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>
</body>
</html>
//This is the locatorData service
(function() {
/*Data service for pulling data from the API*/
locatorData.$inject = ['$http'];
function locatorData($http) {
var locationByCoords = function(lat, lng) {
return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxdist=20');
};
var locationById = function(locationid) {
return $http.get('/api/locations/' + locationid);
};
return {
locationByCoords: locationByCoords,
locationById: locationById
};
};
angular
.module('locatorApp')
.service('locatorData', locatorData);
})();
you should use ng-view on a div inside <body>, so script tags will exist after route template is substituted. Then it would be better to reorganize order of script tags you are adding.
At first non-angular script files, then angular, then your sources
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/javascripts/validation.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/angular/angular.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
Then use $uibModal service that you've injected:
vm.popupReviewForm = function() {
$uibModal.open({
template: '...html',
//...config from docs
}).then(function(){console.log('closed successfully');})
.catch(function(){console.log('dismissed modal');});
};
Move your script tag either to below of head tag.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
// Scripts
</head>
or, outside the ng-view :
<body>
<div ng-view></div>
// scripts here
</body>
Ok, I've finally figured it out. The problem was using incompatible versions of Angular JS and Angular UI.
I didn't updated any of my .js files, yet my nested views are not displaying at all (even though they were before) and throw this error in console.
Why is it throwing the error and not displaying my nested views as it was originally?
angular version: 1.6.0-rc.0 (.min.js)
angular-ui-router version: v0.3.1 (.min.js)
app.js
'use strict';
var app = angular.module('app', ['ui.router','controllers','filters']);
app.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/');
// Initialize states
var homeState =
{
name:'home',
url:'/',
views:
{
'' : {templateUrl: 'partials/home.html'}, // App template that organizes the layout of the panels
'panel#home' : {templateUrl: 'partials/panel.html'} // Reusable panel template for multiple panels within app
}
};
// Register states
$stateProvider.state(homeState);
});
controller.js
'use strict';
var controllers = angular.module("controllers", []);
// Initialize controllers
controllers.controller('panelEvaluateController',function($scope)
{
$scope.header = 'Solve an Equation';
$scope.button = '<button>Solve</button>';
$scope.body = 'partials/panels/evaluate.html';
$scope.tooltip = 'Help';
});
controllers.controller('panelConvertController',function($scope)
{
$scope.header = 'Convert an Integer';
$scope.button = '<button>Convert</button>';
$scope.body = 'partials/panels/convert.html';
$scope.tooltip = 'Help convert';
$scope.bases =
[
{ value : 2 , name : 'Binary'},
{ value : 8 , name : 'Octal'},
{ value : 10 , name : 'Decimal'},
{ value : 16 , name : 'Hex'}
];
$scope.base =
[
{selected : 2},
{selected : 10}
];
});
controllers.controller('panelSolutionController',function($scope)
{
$scope.header = 'Solution';
$scope.button = '<div class="row"><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-left"></span></button></div><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-right"></span></button></div></div>';
$scope.body = 'templates/panels/solution.html';
$scope.tooltip = 'solve';
});
index.html
<!DOCTYPE html>
<html data-ng-app="app" lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Show Your Work</title>
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/specific.css">
</head>
<body>
<div id="header">
<div class="header-color-line"></div>
<div id="logo">Show Your Work</div>
</div>
<div class="row" id="view-container">
<div data-ui-view=""></div> <!-- displays home.html -->
</div>
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/js/app.js"></script>
<script type="text/javascript" src="resources/js/controllers.js"></script>
<script type="text/javascript" src="resources/js/filters.js"></script>
</body>
</html>
filters.js
'use strict';
var filters = angular.module("filters", []);
filters.filter('trusted', function($sce)
{
return function(val)
{
return $sce.trustAsHtml(val);
};
});
You need to update the ui-router version which should match with the angular version, Now the versions you have mentioned does not match.
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
I am noob to angular and Cordova. I am developing a cordova application. I have the following code:
app.js:
var myApp = angular.module('myApp', ['ngSanitize', 'ngAnimate', 'ngRoute']).
config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: '/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: '/login.html',
controller: 'loginController'
})
.when('/register', {
templateUrl: '/register.html',
controller: 'registerController'
})
.otherwise({
redirectTo: '/home.html'
})
})
.run(['$rootScope', '$location', 'authProvider', function ($rootScope, $location, authProvider) {
$rootScope.$on('$routeChangeStart', function (event) {
if (!authProvider.isLoggedIn()) {
alert('login');
$location.path('/login')
}
});
}]).
factory('authProvider', function () {
var user;
return {
setUser: function (aUser) {
alert('set user');
user = aUser;
},
isLoggedIn: function () {
alert('is loged in');
return (user) ? true : false;
}
};
});
And my index.js is as below:
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function () {
app.receivedEvent('deviceready');
angular.bootstrap(document, ['myApp']);
},
receivedEvent: function (id) {
console.log('Received Event: ' + id);
}
};
app.initialize();
And my index.html is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--Shared Scripts-->
<script type="text/javascript" src="js/shared/jquery.min.js"></script>
<script type="text/javascript" src="js/shared/angular.js"></script>
<script type="text/javascript" src="js/shared/angular-route.min.js"></script>
<script type="text/javascript" src="js/shared/angular-animate.min.js"></script>
<script type="text/javascript" src="js/shared/angular-sanitize.min.js"></script>
<!--Custom Scripts-->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/homeController.js"></script>
<script type="text/javascript" src="js/loginController.js"></script>
<title></title>
</head>
<body>
<div ng-view></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
When I emulate my app in browser(cordova emulate browser), every thing is OK and ng-view works nicely, but when I run it on android device(cordova run android), ng-view does not work!
I have also tried to add :
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
to my app.js, but no success! I have also tried to define my html and body as below:
<html ng-app='myApp'>
or
<body ng-app='myApp'>
But no success !
I am using AngularJs 1.5.8 and Cordova 6.2.0 and running my app on Android 4.0
Updated
After inspecting a Android 5.0 device, I found out that there is an error that saying:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///login.html
Error: [$compile:tpload] Failed to load template: /login.html (HTTP
status: -1 )
Would you please help me solve this problem?
Thank you
I finally find the solution.
Just moving my views(login.html and home.html) into a folder(for example views) and add dot before my UrlTemplate
$routeProvider
//define the routes and their corresponded controllers
.when('/home', {
templateUrl: './views/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: './views/login.html',
controller: 'loginController'
})
.when('/register', {
templateUrl: './views/register.html',
controller: 'registerController'
})
.otherwise({
redirectTo: './views/home.html'
})
In my project I have included: JQuery, JSTree, Angular and NgJsTree. Whenever I update my treeData model, the data change is not reflected in the tree.
tcwsApp.service('explorerService', ['$http', '$log', '$timeout',
function($http, $log, $timeout) {
var service = this;
service.treeData = {
rootNodes: [{
"text": "Initial node"
}]
};
return ({
getTreeData: getTreeData,
initService: initService
});
function initService() {
getRootNodes();
}
function getTreeData() {
return service.treeData;
}
function getRootNodes() {
var request = $http.get("api/explorer");
request.then(function(response) {
$log.debug(response);
service.treeData.rootNodes = response.data.list;
}, function(response) {
$log.error(response);
});
}
}
]);
tcwsApp.controller('explorerController', ['$log', 'explorerService',
function($log, explorerService) {
var explorer = this;
explorerService.initService();
explorer.treeData = explorerService.getTreeData();
explorer.applyChanges = function() {
return true;
};
explorer.treeConfig = {
core: {
multiple: false,
animation: true,
error: function(error) {
$log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
},
check_callback: true,
worker: true
},
version: 1,
plugins: ['types', 'checkbox']
};
}
]);
tcwsApp.directive('explorerTree', function() {
return {
templateUrl: 'app/template/explorer_tree.html'
};
});
<!DOCTYPE HTML>
<html ng-app="tcwsApp">
<head>
<meta charset="utf-8">
<title>TCWS</title>
<link rel="stylesheet" href="lib/jstree/themes/default/style.min.css" />
<link rel="stylesheet" href="lib/lht-bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/lht-bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="app/tcws_app.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="lib/angular-messages.js"></script>
<script src="lib/jstree/jstree.js"></script>
<script src="lib/jstree/ngJsTree.js"></script>
<script src="lib/lht-bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<tcws-app>
<!-- directive contents pasted -->
<explorer-tree>
<div class="col-md-4" ng-controller="explorerController as explorer">
<div js-tree="explorer.treeConfig" ng-model="explorer.treeData.rootNodes" should-apply="explorer.applyChanges()" tree-events="ready:readyCB;create_node:createNodeCB" tree="explorer.treeInstance">
{{explorer.treeData.rootNodes}}
</div>
</explorer-tree>
</tcws-app>
<script src="app/tcws_app.js"></script>
<script src="app/controller/explorer_tree.js"></script>
</body>
</html>
This displays the initial node - however the debug output via {{explorer.treeData.rootNodes}} is updated correctly after the http.get request finishes.
Resulting web page
Jstree has 2 json formats:
default: node w/ children
alternative: node w/ parent
Automatic updates on model change are only possible with the alternative format as stated here: Github Issue.
My task is to display the weather forecast from the API.
I have the following code, but I cannot get the data to show. I just started learning AngularJS and using APIs today, so any sort of help would be much appreciated! Specifically, what is wrong with my code that the weather data will not show?
This is the API I need to use:
http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('OpenWeather', function($scope, $http, $log) {
$scope.city = "Kansas City";
$scope.units = 'imperial';
$scope.change = function() {
var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f';
$http.jsonp(url)
.success(function(data, status, headers, config) {
$scope.main = data.main;
$scope.wind = data.wind;
$scope.description = data.weather[0].description;
})
.error(function(data, status, headers, config) {
$log.error('Could not retrieve data');
});
};
$scope.change();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Weather App</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="OpenWeather">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Kansas City Weather</h1>
</ion-header-bar>
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="img/ionic.png">
<h2>10 Day Forecast</h2>
<p>Kansas City, MO</p>
</div>
<div class="item item-avatar">
<h3>{{data.name}}</h3>
<p>Temp: {{main.temp}}</p>
<p>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Update
Solved the problem at hand. Thanks to all
You are using $http the wrong way.
Is better and cleaner to create a request object and put the params there. Please here is the oficial docs: https://docs.angularjs.org/api/ng/service/$http#usage
And here JSBIN: http://jsbin.com/doqeselile/edit?html,css,js,output
var app = angular.module('jsbin', []);
app.controller('DemoCtrl', function($http) {
var vm = this;
var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily';
var request = {
method: 'GET',
url: URL,
params: {
q: 'KansasCity',
mode: 'json',
units: 'imperial',
cnt: '7',
appid: 'bd82977b86bf27fb59a04b61b657fb6f'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
}).
catch(function(response) {
vm.data = response.data;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
</head>
<body ng-app="jsbin">
<div ng-controller="DemoCtrl as vm">
<h1>{{ vm.data | json }}</h1>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
</body>
</html>
You can use a factory or service for getting the information and then pass the information to the controller.
.factory('weatherService', ['$http', '$q', function ($http, $q){
function getWeather () {
var deferred = $q.defer();
$http.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=KansasCity&mode=json&units=imperial&cnt=7&appid=bd82977b86bf27fb59a04b61b657fb6f')
.success(function(data){
deferred.resolve(data);
})
.error(function(err){
deferred.reject(err);
});
return deferred.promise
}
return {
getWeather: getWeather,
};
}
}])
Then in your controller
.controller('OpenWeather', ['$scope', 'weatherService', function($scope, weatherService) {
weatherService.getWeather().then(function(data) {
$scope.city = data;
})
With this you can access any data from the json file and display it in your view.
<div class="item item-avatar">
<h3>{{city.name}}</h3>
<p>Temp: {{city.temp}}</p>
<p>
</div>
Check this for ionic 4 App that use openWeather API http://www.offlineprogrammer.com/building-a-pwa-with-ionic-4-capacitor-temperature-city/