I've started to learn ionic framework recently. I created below files, but result is blank page. nothing shows in the developer tools in Google Chrome too.
app.js
var app = angular.module('sheikhsafi', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/',
views: {
home: {
templateUrl: 'templates/home.html',
}
}
})
$urlRouterProvider.otherwise('/')
});
app.controller('HomeController', function ($scope, $stateParams) {
})
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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="sheikhsafi">
<ion-nav-view></ion-nav-view>
</body>
</html>
templates/home.html
<script id="templates/home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content>
<ion-pane>Hi</ion-pane>
</ion-content>
</ion-view>
<script>
what's the problem?
Working plunker.
Wrong code in config section of app.js. The correct is:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/',
templateUrl: 'templates/home.html'
});
$urlRouterProvider.otherwise('/')
})
instead of your:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/',
views: {
home: {
templateUrl: 'templates/home.html',
}
}
})
$urlRouterProvider.otherwise('/')
});
In your case you're trying to add to home view a template, that has sense when you have an abstract view. Take a look to the ionic-starter-sidemenu, that could be a nice way to discover some things.
Also, if you're learning ionic, please read the getting started guide, and use one of them ready-made app templates.
Related
I installed firebase and angularfire with bower bower.
I included the files and angularfire but I get these errors:
When I click error on the file angularfire
code app.js
var app = angular.module('myApp', ['ui.router','ionic','firebase'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider.state("home",{ url : "/home", templateUrl : "templates/home.html" , controller: "HomeCtrl"});
$stateProvider.state("Inscription",{ url : "/inscription", templateUrl : "templates/inscription.html" , controller: "InscriCtrl"});
$stateProvider.state("listmsg",{ url : "/listmsg", templateUrl : "templates/list.html" , controller: "ListCtrl"});
$stateProvider.state("msg",{ url : "/msg", templateUrl : "templates/msg.html" , controller: "MsgCtrl"});
$urlRouterProvider.otherwise("home");
}]);
app.controller('HomeCtrl', [,'$firebaseSimpleLogin',function($scope,$firebaseSimpleLogin) {
var firebaseObj = new Firebase("https://appsfactor-68466.firebaseio.com");
var loginObj = $firebaseSimpleLogin(firebaseObj);
$scope.SignIn = function(event) {
event.preventDefault(); // To prevent form refresh
var username = $scope.user.email;
var password = $scope.user.password;
loginObj.$login('password', {
email: username,
password: password
})
.then(function(user) {
// Success callback
console.log('Authentication successful');
}, function(error) {
// Failure callback
console.log('Authentication failure');
});
}
}]);
app.controller('InscriCtrl', [function() {
}]);
app.controller('ListCtrl', [function() {
}]);
app.controller('MsgCtrl', [function() {
}]);
code 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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<!-- AngularFiionic servere -->
<script src="lib/firebase/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "myapi",
authDomain: "appsfactor-68466.firebaseapp.com",
databaseURL: "https://appsfactor-68466.firebaseio.com/",
storageBucket: "gs://appsfactor-68466.appspot.com",
};
firebase.initializeApp(config);
</script>
<script src="lib/angularfire/dist/angularfire.js"></script>
<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>
<script src="lib/ionic/js/angular-ui/angular-ui-router.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="myApp">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon ion-navicon">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item menu-close ui-sref="home">Acceuil</ion-item>
<ion-item menu-close ui-sref="Inscription">Inscription</ion-item>
<ion-item menu-close ui-sref="listmsg">Listes Messages</ion-item>
<ion-item menu-close ui-sref="msg">Message</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
I just getting started with Ionic and have done environment setup for the same, but when I tried to emulate the app, below is happening:
Able to start the simulator
App also starts but it shows "html code" instead of app
Below are my files, I appreciate any help finding any mistakes.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src=“js/app.js”></script>
</head>
<body ng-app="todo">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<button class="button button-assertive">I'm a button</button>
</ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module(‘todo’, ['ionic’]);
Change quotation marks from <script src=“js/app.js”></script> to <script src="js/app.js"></script>
app.js should look like this
angular.module('todo', ['ionic'])
.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();
}
});
})
And your app should look like this
I am implementing ag-Grid with angular2 in visual studio2015
and I want to implement the example from https://github.com/helix46/ag-grid-angular2-beta-ts
import {Component} from 'angular2/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';
#Component({
selector: 'agGrid',
templateUrl: "/partial/agGrid",
directives: [AgGridNg2]
})
export class agGridComponent {
constructor() {
console.log("agGrid Component Start");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
<environment names="Development">
<!-- Css -->
<link rel="stylesheet" asp-href-include="~/css/*.css">
<!-- Js -->
<script src="~/js/jquery.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/system.js"></script>
<script src="~/js/rx.js"></script>
<script src="~/js/typescript.js"></script>
<script src="~/js/angular2/angular2.dev.js"></script>
<script src="~/js/angular2/angular2-polyfills.js"></script>
<script src="~/js/angular2/http.dev.js"></script>
<script src="~/js/angular2/router.dev.js"></script>
<!--ag-grid-->
<script src="node_modules/ag-grid/dist/ag-grid.js"></script>
</environment>
<environment names="Production">
<!-- Css -->
<link rel="stylesheet" asp-href-include="~/css/*.min.css" asp-append-version="true">
<!-- Js -->
<script src="~/js/jquery.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/system.min.js"></script>
<script src="~/js/rx.min.js"></script>
<script src="~/js/typescript.min.js"></script>
<script src="~/js/angular2/angular2.dev.min.js"></script>
<script src="~/js/angular2/angular2-polyfills.min.js"></script>
<script src="~/js/angular2/http.dev.min.js"></script>
<script src="~/js/angular2/router.dev.min.js"></script>
<!--ag-grid-->
<script src="~/js/ag-grid.js"></script>
</environment>
<!-- Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'ag-grid-ng2': {
defaultExtension: "js"
},
'ag-grid': {
defaultExtension: "js"
},
'ag-grid-enterprise': {
defaultExtension: "js"
}
},
map: {
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
'ag-grid-enterprise': 'node_modules/ag-grid-enterprise',
'ag-grid': 'node_modules/ag-grid'
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<base href="/" />
<body>
<div>
#RenderBody()
</div>
</body>
</html>
but unable to load Failed to load resource: the server responded with a status of 404 (Not Found) ag-grid-ng2/main.js
which is inside node_module and I am giving the correct path, but it is still showing, unable to load resource. Here is a snap of the error.
ag-grid error message
Please help me to resolve this.
Thanking you
You are missing:
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
i.e.
var map = {
'ag-grid': 'node_modules/ag-grid',
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
};
I have an app, with a login view that the user needs to put your credentials to login.
This is my 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>Services for Partners</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's css and js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div>
<ion-nav-view animation="slide-right-left" cache-view="false"></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
<div>copyright</div>
</div>
</body>
</html>
In my index.html I am using the attribute cache-view="false".
After the user has logged in, he is redirect to home view.
Here is part of my home view:
<ion-view title="home" ng-controller="homeCtrl">
<div class="bar bar-header bar-dark">
<button class="button button-icon icon ion-gear-b"></button>
<button class="button button-icon icon ion-android-close" ng-click="closeApp()"></button>
</div>
<ion-content overflow-scroll="true" padding="true" scroll="true" class="has-header has-footer">
<!--<div class="spacer" style="width: 300px; height: 15px;"></div>-->
<div style="text-align:center;">
<img src="img/logo.png" class="logo-pequena">
</div>
<div>
In the home view, I have a button to log out, calling a method closeApp().
Here is my home controller, with my closeApp() method:
starter.controller('homeCtrl', ['$scope', '$state', '$ionicHistory', function($scope, $state, $ionicHistory) {
$scope.closeApp = function() {
//Remove todos as infos do usuário do localStorage
localStorage.clear();
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
$ionicHistory.nextViewOptions({
historyRoot: true,
disableAnimate: true,
disableBack: true
});
$state.go('login');
}
}]);
Here we can see that I am using several commands to disable ionic history.
Below, is my services.js file:
var starter = angular.module('starter.services', []);
starter.run(function($ionicPlatform,$state,$ionicHistory){
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="home"){
navigator.app.exitApp();
}
else {
$ionicHistory.backHistory();
}
}, 100);
});
Here is my route.js file:
var starter = angular.module('starter.routes', []);
//Rotas do app
starter.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider //.state(...).state(...).state(...)
//Login
.state('login', {
url: '/login',
cache: false,
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
//Novo Usuário
.state('newuser', {
url: '/newuser',
cache: false,
templateUrl: 'templates/newuser.html',
controller: 'newUserCtrl'
})
//Esqueceu a senha
.state('forgotpwd', {
url: '/forgotpwd',
cache: false,
templateUrl: 'templates/forgotpwd.html',
controller: 'forgotPwdCtrl'
})
//Sobre
.state('about', {
url: '/about',
cache: false,
templateUrl: 'templates/about.html',
controller: 'aboutCtrl'
})
//Home
.state('home', {
url: '/home',
cache: false,
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
}]);
Here I have configured all routes to not caching any view.
After all those stuffs nothing happens. My app still permits me click on back button (not a hardware button, but the software button). I am previewing my app on "Ionic View App" running in my Sony Z3 smartphone.
So, the user can go back to home page, without logging in.
I want to exit app if the user clicks the back button at login view. But after all those configurations, I am still running with this trouble.
What I need to do ?
I have already updated cordova and ionic. Is it a bug or is it possible to resolve this issue ?
Thanks.
Why don't you try this
///code to skip login page if logged in
.run(function ($rootScope, $state) {
// Check login session
$rootScope.$on('$stateChangeStart', function (event, next, current) {
if(condition to check that you are logged in..maybe store token in localstorage and heck){
if (next.name === "login") {
event.preventDefault();
$state.go('home');
}
}
});
})
for back button action
.run(['$rootScope', '$ionicPlatform','$state', '$ionicHistory',
function($rootScope, $ionicPlatform,$state, $ionicHistory){
$ionicPlatform.registerBackButtonAction(function(e){
if ($state.current.name == 'home') {
ionic.Platform.exitApp();
}
else if ($ionicHistory.backView() ) {
$ionicHistory.goBack();
}
e.preventDefault();
return false;
},101);
}])
My app has two kinds of templates. The first is used in "logged out" pages and the second one is used in "logged in" pages.
Below is the index.html which is used with all "logged out" template pages:
<!DOCTYPE html>
<html ng-app="appLoggedOut">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedout/app.js"></script>
<script src="js/loggedout/controllers.js"></script>
<script src="js/loggedout/routes.js"></script>
<script src="js/loggedout/services.js"></script>
<script src="js/loggedout/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div>
<div class="spacer" style="width: 300px; height: 15px;"></div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for Logged out pages
</div>
</body>
</html>
I need to set all my "logged in" pages to show a header and a different footer. So, it is like I have another index.html, used just for "logged in" pages.
Below is the what I want to use to all my "logged in" pages:
<!DOCTYPE html>
<html ng-app="appLoggedIn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedin/app.js"></script>
<script src="js/loggedin/controllers.js"></script>
<script src="js/loggedin/routes.js"></script>
<script src="js/loggedin/services.js"></script>
<script src="js/loggedin/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body ng-controller="homeCtrl">
<div class="bar bar-header bar-light">
Header used only in logged in pages
</div>
<div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for logged in pages
</div>
</body>
</html>
How can I define my routes, to jump from my login page (using "logged out" template) to a logged page (using "logged in" template) ?
I want to change all the page and not just load a view inside the tag "".
Thanks.
i am only discuss about the How to navigate from one template to another.
ionic that used angularjs or javaScript. is follow the simple call by state or url etc
for example Each controller have routing and there HTML page
angular.module('starter.storeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('storeDetails', {
url: '/user/:store',
abstract:true,
templateUrl: 'templates/store_detail.html',
controller: 'StoreDetailsCtrl'
})
})
.controller('StoreDetailsCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
$scope.goToNextPage=function(){
$state.go('home'); //here navigate from one template to another
}
}])
And another page
angular.module('starter.homeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
})
.controller('HomeCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
console.log('Welcome');
}])
above example show two controller StoreDetailsCtrl and HomeCtrl and i go from StoreDetailsCtrl to HomeCtrl in home page. this is navigate by javascript but there are many ways to navigate page.
in HTML side by href=#/url and also used ui-sref="stateName" in ionic for navigate page.