I'm working on an app that uses the ionic framework. This in-turn uses the ui-router. Currently, I have a pretty basic two-page app. However, it will expand to be much larger. At this time, I get an error when I transition from my first view to my second view. The error says:
TypeError: Cannot read property '1' of null
at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:14235:28
at updateView (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37839:30)
at eventHook (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37786:17)
at Scope.$broadcast (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19725:28)
at $state.transition.resolved.then.$state.transition (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:31686:22)
at wrappedCallback (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18429:81)
at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18515:26
at Scope.$eval (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19441:28)
at Scope.$digest (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19267:31)
at Scope.$apply (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19547:24)
I am using 1.0.0 beta 3 of the Ionic Framework. My app.js file looks like this:
"use strict";
var myApp = angular.module('myApp', ['ionic', 'ngRoute']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', { url: '/', templateUrl: 'app/account/welcome.html', controller: 'WelcomeController' })
.state('login', { url: '/account/login', templateUrl: 'app/account/login.html', controller: 'LoginController '})
;
$urlRouterProvider.otherwise("/");
});
function WelcomeController($scope) {
}
function LoginController($scope) {
}
My index.html looks like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>MyApp</title>
<link rel="stylesheet" href="/vendor/ionic/release/js/ionic.bundle.min.js" />
<link rel="stylesheet" href="/css/app.css" />
<script type="text/javascript" src="/vendor/ionic/release/js/ionic.bundle.js"></script>
<script type="text/javascript" src="/vendor/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/app/controllers.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<h1 class="title">MyApp</h1>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</body>
</html>
welcome.html looks like this:
<ion-view>
<br /><br />
<h1>Welcome</h1>
<a class="button" href="/#/account/login">Login</a>
</ion-view>
login.html looks like this:
<ion-view>
<br /><br />
<h1>Login</h1>
</ion-view>
The view transitions just fine. However, the error I showed above concerns me. I'm afraid its going to bite me in the ass later. Does anyone know what would be causing this? Does anyone know how I can fix this?
Thank you!
If your using the bundle ionic.js file, you don't need to include ui-router, it already is included. You also don't need to include ng-router too.
Heres the codepen
ngRoute refers to the normal default router angular uses.
While you put that as your dependency, you cannot use the UI-router method, i.e stateProviders and the states.
In your case you have to remove ngRoute from your dependencies, or [ ]
var myApp = angular.module('myApp', ['ionic', 'ngRoute']); to
var myApp = angular.module('myApp', ['ionic']);
and then troubleshoot further since its a null value, something else is broken.
Related
I am new to AngularJs and very new to ui-router.
I seem to be having problems creating several routes. This is how I proceed, inspiring myself from a tutorial but failing to reproduce the result.
Here are my different files:
1/index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="js/lib/angular.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
Home
About
Contact
<ui-view></ui-view>
</div>
<script src="js/app.js"></script>
<script src="js/components/about/about.js"></script>
<script src="js/components/about/about.component.js"></script>
<script src="js/components/home/home.js"></script>
<script src="js/components/home/home.component.js"></script>
<script src="js/components/contact/contact.js"></script>
<script src="js/components/contact/contact.component.js"></script>
</body>
</html>
2/app.js
angular
.module('app', []);
3/about.js
angular
.module('about', ['ui.router']);
4/about.component.js
const about = {
template: '<div class="about">About</div>'
};
angular
.module('about', ['ui.router'])
.component('about', about)
.config(function ($stateProvider) {
$stateProvider.state({
name: 'about',
url: '/about',
component: 'about',
// template: "<div>About</div>"
})
});
There are 2 similar files for home and another 2 for contact.
There is obviously something wrong as we are only calling the app module and not the contact, home, about modules, but this is the way the tutorial was done.
It's not working (the different templates of each routed module are not showing) and I can't figure it out.
To ensure all the modules get bootstrapped accordingly, just simply set them all as the deps for app module:
angular
.module('app', ['home', ...])
One more thing is about setting the directive attribute ui-sref for <a ui-sref="home" /> to work best with ui-router module instead of #/home which works with ngRoute
I have created this simple Ionic app. Just try to learn how UI router works.
However, when I was running it, nothing came up. Also, nothing shows in the developer tools in Google Chrome.
index.html
<!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">
<!-- 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">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/home.html'
})
.state('music', {
url: '/music',
templateUrl: 'templates/music.html'
});
});
templates/home.html
<script id="home" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar-->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The the content of the page -->
Go to music page!
</ion-content>
</ion-view>
</script>
templates/music.html
<script id="home" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar-->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The the content of the page -->
Go to music page!
</ion-content>
</ion-view>
</script>
EDIT: After looking at your github repo, your app.js does not call run().
Here is something that works, in app.js define your controllers and states.
As you see I named my view as main.
app.controller('HomeCtrl', function ($scope) {
})
app.controller('MusicCtrl', function ($scope) {
})
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
views: {
'main': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
.state('music', {
url: '/music',
views: {
'main': {
templateUrl: 'templates/music.html',
controller: 'MusicCtrl'
}
}
});
});
in index.html, I named the view:
<ion-nav-view name="main"></ion-nav-view>
hom.html
<!-- The title of the ion-view will be shown on the navbar-->
<ion-view view-title="Home">
<ion-content>
<!-- The the content of the page -->
Go to music page!
</ion-content>
</ion-view>
music.html is similar.
Please note that for a real project I would not define controllers and states in app.js, I would have 3 files per page: state, controller and template inside a dedicated folder.
If home.html and music.html are really in separate files then you don't need to wrap them in the <script> tag. That's where I'd start.
I'm trying to understand what's going on here. The warning is self explanatory, and I realize that in the app, with the code and structure I have below, it runs the ng-view twice ('test' will be logged twice in the console, so of course angular is loaded twice!)....but why?
I've read every post I could find about it, and it seems to boil down to jQuery being loaded before angular.
If I leave out jQuery or if I load jQuery after angualr (which isn't good practice from what I understand), no problem. I'd like to have jQuery to support some functionality (specifically ui-sortable). And, although it doesn't seem to be actually causing any problems, I'd like to not have it running my ng-view twice.
Am I doing something structurally wrong, or am I missing an obvious way to fix this?
Update: Plunker of the issue (check the console)
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site Title</title>
</head>
<body ng-view>
<script type="text/javascript">
console.log('test')
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script type="text/javascript" src="app_simple.js"></script>
</body>
</html>
app_simple.js:
'use strict';
/**
* Configure client module
*/
var myApp = angular.module('myApp',
[
'ngRoute'
]);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/simple', {
templateUrl: 'components/simple/simple.html',
controller: 'SimpleCtrl'
})
.otherwise({
redirectTo: '/x'
})
});
myApp.controller('SimpleCtrl', ['$scope', '$log', '$http', function($scope, $log, $http){
}]);
simple.html:
My simple content
Ok, to summarize the help from the comments:
If jQuery is included, any <script> tags included WITHIN an ng-view will be evaluated twice. (Thanks #lossleader!).
My incorrect assumption in testing was that it was processing the entire template content twice when I tried moving the ng-view off the body onto a <div> because I saw the log message twice. It wasn't!
<body>
<div ng-view>
<script>console.log('duplicated if jQuery');</script>
</div>
</body>
So #Tom and #Wawy both had correct solutions. Either move the ng-view into a <div> or move the <script> tags into the <head> (outside of the ng-view).
i have same issue, and i fix it by loading JQuery before i load AngularJS
hope that works for you
I have a problem when I try to use ion-nav-view. When I try to use it, it shows me black screen in the emulator but in ionic serve, it works perfectly for me.
I think it is a syntax error.
Also, when I create a blank project, it works perfectly in the emulator.
My project (doesn't work)
Blank project (does work)
Index.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/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-bar></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
/templates/apps/index.html
<ion-view title="Hello World">
<ion-content>
<h2>Hello World</h2>
</ion-content>
</ion-view>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('apps', {
url: '/',
templateUrl: '/templates/apps/index.html'
});
// if none of the above states are matched, use this as the fallbac
$urlRouterProvider.otherwise('/');
});
Try to make your templateUrl: 'templates/apps/index.html'. The forward slash makes the path absolute, which will work on ionic serve because its a web server running at the root of the domain. It doesn't work in app because files are loaded over the file:// protocol and are not at the root, so it might crash because you are referencing a file that doesn't exist and would be outside of the app and thus perhaps a permission issue.
I'm learning Angularjs and I'm doing the tutorial from http://angularjs.org/, but I'm unable to get what I want. I have a simple page, index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Home</title>
</head>
<body>
<ul>
<li>Hello World</li>
<li>Tasks</li>
<li>Projects</li>
</ul>
</body>
</html>
I want that when I click on projecst.html my url shows something like http://localhost:8080/Application/projects or http://localhost:8080/Application/#/projects or http://localhost:8080/Application/#!/projects or whatever, but I don't want that it shows http://localhost:8080/Application/projects.html
I've been testing with $routeProvider, $locationProvider and $location, but I don't undestand very well how they work, Can anybody explain it to me? Can anybody help me with this issue?
More information:
projects.html:
<!DOCTYPE html>
<html ng-app="project">
<head>
<title>AngularJS | Projects</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
<script type="text/javascript" src="http://firebase.github.io/angularFire/angularFire.js"></script>
<script type="text/javascript" src="js/projects.js"></script>
</head>
<body>
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>
project.js:
angular.module('project', ['firebase']).
value('fbURL', 'https://angularjs-projects.firebaseio.com/').
factory('Projects', function(angularFireCollection, fbURL) {
return angularFireCollection(fbURL);
}).
config(function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'list.html', controller:ListController}).
when('/edit/:projectId', {templateUrl:'edit.html', controller:EditController}).
when('/new', {templateUrl:'edit.html', controller:NewController}).
otherwise({redirectTo:'/'});
});
Thanks in advance!
Greetings.
You should define the URL using the $routeProvider http://docs.angularjs.org/tutorial/step_07 . don't point your href to *html. point them to the urls you defined.
then you can also configure the $routeProvider to be either in HTML5 mode or in hashbang (default) mode-
You can fix this using "index.html" as your host page and deploy on a real webserver.
You could also configure your webserver to accept "projects.html" as an index file or welcome file.
You then setup routing in your angular application like so:
var app = angular.module('app', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/projects', {
templateUrl: 'partials/project-list.html',
controller: 'MyCtrl'
});
}]);
Make sure to link to that in a correct way, so your html should be
<li>Projects</li>