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.
Related
I have an app using AngularJS. Here is a link of it - Angular App
All the links in the navbar are using default angular router. All the pages work fine when i refresh them, but a page like this loads the content without css and js when i refresh it or go to it directly.
I feel this is a issue with the routing although I am not sure. Here is the app.js file -
angular
.module('jobSeekerApp', [
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.when('/companies', {
templateUrl: 'views/companiesall.html',
controller: 'CompaniesallCtrl',
controllerAs: 'companies'
})
.when('/jobs', {
templateUrl: 'views/jobsall.html',
controller: 'JobsallCtrl',
controllerAs: 'jobs'
})
.when('/companies/:id', {
templateUrl: 'views/company.html',
controller: 'CompanyCtrl',
controllerAs: 'company'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
controllerAs: 'contact'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
});
This is the head from index.html -
<head>
<meta charset="utf-8">
<title>Job Seeker</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
<base href="/">
</head>
Thanks everyone for your help, I found the actual problem in another question. I had to put <base href="/"> above other links in the head of index.html. Here is a link to the correct answer. So now index.html looks like this
<head>
<meta charset="utf-8">
<title>Job Seeker</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<base href="/">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
</head>
You are using html5 history mode and that's why it's not able load the css and js files. you need to use url re-writer for serving index.html whole the time so it can load your css and js files and you can have url without hash.
Note:-
You don't notice it until you don't refresh your page. Everything will work till you hit the refresh button and serve you the static html page without the css and js
What happened when you use html-history mode?
You make an request and before angular can react on that request your server find example.html file and serve that and that files don't have the css or js files it's your index.html which contain all thee files so you need to tell your server that just keep serving index.html and later angular will redirect to the requested page which will be shown in the ng-view and will have all the css and js files.
Server side (Source Angular's documentation)
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handled by the application.
I'm really new to Angular (and plan to spend the whole week on it), and I'm following a tutorial on youtube and I think the guy who created it must have took a trip to another galaxy so there's no support anymore (but an awesome tut). I can't seem to get my home..html page to render to the browser and I'm at a total lost.
When I enter this URL manually:
https://chore-master-j-s-thomas-1.c9users.io/home
The error I get is: Cannot GET /home
So I'm thinking it has to be my routing.
this is my app.js page
var myApp = angular.module('myApp', [
'ngRoute']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/home', {templateUrl: '/partials/home.html', controller: 'homeController.js'});
$routeProvider.otherwise({redirectTo: '/home'});
$locationProvider.html5Mode({enabled: true, requireBase: false}); }])
And here is my index.ejs:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="lib/bootstrap/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home </li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<h3 class="text-muted">Chore Master</h3>
</div>
<p class='container' style="margin-left: 50" align="left" >text</p >
<!-- Main Container -->
<div class="container">
<div ng-view></div>
</div>
</div> <!-- /container -->
<!-- scripts to import for angularjs goes here -->
<scripts type="text/javascript" src="libs/angular/angular.js"> </scripts>
<scripts type="text/javascript" src="libs/angular-route/angular- route.js"></scripts>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"> </script>
</body>
</html>
and then my home controller:
myApp.controller('homeController', ['$scope', function($scope){
}]);
I'm really not sure what else will help besides my github but can anyone tell me what I have wrong and what angular parts do I need to study?
Here's my github repo:
https://github.com/J-S-Thomas/Chore_Master.git
You have some small typos when importing angular files:
<scripts type="text/javascript" src="libs/angular/angular.js"></scripts>
<scripts type="text/javascript" src="libs/angular-route/angular-route.js"</scripts>
should be:
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.js"></script>
Notice the html tag is script, not scripts. And the folder where you placed them is lib not libs.
There might be something wrong with your hosting. When I browse to https://chore-master-j-s-thomas-1.c9users.io/ your index page works ok. But when I attempt to access https://chore-master-j-s-thomas-1.c9users.io/libs/angular/angular.js I get the "cannot GET" error. Your site isn't loading any of your js libs so Angular isn't even launching.
Update: your Bootstrap css is under "lib", remove the "s" from the js libs script tags. Also note you have a typo in those tags where you also added an s.
I've tried building a simple Todo List app using ionic framework, however I've experienced a problem.
Whenever I add the ng-controller and ng-reapeat directives to my code, AngularJS expressions stop working.
Here is my code:
index.html
<!DOCTYPE html>
<html ng-app="starter">
<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>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">ToDo</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="todo in TodoList">{{todo.name}}</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('ionicApp', ['ionic'])
app.controller('TodoCtrl', function($scope){
$scope.TodoList = [
{name: "Item 1"},
{name: "Item 2"}
]
})
You are defining the core module of your app in app.js as:
var app = angular.module('ionicApp', ['ionic'])
However, in your html, you're defining your app as:
<html ng-app="starter">
In your ng-app attribute, you're defining this app as an Angular app, and you're referencing a module which does not exist (starter). You need to specify which Angular module to use, which in your app.js at the moment is ionicApp. So try renaming starter to ionicApp, or the otherway around, as long as they have matching names.
Heres My code for my index page, I added ui-view and my app file is called "route-app.js" and have used bower angular ui-router.
<!DOCTYPE html>
<html lang="en" ng-app="router">
<head>
<!-- JS dependencies -->
<!-- AngularJS library -->
<script src="route-app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- AngularJS UI-Router -->
<!-- Our application -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1></h1>
<div ui-view></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
UI router Js file
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
}]);
Every time I click on the links not pops up. What have I done wrong here.
$StateProvider should be $stateProvider (the first letter is lowercase)
Refer to the documentation here for reference: https://github.com/angular-ui/ui-router.
Also open up your development console, there may be some console errors that might assist you in figuring out what the problem is
angular.module('router', ['ui.router'])
.config(['urlRouterProvider', '$stateProvider', function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
The thing is that, you have used array notation for dependency injection but you actually did not inject anything.
Ok so you have a couple errors.
The first, and the most important, is that you define your custom scripts prior to including angular itself. So if you look at the console you will see a 'Reference Error: angular is not defined' error.
Second and third, as Alex and Vishal noted, the injection is wrong.
Here are the updated HTML (I removed all the unecessary comments from your code to make it clear where I changed anything. You can of course keep them in your page):
<!DOCTYPE html>
<html lang="en" ng-app="router">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- JS dependencies: MUST COME AFTER THE ANGULAR DEPENDENCIES -->
<script src="route-app.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1></h1>
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
and the script:
angular.module('router', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
As an advice, make use of the browser console (by pressing F12). It will give you the errors occuring in your scripts.
Note: It is possible to include the custom scripts prior to the angular library, but it's pointless and needs extra code to make it work, so don't do it.
In the script file , change the value oftemplateUrl attribute from 'home.html' to './home.html'. You have to give root directory.Just giving the file name will not work.
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: './home.html'
})
}]);
First of all, you should use the ui-sref attribute and not a plain href attribute to make ui-router work properly. Second, your link should not contain a hashtag. In this case, it has to be "/", not "#/".
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.