I am trying to get a really basic page rendering in Ionic and but can't seem to get anything but a white page to appear.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="vendor/ionic.min.css">
<title>IoT Launch</title>
<script type="text/javascript" src="vendor/vendor.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body ng-app="iot-launch">
<ion-nav-view></ion-nav-view>
</body>
</html>
Note that I'm using Browserify to generate a vendor.js and bundle.js from 3rd party and my own JavaScript with an entrypoint at js/apps.js.
js/app.js:
'use strict';
angular.module('iot-launch', ['ionic', require('./views/deviceList')])
.config(['$urlRouterProvider', function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}])
.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeError', console.log.bind(console));
$rootScope.$on('$stateChangeStart', console.log.bind(console));
$rootScope.$on('$stateNotFound', console.log.bind(console));
$rootScope.$on('$stateChangeSuccess', console.log.bind(console));
}]);
js/views/deviceList.js:
module.exports = angular.module('iot-launch.views.deviceList', [
'ionic'
])
.config(['$stateProvider', function($stateProvider) {
console.log('In deviceList config');
$stateProvider
.state('iot-launch.deviceList', {
url: '/',
template: '<ion-view title="hello"><ion-content>Hello</ion-content></ion-view>'
});
}])
.name;
When I replace <ion-nav-view></ion-nav-view> with the content of the template, it renders on the page (i.e., Hello appears). The only statement appearing in the console is the statement in the the deviceList config so the $stateProvider code appears to be getting called.
I thought the $urlRouterProvider.otherwise('/'), having the iot-launch.deviceList state with a url of /, and using <ion-nav-view></ion-nav-view> in the main html file would lead to the template in iot-launch.deviceList appearing where <ion-nav-view></ion-nav-view> appears.
I just noticed that I didn't define an iot-launch state which is apparently very necessary for an iot-launch.deviceList state to work. Removing .deviceList from the state name or defining an iot-launch state seems to fix it. The lack of error messages was very aggravating.
Related
I try to show a view with angular paths. the console does not throw any error or warning.
But equally the view is not displayed.
What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head></head>
<body>
<ng-view></ng-view>
<!-- build:js bower/vendor -->
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<script src="./routes.js"></script>
<!-- build:app scripts/js || CUSTOMER -->
<script src="./components/customer/customerService.js"></script>
<script src="./components/customer/customerController.js"></script>
<!-- endbuild-->
</body>
</html>
routes.js
var _templateBase = './components';
angular.module('app', [
'ngRoute'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/customer/customer.html' ,
controller: 'customerController',
controllerAs: '_ctrl'
})
.otherwise({
redirectTo: '/'
});
}
]);
costomerService.js
angular.module('app', [])
.factory('customerService', function() {
});
costomerController.js
angular.module('app',[])
.controller('customerController', ['$scope', function($scope, customerService) {
//
}]);
It's wrong? Because the view is not displayed? I'm using obsolete mertodos, guide me lleguar many tutorials there.
Thanks so they can help.
This creates your app because you have included the second parameter (an array of dependencies to inject):
angular.module('app', [
'ngRoute'
])
Remove the second parameter on your other angular.module() definitions because that is causing a new app to be created each time.
angular.module('app') <-- no second parameter tells it to use the existing 'app' module
.factory('customerService', function() {
});
angular.module('app') <-- no second parameter tells it to use the existing 'app' module
.controller('customerController', ['$scope', 'customerService', function($scope, customerService) {
//
}]);
I added customerService to your injection array on your controller definition because the array elements have to match up exactly to your function parameters.
Also, if you are using controllerAs syntax as you have done on your route definition then you may not want to inject $scope into your controller.
I am trying to make a single page application while using components since my company will be moving to using components in the future and I am trying to follow the angular-phonecat tutorial. The problem I'm having is that for some reason in my app.config.js file, the template for the home page is not being recognized (the home-page portion) and I can't figure out why. If I replace that with a simple string of 'hello', it displays just fine, so it has to be somewhere in my components but I can't track down why it's not recognizing it.
Relevant code:
app.config.js:
angular.
module('newSpa').
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider){
$locationProvider.hashPrefix('!');
$routeProvider.
when('/home',{
template: '<home-page></home-page>'
}).
when('/contacts', {
template:'<contacts></contacts>'
}).
otherwise('/home');
}]);
app.module.js:
angular.module('newSpa', [
'ngRoute',
'homePage',
'contacts'
]);
home-page.template.html:
<div>
<p>{{message}}</p>
</div>
home-page.module.js:
angular.module('homePage', []);
home-page.component.js:
angular.module('homePage').component('homePage', {
templateUrl: 'home-page/home-page.template.html',
controller: 'homeCtrl'
});
controllers.js:
angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="newSpa">
<head>
<meta charset="UTF-8">
<title>SPA Contacts</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="home-page/home.module.js"></script>
<script src="home-page/home.component.js"></script>
<script src="contacts/contacts.module.js"></script>
<script src="contacts/contacts.component.js"></script>
<script src="controllers/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
My app.config.js file is in the root "app" directory, and my home files are all in the "/app/home-page" directory. Link to angular-phonecat: https://docs.angularjs.org/tutorial/step_03
So my previous solution was still incorrect. The real solution is that my controller was redefining the 'home' module because I had square brackets. Here is the old controller:
angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
So as you can see, when I have square brackets in the module definition, I am redefining the module, thereby overwriting all previous definitions of the module. When I removed those brackets:
angular.module('homePage').controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
Everything displays properly. So the issue was I was making a new module with just the controller, so it didn't have the template to push to the view to update.
You seem to have named your component 'home' but are using 'home-page' in your template.
I am trying to run my angularjs-based app on local file throughout File transfer protocol(not on any server).
My project contains html files as
index.html and template folder on the top level, and other sub html files, such as common.html, main.html, etc. which are included in the template folder.
This app triggers the error below,
Error: [$compile:tpload] Failed to load template: template/common.html (HTTP status: 404),
only when entering through File transfer, file:///C:/Webapp/index.html#common/abc.
But it does not happen when entering by http.
Also, this file transfer access triggers an error in Chrome, IE, but not in Firefox.
And the second odd thing is that this happens only when url ends with #common/abc.
The only one url that triggers the tpload error goes like
file:///C:/Webapp/index.html#common/abc (case only with #common/~ after index.html, and I don't get the error if it doesn't has 'abc' at the last).
The 'abc' functions like parameters(called channelTag on my project) going to be input on my App, not actual files.
And This project intends to start with the url file:///C:/Webapp/index.html#common/abc which gets the channelTag, and flows
other sub urls.
Other urls like file:///C:/Webapp/index.html#main, or file:///C:/Webapp/index.html#sub2 are okay. No errors are shown there.
After checking some related answers on searching,
most of the answers say to include bootstrap-tpls.js instead of bootstrap.js, but this method shows the same result.
Attached are the html and javascript code below :
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="EUC-KR">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="{{metaservice.metaViewport()}}" />
<title>BtvWebApp</title>
<link rel="stylesheet" type="text/css" href="css/btv.css">
<script src="js/lib/jquery-1.11.1.min.js"></script>
<script src="js/bxslider/jquery.bxslider.min.js"></script>
<script src="js/lib/angular.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/lib/script.js"></script>
<script src="js/view/main/mainController.js"></script>
<script src="js/view/commonController.js"></script>
<script src="js/filters/zerofillFilter.js"></script>
<script src="js/config/constants.js"></script>
<script src="js/config/messages.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
common.html is an empty html file.
app.js:
var app = angular.module('myApp', [
'ngRoute',
'ngSanitize',
'myApp.constant',
'myApp.messages'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'template/main.html',
controller: 'mainCtrl'
})
// Containing other sub whens...
/////////////////////////////
.otherwise({redirectTo: '/common/:channelTag'});
}]);
commonController.js:
'use strict';
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/common/:channelTag', {
templateUrl: 'template/common.html',
controller: 'commonCtrl'
});
}])
.controller('commonCtrl', ['$scope', '$location', '$http', '$rootScope', '$routeParams', 'commonConstant', 'information', 'Utils', 'MetaService'
, function($scope, $location, $http, $rootScope, $routeParams, commonConstant, information, Utils, MetaService) {
$scope.isDataLoading = true;
var channelTag = $routeParams.channelTag;
if(!Utils.isEmpty(channelTag)){
information.channelTag = channelTag;
}
}])
.service('MetaService', function() {
var metaViewport = '';
return {
set: function(newViewport) {
metaViewport = newViewport;
},
metaViewport: function() { return metaViewport; }
}
});
What is the problem when running through file transfer protocol even I set the chrome option with disable-security?
And why I get the error only when the url ends with '~#common/abc' ?
Any suggestions are welcome, please.
Including ui.bootstrap.tpls in your project will fix above issue
Oops, I solved this problem myself.
It was due to common.html with empty code, so some browsers could not find the template contents. Adding a <div> tag in that file, no error found.
Wish it be helping someone...
So I've been looking at this for way too long. Really hope someone could help me out :) I'm just trying to create a module that creates a directive and controller for my site header in AngularJS. I don't get any error and the log in my code won't show up. This is the code related to the header module:
header/header.js
'use strict';
angular.module('myApp.header', [])
.directive("headerBar", [function(){
return {
restric: "E",
templateUrl: "header/header.html",
controller: 'HeaderCtrl'
};
}])
.controller('HeaderCtrl', ['$log', function($log) {
$log.log('test header controller');
}]);
app.js
angular.module('myApp', [
'ngRoute',
'myApp.header'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
index.html
<script src="header/header.js"></script>
<header-bar></header-bar>
I see a typo on your directive definition:
Should be restrict: "E", you're currently missing the 't'
You need to call the app.js and angular.js reference scripts in your index page
Some think like below
//Jquery Scripts
//Angular.js library scripts
<script src="header/header.js"></script>
**<script src="app.js"></script>**// Please refer here your app.js script
<header-bar></header-bar>
This works for me.Please check that you are including all files.
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="header/header.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp.header" ng-controller="HeaderCtrl">
<header-bar></header-bar>
</body>
</html>
I'm just getting started with Angular and seem to have fallen down at the first hurdle. I wanted to build a simple skeleton app to start with. I pretty much copied the code of the angularjs.org site and am getting an error talking about injection... Sorry to code dump, but I have no clue where the bug is.
<!DOCTYPE html>
<html ng-app="triangular">
<head>
<title>Angular Skeleton</title>
<link rel="stylesheet" href="/style/bootstrap.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.0/angular-route-segment.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = angular;
var t = a.module('triangular', ['ngRoute']);
t.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'app/modules/test/partials/partial1.html',
controller: 'Page1Ctrl'
}).
when('/page2', {
templateUrl: 'app/modules/test/partials/partial2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/page1'
});
}]);
t.controller('Page1Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test';
}]);
t.controller('Page2Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test2';
}]);
</script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
I'm getting this error: Error: [$injector:modulerr].
The link it's providing isn't that useful. It told me to include the route segment js file, which I did, but the error persisted.
try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.min.js" type="text/javascript"></script>
to your head right below where you include angular. I had a similar issue and this fixed it right away.