I am a newbie in angularjs. My intention is to add this angularjs directive https://github.com/720kb/angular-datepicker to my app.js so that I can be able to select dates in one of my views buses.html.
My app.js file looks something like this:
My app.js file looks like this...
var busRest1 = angular.module("busReservator1", ["720kb.datepicker"]);
//dependency injection that fails
var busRest = angular.module("busReservator", ["ionic", "busRest1"]);
busRest.run(function($ionicPlatform, $state) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
document.addEventListener("resume", function() {
$state.go("home", {}, {location: "replace"});
}, false);
});
busRest.factory('myService', function(){
var savedData = {}
function set(data){
savedData = data;
}
function get(){
return savedData;
}
return {
set: set,
get: get
}
});
busRest.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "homeCtrl",
})
.state("busList", {
url: "/busList",
templateUrl: "templates/busList.html",
controller: "busListCtrl",
cache: false
})
$urlRouterProvider.otherwise('/home');
});
busRest.controller("homeCtrl", ['$scope', function($scope){
}]);
busRest.controller('busListCtrl', ['$scope', 'myService2', function($scope, myService2) {
//declaring an array of transporters
$scope.transporters = [];
$scope.AddTransporter = function(){
transporters = [document.getElementById('transporter_agency').value, document.getElementById('transporter_vehicleType').value, document.getElementById('transporter_vehicleCapacity').value, document.getElementById('transporter_btnValue').value];
myService2.set(transporters);
};
}]);
busRest.controller('DataCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('js/datafile2.json').success(function (data) {
$scope.artists = data.artists;
$scope.albums = data.albums;
})
}]);
My index.html looks like this
<!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>Bus Ticket Reservation</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- For the date picker css-->
<link href="src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
<!-- For the date picker js -->
<script src="src/js/angular-datepicker.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/forge.min.js"></script>
<script src="js/firebase.js"></script>
<script src="js/angularfire.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="busReservator">
<ion-pane>
<ion-nav-bar class="bar-royal"></ion-nav-bar>
<ion-nav-view ></ion-nav-view>
</ion-pane>
</body>
</html>
When I save and run, the app breaks and the browser window is emptied
Related
Angular JS controller is not working in IOS 14. But its working below IOS 14.
App shows white or blank screen. I don't have any issue with splash screen.
Controllers and templates are working fine in Android version and in browser.
I am developing IOS app using Cordova and Angular JS.
Below are the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/developer.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="css/nprogress.css"> <!-- Infinite Scroll -->
</head>
<body ng-app="raffle">
<div id="noNetId"></div>
<div ng-controller="mainCtrl">
<div ng-view></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Spinner JS -->
<script src="js/spin.js"></script>
<script src="js/angular-spinner.js" type="text/javascript"></script>
<!-- Spinner JS -->
<!-- Infinite Scroll -->
<script src="js/nprogress.js"></script>
<script src="js/infinite-scroll.js"></script>
<!-- Infinite Scroll -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('raffle', ['raffle.services', 'ngRoute', 'angularSpinner', "infinite-scroll"]).run(function(DB) {
DB.init();
});
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/login", {
templateUrl: "views/login.html",
controller: "loginCtrl"
})
.when("/", {
templateUrl: "views/list.html",
controller: "listCtrl"
})
});
angular.module('raffle.config', [])
.constant('DB_CONFIG', {
name: 'testdatabase',
tables: []
});
angular.module('raffle.services', ['raffle.config'])
// DB wrapper
.factory('DB', function($q, DB_CONFIG) {
var self = this;
self.db = null;
self.init = function() {
// Use self.db = window.sqlitePlugin.openDatabase({name: DB_CONFIG.name}); in production
//self.db = window.openDatabase(DB_CONFIG.name, '1.0', 'database', -1);
self.db = window.openDatabase(DB_CONFIG.name, '1.0', DB_CONFIG.name, 10000000);
angular.forEach(DB_CONFIG.tables, function(table) {
var columns = [];
angular.forEach(table.columns, function(column) {
columns.push(column.name + ' ' + column.type);
});
//self.query('drop table ' + table.name);
var query = 'CREATE TABLE IF NOT EXISTS ' + table.name + ' (' + columns.join(',') + ')';
self.query(query);
console.log('Table ' + table.name + ' initialized');
});
};
self.query = function(query, bindings) {
bindings = typeof bindings !== 'undefined' ? bindings : [];
var deferred = $q.defer();
self.db.transaction(function(transaction) { //alert(query);
transaction.executeSql(query, bindings, function(transaction, result) {
deferred.resolve(result);
}, function(transaction, error) { //alert(error);
deferred.reject(error);
console.log(error);
});
});
return deferred.promise;
};
self.fetchAll = function(result) {
var output = [];
var len = result.rows.length;
if (len > 0) {
for (var i = 0; i < result.rows.length; i++) {
output.push(result.rows.item(i));
}
}
return output;
};
self.fetch = function(result) {
var len = result.rows.length;
if (len > 0) {
return result.rows.item(0);
} else {
return false;
}
};
return self;
});
alert("Test"); //working
app.controller('mainCtrl', function($scope, $location, $timeout, DB, $http, $rootScope, $route, usSpinnerService) {
alert("Main controller"); //not working
});
app.controller('listCtrl', function($scope, $location, $timeout, DB, $http, $rootScope, $route, usSpinnerService, $routeParams) {
alert("List controller"); //not working
});
list.html
<h1>List</h1>
<p>Some content goes here...</p>
Please help me. Any help should be appreciated. Thanks in advance.
I have defined my controller in main page but still i keep getting this error. [$controller:ctrlreg] http://errors.angularjs.org/1.6.10/$controller/ctrlreg?p0=NavCtrl
app.module.js
var app = angular.module("myApp", ["ngRoute"]);
routeConfig.js
angular.module("myApp", ["ngRoute"]).config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'Home.html',
controller: 'HomeController'
})
.when('/blog', {
templateUrl: 'Blog.html',
controller: 'BlogController'
})
.otherwise({
redirectTo: '/home',
controller: 'HomeController',
});
});
TestScript.js
angular.module("myApp", ["ngRoute"]).controller('NavCtrl',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
$scope.loadHome = function () {
$location.url('/home');
};
$scope.loadBlog = function () {
$location.url('/blog');
};
}]);
angular.module("myApp", ["ngRoute"]).controller('HomeController', function ($scope, $compile) {
console.log('inside home controller');
});
angular.module("myApp", ["ngRoute"]).controller('BlogController', function ($scope, $compile) {
console.log('inside blog controller');
});
Home.html
<div>
Home Navigation panel.
</div>
Blog.html
<div>
Blog Navigation panel.
</div>
MainPage.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<title></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='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="Views/Config/app.module.js"></script>
<script src="Views/Directives/Ecommerce/controller.js"></script>
<script src="Views/Directives/Ecommerce/directive.js"></script>-->
<script src="TestScript.js"></script>
<link rel="stylesheet" href="Content/EcommerceStyleSheet.css" type="text/css" />
</head>
<body ng-controller="NavCtrl">
<!--<my-Directive></my-Directive>-->
Home<br />
Blog
<br />
<div ng-view></div>
</body>
</html>
Please suggest if i am missing something or do i need to inject something to making routing work
It's just as the #Lex said,
please remove ['ngRoute'] from all of the controllers in your TestScript.js and include/uncomment your app.module.js and routeConfig.js scripts in your MainPage.html
So that you may achieve something like this if it's all put together;
var app = angular.module("myApp", ["ngRoute"]); // from app.module
angular.module("myApp", ["ngRoute"]).config(function ($routeProvider) { // from routeConfig
$routeProvider
.when('/home', {
templateUrl: 'Home.html',
controller: 'HomeController'
})
.when('/blog', {
templateUrl: 'Blog.html',
controller: 'BlogController'
})
.otherwise({
redirectTo: '/home',
controller: 'HomeController',
});
});
angular.module("myApp").controller('NavCtrl',
['$scope', '$location', function ($scope, $location) { // from TestScript
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
$scope.loadHome = function () {
$location.url('/home');
};
$scope.loadBlog = function () {
$location.url('/blog');
};
}]);
angular.module("myApp").controller('HomeController', function ($scope, $compile) {
console.log('inside home controller');
});
angular.module("myApp").controller('BlogController', function ($scope, $compile) {
console.log('inside blog controller');
});
I am learning AngularJS and I have a problem with the controller.
This example below already worked, but it suddenly stoped without any changes that could cause that. I am not sure what is wrong.
The /templates/index.html file does not load.
This is my main index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todolist</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- ANGULAR JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/todolists.js"></script>
</head>
<body ng-app="app">
<div ui-view></div>
</body>
</html>
This is my app.js:
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider) {
$stateProvider
.state('/', {
url: "/",
templateUrl: "app/templates/index.html",
controller: 'todolists',
});
});
This is my todolists controller:
var app = angular.module('app');
var controllers = {};
console.log("test");
controllers.todolists = function ($scope, $http) {
console.log("test1");
$http.get('http://localhost:8888/todolist/rest/entries/index.json').
then(function(response) {
console.log(response.data);
$scope.data = response.data;
});
};
app.controller(controllers);
console.log("test") writes to console, but console.log("test1") does not, so the controller is not accessed.
Please take a look and let me know if you have and tips about what could be wrong.
Thanks, Grega
You need to register a name for the controller is the problem. Ive registered the name 'todolistCtrl' which is the first argument needed for the controller registration method. the second argument is the function controllers.todolists.
you can then reference todolistCtrl within you State Provider.
controller
var controllers = {};
console.log("test");
controllers.todolists = function ($scope, $http) {
$http.get('http://localhost:8888/todolist/rest/entries/index.json').
then(function(response) {
console.log(response.data);
$scope.data = response.data;
});
};
angular.module('app')
.controller('todolistCtrl', controllers.todolists);
app
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: "/",
templateUrl: "index.html",
controller: 'todolistCtrl',
});
});
Plunker
Example
I am getting error in routing to about page. Home page is loading successfully. I am new to angular. Please help me to do it successfully.
here is the code link
enter code here Plunker Link
find code here
index.html
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Js
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'aboutController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('mainController', function() {});
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/home");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.about= function() {
$location.path("/about");
}
});
Correct your references as <script src="main.js"></script> and create partial/home.html. It will work then.
Try to utilize browser developer tool (F12), it will you help to find actual error.
There are several issues with your plunker.
You don't have the partials created in your plunker version. You need to create the files partials/about.html and partials/home.html.
The css/main.css. You have created a style.css in the root folder, but referred css/main.css in index.html.
3.The path to main.js was wrong. The file is in the root folder and you referred it as js/main.js. Please refer it as <script src="main.js"></script>
You have to call the routes from the partials.
You have created the about method in aboutController. But, it should be in the home controller. About controller will only be instantiated when you route to the about.html page.
You have referred an URL '/home' which is not defined in the main.js.
Please find the following working plunker.
https://plnkr.co/edit/APKWvpuTfivua5CovRp7?p=preview
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
}).
when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/login");
}
$scope.about= function() {
$location.path("/about");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
app.controller('loginController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
index.html:
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="main.js"></script>
</body>
</html>
My controller in controller.js is not getting called when I click on a button with ng-click in index.html. All help is appreciated. I am using Angular js 1 and ionic framework.
Here are my files:
// controller.js
angular.module('index')
.controller('LoginCtrl', function($scope, $auth) {
$scope.authenticate = function(provider) {
$auth.authenticate(provider);
};
};
//app.js
angular.module('index', ['ionic', 'satellizer'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($authProvider) {
$authProvider.facebook({
clientId: 'Facebook App ID'
});
$authProvider.facebook({
clientId: 'Facebook App ID',
responseType: 'token'
});
$authProvider.google({
clientId: 'Google Client ID'
});
});
index.html file contents
<!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></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="index">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Hello</h1>
</ion-header-bar>
<ion-content ng-controller="LoginCtrl as login">
<button ng-click="login.authenticate('facebook')">Sign in with Facebook</button>
<button ng-click="login.authenticate('google')">Sign in with Google</button>
</ion-content>
</ion-pane>
</body>
</html>
take a variable app and assign angular module to it. After in controller you can use that app variable.
// controller.js
app
.controller('LoginCtrl', function($scope, $auth) {
$scope.authenticate = function(provider) {
$auth.authenticate(provider);
};
};
//app.js
var app = angular.module('index', ['ionic', 'satellizer']);