Quite a simple question, but still I'm struggeling with it. Basically the idea was to have a login page that works without any ion-side-menus. After logging in the ion-side-menus will be defined as abstract and it will work as in the starter example (see demo).
I've created a demo to demonstrate what's not working: demo
These are the files:
index.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 data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content class="has-header"></ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// routing
$stateProvider
// start
.state('start', {
url: '/',
templateUrl: 'start.html',
controller: 'DashCtrl'
})
$urlRouterProvider.otherwise('/');
});
start.html
<ion-view>
<ion-content scroll="false">
<div class="intro padding row row-center">
<div class="col">
<h1>Hello World</h1>
</div>
</div>
</ion-content>
</ion-view>
controllers.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
})
The content from start.html needs to show up when openen the / but nothing is there. I guess I#m doing something wrong in index.html propably using the wrong tags.
Simple fix:
<ion-nav-view class="has-header"></ion-nav-view>
Instead of <ion-content> inside index.html.
Update plunker: http://plnkr.co/edit/Qdw2aAYM8UxI9nS71hkl?p=preview
Related
While learning/reading angular docs, it warns about declaring the controller again using ng-controller.
Does this describe my code below, declaring MainMenuCtrl twice. First in the app.js and the second time in the body tag of index.html? Thanks
//---index.html-------------------------------
<!doctype html>
<html lang="en" ng-app="angApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/project_student/">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/first_page.js"></script>
<script src="js/controllers/second_page.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body ng-controller="MainMenuCtrl"> //<<------1st declare-----------------
<header>
<button class="menuLeft" type="button" ng-click="toggleList()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main class="listview" ng-hide="showListView" ng-view></main>
<footer id="footer" class="footer">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
//---app.js-------------------------------
(function () { //y010
'use strict';
angular
.module('angApp', ['ngRoute', 'MainMenuCtrl']) //<<------2nd declare-----------
.config(['$routeProvider', routeProvider]); //y024
})();
function routeProvider ($routeProvider) {
$routeProvider.when('/menuItems', {
url: "/menuItems",
templateUrl: 'views/mainMenu.html',
controller: 'MainMenuCtrl' //<<-------- called-------------
}).when('/first_page', {
url: "/first_page",
templateUrl: 'views/first_page.html',
controller: 'FirstPageController'
}).when('/second_page', {
url: "/second_page",
templateUrl: 'views/second_page.html',
controller: 'SecondPageController'
})
.otherwise({ //home page
redirectTo: '/menuItems'
});
}
No, you are declaring it only once. In the template you are just declaring that body and its contents should come in the scope of the controller.
I have the following scenario:
Mobile application written in Angular.
Login page that has not special layout - simple page.
home page that have a special layout including header and footer.
internal pages that also include header and footer.
So i want to be able to use two layouts 1- blank 2- with header and footer.
on my index.html page i added:
<div ui-view class="app-content"></div>
This is how my state provider looks like:
.state('layout', {
templateUrl: 'partials/mobile/layout.html',
reloadOnSearch: false
})
.state('homepage', {
url: "/",
templateUrl: 'partials/mobile/home.html',
parent: 'layout',
})
.state('internal-page', {
url: "/internal/:id",
templateUrl: 'partials/mobile/internal.html',
parent: 'layout',
controller:'InternalController',
})
.state('login', {
url: "/login",
templateUrl: 'partials/mobile/login.html',
controller: 'MobileLoginController',
})
in layout.html i have used the same ui-view again:
<!-- App Body -->
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
</div>
The result is duplicate views, i get the same view twice when i'm using layouts.
The question:
Can someone explain what am i doing wrong, and how can i nested the ui-view one inside another without duplicate the page?
My index.html complete page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.css" />
<link rel="stylesheet" href="css/mobile/layout.css"/>
<script src="bower_components/angular1.3/angular.js"></script>
<script src="bower_components/angular1.3/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.migrate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-websocket/angular-websocket.js"></script>
<script src="js/common/app.js"></script>
<script src="js/mobile/app.js"></script>
<script src="js/common/services.js"></script>
<script src="js/common/controllers.js"></script>
<script src="js/common/filters.js"></script>
<script src="js/mobile/controllers.js"></script>
<script src="js/mobile/directives.js"></script>
<script src="js/mobile/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="ApplicationController" ng-swipe-right="swipe('right')" ng-swipe-left="swipe('left')">
<div data-ng-show="loading" class="app-content-loading">
<div class="spinner-background">
<div class="loader-image"></div>
</div>
</div>
<div ui-view class="app-content"></div>
<div ui-yield-to="modals"></div>
</body>
</html>
My app.js page:
angular.module('myApp', [
'myApp.common',
'ngRoute',
'ngTouch',
'ui.router',
'ui.bootstrap',
'mobile-angular-ui',
'ngCookies',
'myApp.filters',
'myApp.services',
'myApp.services.mobile',
'myApp.directives',
'myApp.controllers',
'myApp.controllers.mobile',
'mobile-angular-ui.gestures',
'mobile-angular-ui.migrate',
'angular-websocket'
])
I created working plunker - BUT 1 : 1 with your question snippet. Based on that code you've shown, I must say:
All your (shown) code is correct and working. The issue is elsewhere...
It could be some lost ui-view elsewhere
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
// suspected to me is lost child ... with the ui-view attribute
<div ui-view></div> // doubled target declaration
</div>
Check that your code is working here
I am trying to load a login.hml to my index.html using angular-route and ng-view, but for some reason it doesnt work.
<!doctype html>
<html ng-app="Test">
<head>
<script src="public/lib/angular/angular.min.js"></script>
<script src="public/lib/angular/angular-route.min.js"></script>
<script src="public/lib/angular/angular-animate.min.js"></script>
<script src="public/modules/core/core.client.module.js"></script>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="cf" ng-include="'public/modules/navigation/views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
A very simple JS file which loads the Angular modlule and call the $routeProvider for /login url:
var myApp = angular.module('Test',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
}).otherwise({redirectTo: '/about'});
}]);
login.html:
<h1>
<p>Login</p>
</h1>
I have scaffold ionic project with generator-ionic and created a blank project. I have tried to add a state but the app doesnt load the template defined in any of the state.
here is my app.js
'use strict';
angular.module('IonicCarOPedia', ['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) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'view/main-view.html',
controller:'MainCtrl1'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
})
.controller('MainCtrl1', function(){
console.log("main ctrl alled")
});
Here is 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>"IonicCarOPedia"</title>
<link rel="stylesheet" href="lib/ionic/release/css/ionic.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="IonicCarOPedia">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic/release/js/ionic.js"></script>
<script src="lib/ionic/release/js/ionic-angular.js"></script>
<script src="cordova.js"></script>
<script src="scripts/app.js"></script>
<nav-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></nav-bar>
<nav-view></nav-view>
</body>
</html>
and main-view.html:
<view title="'Employees'">
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
</label>
</div>
</view>
What ever i do template isnt shown, not even the MainCtrl1 is called.
Any help is appreciated. Thanks
Ok Seems like some silly mistake, but I did tried it before which never worked, but its working now.
I have changed ionic elements: nav-bar to ion-nav-bar, nav-view to ion-nav-view and view to ion-view and that worked now.
app.js file is
var app = angular.module('TaskApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/Home/Index', {
controller: 'TaskManager',
templateUrl: '/Home/Index'
}).otherwise({ redirectTo: "/" });
$locationProvider.html5Mode(true);
}]);
app.controller('TaskManager', function () {
//$location.path('/');
});
<!DOCTYPE html>
<html ng-app="TaskApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div ng-view></div>
Home
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h1> #Html.Label("Task Manager", new { #class = "heading" })</h1>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/Page/app.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
When i click on home link button then a lots of request is running and my page is hang give warning that :
WARNING: Tried to load angular more than once.
I can't found what problem is in my code