I'm trying to figure out why my angular app isn't working.
so I have the following code:
app.modules.js
angular.module("quickscan", [
"ui.router",
"quickscan.controllers"
]);
angular.module("quickscan.controllers", []);
app.routes.js
var app = angular.module("quickscan");
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
$urlRouterProvider.otherwise("/test");
$stateProvider
.state("app", {
abstract: true,
templateUrl: "shared/Layout/Main.html"
})
.state("app.root", {
url: "/test",
templateUrl: "shared/Main/Main.html"
})
.state("buildings", {
url: "/buildings",
controller: "BuildingDetailController",
templateUrl: "components/BuildingDetail/BuildingDetailView.html"
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Quickscan App v2</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="content/css/app.css">
</head>
<body>
<div ng-view id="view"></div>
<!-- order dependend scripts -->
<script src="scripts/jquery/jquery.js"></script>
<script src="scripts/angular/angular.js"></script>
<script src="app/app.module.js"></script>
<!--remaining scripts-->
<script src="content/js/scripts.js"></script>
<!--angular scripts-->
<script src="content/js/all.js"></script>
<script>
setTimeout(function() {
angular.bootstrap(document, ['quickscan']);
console.log("Hello");
}, 3000);
</script>
</body>
</html>
all.js
(function () {
var app = angular.module("quickscan");
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
$urlRouterProvider.otherwise("/test");
$stateProvider
.state("app", {
abstract: true,
templateUrl: "shared/Layout/Main.html"
})
.state("app.root", {
url: "/test",
templateUrl: "shared/Main/Main.html"
})
.state("buildings", {
url: "/buildings",
controller: "BuildingDetailController",
templateUrl: "components/BuildingDetail/BuildingDetailView.html"
});
});
})();
var Building = function (data) {
// some other class
return building;
};
var Category = function (data, parent, building) {
// some class
return category;
};
(function () {
"use strict";
angular
.module("quickscan.controllers")
.controller("BuildingDetailController",
function ($scope, $rootScope) {
var vm = this;
vm.title = "Building Detail";
function activate() {
console.log("test");
}
activate();
});
})();
(function () {
"use strict";
angular
.module("quickscan.controllers")
.controller("CategoryDetailController",
function ($scope, $rootScope) {
var vm = this;
vm.title = "Building Detail";
function activate() {
console.log("test");
}
activate();
});
})();
but the app isn't loading any of my views, my controllers arn't reporting test and it's not getting redirected to /# nor any errors are showing up, any one has a clue?
It looks like you are not using the ui-view directive, see https://github.com/angular-ui/ui-router/wiki/The-Components
Your
<div ng-view id="view"></div>
Should be
<div ui-view></div>
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 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'
})
Trying to build a simple application that allows a user to upload a file, and upon clicking the 'add' button, It parses the file and displays the result within the browser.
I am using IntelliJ to generate the AngularJS application stub, and modifying it accordingly.
My attempt is below:
view1.html
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<!--<script src="view1.js"></script>-->
</head>
<body>
<div ng-controller="View1Ctrl">
<input type="file" id="file" name="file"/>
<br/>
<button ng-click="add()">Add</button>
<p>{{data}}</p>
</div>
</body>
</html>
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function ($scope) {
$scope.data = 'none';
$scope.add = function() {
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e) {
$scope.data = e.target.result;
}
r.readAsArrayBuffer(f);
}
}]);
view1_test.js
'use strict';
describe('myApp.view1 module', function() {
beforeEach(module('myApp.view1'));
describe('view1 controller', function(){
it('should ....', inject(function($controller, $rootScope) {
//spec body
// var view1Ctrl = $controller('View1Ctrl');
var $scope = $rootScope.$new(),
ctrl = $controller('View1Ctrl', {
$scope: $scope
// $User: {}
});
expect(ctrl).toBeDefined();
}));
});
});
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
I am not sure where I could potentially be going wrong? I viewed quite a few questions to this and tried multiple different approaches but I cannot get this to work despite all of my tests passing.
The issue was around my view1.js file. I found the Papa Parse library extremely useful.
Here is my solution used from the open source Papa Parse community:
Papa.parse(fileInput[0], {
complete: function(results) {
console.log("Complete!", results.data);
$.each(results.data, function(i, el) {
var row = $("<tr/>");
row.append($("<td/>").text(i));
$.each(el, function(j, cell) {
if (cell !== "")
row.append($("<td/>").text(cell));
});
$("#results tbody").append(row);
});
}
});
I have set up a basic AngularJS app in VS and cannot get the ui-router functionality working. I have looked at videos, blogs, SO answers and as far as I can tell I am doing everything right, although, I am brand new to web development.
First, here is the solution structure:
and the code...
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body ng-app="app">
<div ui-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="app/app.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
</body>
</html>
app.js:
(function () {
'use strict';
angular.module('app', ['ui.router']);
})();
app.states.js:
(function () {
'use strict';
angular.module('app')
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/test.html',
controller: 'testCtrl',
controllerAs: 'vm'
})
});
})();
test.html:
<div>
<p>TEST PAGE</p>
</div>
testCtrl.js:
(function () {
'use strict';
angular.module('app')
.controller('testCtrl', testCtrl);
testCtrl.$inject = ['$state'];
function testCtrl($state) {
var vm = this;
var userAuthenticated = false;
init();
function init() {
$state.go('home');
};
};
})();
Can anyone see anywhere I have made a mistake?
There is a working example
I would say, that I miss these lines in your index.html
...
<script src="app/app.states.js"></script>
<script src="templates/testCtrl.js"></script>
That will loade the crucial state definition, and related controller. Check it in action here
I'm using angularJS-1.2.9 and angular-route-1.2.9 to set up routes for my application , i'm using requireJS as the dependency loader and modularize the code . I have added the ngRoute dependency into the AngularJS config , but still getting this following error in the chrome console Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:Error: [$injector:unpr] Unknown provider: $routeProvoider
Here is my code
main.js
require.config({
baseUrl: './js',
paths: {
angular: 'libs/angular-1.2.9',
angularRoute: 'libs/angular-route-1.2.9'
},
shim: {
'angularRoute': {
deps: ['angular'],
exports: 'angularRoute'
},
'angular': {
exports: 'angular'
}
}
});
require(['angular', 'angularRoute'], function (angular, angularRoute) {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
app.controller('indexController', function ($scope, $http) {
console.log('inside index');
});
app.config(
function ($routeProvoider) {
$routeProvider.
when('/', {
templateUrl: 'index_content.html',
controller: 'indexController'
})
});
});
Here are my html files
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
index_content.html
<p>inside Index content</p>
<h1>testing the ang routes
Whats the issue here ?? Why is it still giving away the above mentioned error ?? How to fix this ??
There is a typo error on $routeProvider in the code I have rectified and placed the code below:
Code Snippet:
require(['angular', 'angularRoute'], function (angular, angularRoute) {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
app.controller('indexController', function ($scope, $http) {
console.log('inside index');
});
app.config(
function ($routeProvider) { //One typo here
$routeProvider.
when('/', {
templateUrl: 'index_content.html',
controller: 'indexController'
})
});
});
app.config(
function ($routeProvider) {
$routeProvider.
when('/ResourceItem/:RE_RestoId',{
templateUrl:'./partials/state-view.html',
controller: function ($routeParams, ResourceService) {
this.params = $routeParams;
var that = this;
ResourceService.getResourceItem(this.params.RE_RestoId || "").success(function (data) {
that.items = data;
})
this.addItemTo = function (resource)
{
if(!resource.items)
{
resource.items = [];
}
resource.items.push({TA_Code: this.newResourceItem });
this.newResourceItem="";
};
},
controllerAs:'ResourceItemCtrl'
});
});