My app doesnot need any tab .Can i create a app without any tab using onic framework? But page will navigate on click of buuton.I have to first display a login page then on login i would want it to display list of items on click of it edit page is displayed.How can it be done?I have tried below code
index.html
<body ng-app="starter">
<ion-nav-view name="login"></ion-nav-view>
<ion-nav-view name="home"></ion-nav-view>
</body>
Then
angular.module('starter', ['ionic','starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$urlRouterProvider.otherwise('/login');
});
Then in login.html
<ion-view title="Login">
<ion-content class="has-header padding">
login button and other inputs
</ion-content>
</ion-view>
Now on login home page should be displayed can anyone suggest how to route
I came here for the same question. Now I have the answer.
index.html:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js:
app = angular.module('starter', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
$urlRouterProvider.otherwise('/login');
});
also, make sure you define your templates home and login:
<script type="text/ng-template" id="home.html">
<p>This is home.</p>
</script>
<script type="text/ng-template" id="login.html">
<button ng-click="logUserIn()">Log me in!</button>
</script>
and for dynamic interaction, you can use $state in your controller:
app.controller('AppCtrl', function($scope, $state) {
$scope.logUserIn = function() {
$state.go('home');
}
});
Hope it helps. Cheers!
Related
Body of my index page looks in the following way:
<body >
<div ng-view></div>
</body>
I config my app in this way:
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('main', {
url: '/',
templateUrl: 'main.html'
})
$locationProvider.html5Mode(true);
});
The content of my main.html file is:
<div>
Example content
</div>
I would like my page to dispaly the content of main file when entering the main address. However, it is blank. What am I missing (I am new to angular)?
in my ionic app, I do not need menu or tabs, just a blank ui-view that renders the home view. but it shows a blank page.
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js
angular.module('starter', ['ionic','starter.controllers'])
.run( /**/ )
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '',
abstract: true,
template: '<ui-view/>',
controller: 'AppCtrl'
})
.state('app.home',{
url:'/home',
templateUrl:'templates/home.html',
controller:'homeCtrl'
})
});
home.html
<ion-view view-title="home">
<ion-content>
<h1>This is the Home page</h1>
</ion-content>
</ion-view>
why does the home.html not render into the abstract view?
the ionic server response:
Request URL:http://localhost:8100/templates/home.html
Request Method:GET
Status Code:304 Not Modified
the chrome dev tools, the only tag which renders in app
<ion-nav-view class="view-container" nav-view-transition="android"></ion-nav-view>
I have started learning Ionic. I am tying to set a default route to my home.html but it is not working.
index.html
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button icon ion-navicon"></button>
</div>
<h1 class="title" style="text-align: center;">Title!</h1>
<div class="buttons">
<button class="button icon ion-home"></button>
</div>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
home.html
<h1>Hello world!</h1>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
'login': {
templateUrl: 'templates/home.html',
controller: 'PlaylistsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
});
help me where I am doing wrong.
I think you should change the url of home
.state('home', {
url: '/home',
views: {
'login': {
templateUrl: 'templates/home.html',
controller: 'PlaylistsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
This is my app.js
angular.module('data',['ui.router']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/app/views/showusers.html',
controller: 'Crud'
})
.state('about', {
url: '/about',
templateUrl: '/app/views/addusers.html',
})
});
CrudController.js
angular.module('values', []).controller('Crud', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
function edituser(id)
{
console.log(id);
}
});
This is index file
<!DOCTYPE html>
<head>
<title>
MEAN Stack App
</title>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="data">
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/app/controller/CrudController.js"></script>
<script src="/app/app.js"></script>
<div class="container">
<h1>MEAN Application</h1>
<h1>xsx{{firstName}}</h1>
<div ui-view>
</div>
</div>
</body>
</html>
when I define controller in app.js in site provider, it returns controller is not a function got undefind.
I am using angularjs1.5.8 version.Please help me out from this problem. I am new to this tech.. Thanks
You need to link both the App.js and Controller. In your service:
angular.module('values', ['controllerinject']) // => here you injected your controller
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/app/views/showusers.html',
controller: 'Crud'
})
$urlRouterProvider.otherwise('/home');
})
And in your controller add same angular.module('controllerinject', [])
I am currently converting an AngularJS HTML app to ASP.NET MVC and I have laid out pretty much everything and but when the page loads I see the controller(dashboard.js) but its not firing any function from the dashboard controller here is what I'm doing:
in my _layout.cshtml I have the following:
<html ng-app="app_angular" >
<head>
<script src="~/script/angular/angular.js"></script>
<script src="~/script/angular/angular-route.js"></script>
<script src="~/script/angular/angular-resource.js"></script>
<script src="~/script/angular/angular-animate.js"></script>
<script src="~/script/angular/angular-cookies.js"></script>
<script src="~/script/js/jquery.min.js"></script>
<script src="~/script/js/bootstrap.min.js"></script>
<script src="~/Scripts/myapp.js"></script>
<script src="~/Scripts/controllers/dashboard.js"></script>
<script src="~/Scripts/routes.js"></script>
</head>
<body>
<ng-view class="fx fx-slide page"></ng-view>
<div class="container">
<h3 class="row title">
<div class="col-xs-6">Dashboard</div>
<div class="col-xs-6 text-right text-gray">{{ today | date:'MMMM d, y' }}</div>
</h3>
</div>
<section ng-repeat="template in templates">
<ng-include src="template"></ng-include>
</section>
<div class="container" ng-init="init()">
<!-- Buttons -->
</body>
</html>
myapp.js
var app_angular = angular.module('app_angular', ['ngCookies', 'ngRoute', 'ngResource', 'ngAnimate']);
dashboard.js
'use strict';
app_angular
.controller('dashboard', function ($rootScope, $scope) {
debugger
$scope.today = new Date();
/* set template subviews */
$scope.templates = {
stream: "../../views/templates/firstqtr.html",
modal: "../../views/templates/secondqtr.html",
loan: "../../views/templates/thirdqtr.html"
};
});
routes.js(first approach: does not work)
app_angular
.config(function($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/home/index'
})
.when('/home/about', {
controller: 'dashboard',
templateUrl: '../../views/home/about'
})
.otherwise({
redirectTo: '/'
});
});
routes.js(second approach: does not work)
app_angular
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider
.when('/', { templateUrl: '/home/index', controller: 'dashboard' })
.when('/', { templateUrl: '/home/about', controller: 'dashboard' })
.otherwise({ redirectTo: '/home' });
}])
What else I should be doing any help?
Assuming that /home is the path of your MVC page
you should change your angular routing to use path's that are
relative to your page.
add a view templates that are loaded into your
page
the angular routing below would:
load your mvc page /home/index and inject the template dashboard.html into ng-view element
(MVC controller Home with Action Index is required)
load your mvc page /home/index and inject the template about.html into ng-view element
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: '../../views/templates/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '../../views/templates/about.html'
})
.otherwise({
redirectTo: '/'
});
});
Remark:
You should rethink your approach of mixing MVC and anjularjs that not a good approach.
Try renaming your _layout.cshtml into index.html and start with a plain (ASP.NET MVC free) SPA.
Files:
index.html
views\dashboard.html
views\about.html
Routes:
app_angular
.config(function ($routeProvider, $httpProvider) {
$routeProvider
/* dashboard */
.when('/', {
controller: 'dashboard',
templateUrl: 'views/dashboard.html'
})
.when('/about', {
controller: 'dashboard',
templateUrl: '/views/about.html'
})
.otherwise({
redirectTo: '/'
});
});