I'm trying to display main.html template via UI routing, but its not working for some reason. Can someone please point out the mistake in my code. Thank you.
appModule
"use strict";
angular.module("fleetOperate", ["ui.router", "mainModule"]);
UI Routing
"use strict";
angular.module('fleetOperate').config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});
mainModule
"use strict";
angular.module("mainModule", []);
main.HTML
<div class="icon-bar" ui-view="main">
<a ui-sref="" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Fleet</label>
</a>
<a ui-sref="" class="item">
<i class="fa fa-users" style="font-size:48px;"></i>
<label>Drivers</label>
</a>
<a href="#" class="item">
<i class="fa fa-calendar" style="font-size:48px;"></i>
<label>Planner</label>
</a>
<a href="#" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Trailors</label>
</a>
<a href="#" class="item">
<i class="fa fa-files-o" style="font-size:48px;"></i>
<label>Pod</label>
</a>
<a href="#" class="item">
<i class="fa fa-cog" style="font-size:48px;"></i>
<label>Settings</label>
</a>
<a href="#" class="item">
<i class="fa fa-square-o" style="font-size:48px;"></i>
<label>Control Center</label>
</a>
<a href="#" class="item">
<i class="fa fa-phone" style="font-size:48px;"></i>
<label>Communication</label>
</a>
<a href="#" class="item">
<i class="fa fa-user" style="font-size:48px;"></i>
<label>Customer Profile</label>
</a>
</div>
Index.HTML
<!DOCTYPE html>
<html ng-app="fleetOperate">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Truck Trackers</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="app/app.css" rel="stylesheet" />
<link href="app/main/main.css" rel="stylesheet" />
<script src="scripts/angular.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="app/main/mainModule.js"></script>
<script src="app/appModule.js"></script>
<script src="app/appUI_Routing.js"></script>
</head>
<body class="container-fluid">
<header class="js-title-bar">
<div class="js-logo-area">
<img class="js-icon" ng-src="http://www.cam-trucks.com/images/2.jpg"/>
<div class="js-title-area">
<p class="js-logo-title"> <strong>Truck Tracker's</strong></p>
<p class="js-logo-subtitle">Where ever you GO, we FIND you !</p>
</div>
</div>
</header>
<div ui-view></div>
</body>
</html>
Update your UI Router:
angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("main");
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});
Related
I am learning AngularJS these days and I am working on my first application which is also connected with a .NET backend. All is going well, except for one thing:
I cannot seem to get ngRoute to work properly.
I have defined my routes in my app.js file like this:
var App = angular.module('netshield', ['ngRoute']).config(function
($httpProvider, $rootScopeProvider) {
});
App.config(['$routeProvider', function ($routes) {
$routes.when("/login", { templateUrl: "login.html", controller:
"AuthController"})
.when("/index", { templateUrl: "/partials/dashboard.html", controller:
"DashboardController"})
.when("/programs", { templateUrl: "/partials/programs.html", controller:
"ProgramController"})
.otherwise({
redirectTo: 'login'
});
}]);
Now each time I visit http://localhost/netshield/index all is well (except for the partial that does not exist so I suppose we're good).
When I visit http://localhost/netshield/programs I get a Not Found error.
My index.html is this:
<!DOCTYPE html>
<html class="fixed" ng-app="netshield">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>NetShield - Control Panel</title>
<meta name="keywords" content="netshield,licensing,system,net,dotnet,license,authentication,serial,code" />
<meta name="description" content="NetShield - Licensing System">
<meta name="author" content="Nikolas Andreou">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bootstrap/vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
<link rel="stylesheet" href="bootstrap/vendor/morris.js/morris.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/skins/default.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme-custom.css">
<script src="bootstrap/vendor/modernizr/modernizr.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.js"></script>
<script src="js/Session.js"></script>
<script src="js/app.js"></script>
<script src="js/services/AuthService.js"></script>
<script src="js/controllers/AuthController.js"></script>
<script src="js/controllers/DashboardController.js"></script>
</head>
<body ng-app="netshield" <!--ng-controller="DashboardController" ng-init="onLoad()"-->>
<section class="body">
<header class="header">
<div class="logo-container">
<a href="../" class="logo">
<!--<img src="bootstrap/images/logo.png" height="35" alt="Porto Admin" />-->
</a>
<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search & user box -->
<div class="header-right">
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="bootstrap/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="bootstrap/images/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe#okler.com">
<span class="name" ng-model="User">{{User.Username}}</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="fa fa-user"></i> My Account</a>
</li>
<li>
<a role="menuitem" tabindex="-1" ng-click="logout($event)"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search & user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="index">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-active">
<a href="programs">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
<ul class="nav nav-children">
<li>
<a href="programlist">
View Program List
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Sizes
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-sidebar-sizes-xs.html">
Left Sidebar XS
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-sm.html">
Left Sidebar SM
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-md.html">
Left Sidebar MD
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<section role="main" class="content-body">
<header class="page-header">
<h2>Dashboard</h2>
<div class="right-wrapper pull-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="fa fa-home"></i>
</a>
</li>
<li><span>Dashboard</span></li>
</ol>
<a class="sidebar-right-toggle"><i class="fa fa-chevron-left"></i></a>
</div>
</header>
<div ng-view></div>
</div>
</section>
<!-- Vendor -->
<script src="bootstrap/vendor/jquery/jquery.js"></script>
<script src="bootstrap/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="bootstrap/vendor/bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/vendor/nanoscroller/nanoscroller.js"></script>
<script src="bootstrap/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="bootstrap/vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="bootstrap/vendor/jquery-placeholder/jquery-placeholder.js"></script>
<script src="bootstrap/vendor/jquery-ui/jquery-ui.js"></script>
<script src="bootstrap/vendor/jqueryui-touch-punch/jqueryui-touch-punch.js"></script>
<script src="bootstrap/vendor/jquery-appear/jquery-appear.js"></script>
<script src="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="bootstrap/vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.js"></script>
<script src="bootstrap/vendor/flot.tooltip/flot.tooltip.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.pie.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.categories.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.resize.js"></script>
<script src="bootstrap/vendor/jquery-sparkline/jquery-sparkline.js"></script>
<script src="bootstrap/vendor/raphael/raphael.js"></script>
<script src="bootstrap/vendor/morris.js/morris.js"></script>
<script src="bootstrap/vendor/gauge/gauge.js"></script>
<script src="bootstrap/vendor/snap.svg/snap.svg.js"></script>
<script src="bootstrap/vendor/liquid-meter/liquid.meter.js"></script>
<script src="bootstrap/vendor/jqvmap/jquery.vmap.js"></script>
<script src="bootstrap/vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<script src="bootstrap/javascripts/theme.js"></script>
<script src="bootstrap/javascripts/theme.custom.js"></script>
<script src="bootstrap/javascripts/theme.init.js"></script>
<script src="bootstrap/javascripts/dashboard/examples.dashboard.js"></script>
</body>
</html>
Any idea guys what am I doing wrong? I do not seem to get it to work properly. Any help would be greatly appreciated.
You have to use 'ui.router' instead of 'ngRoute'
Try removing the slashes before the templateUrl path to see if it works
templateUrl: "/partials/dashboard.html"
becomes
templateUrl: "partials/dashboard.html"
Also check if the partials folder is in the same directory as index.html
Also have you include the right ngRoute module in your script tag
Here is a CDN link. Check if this works:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js
Using UI-Router for Angular and Bootstrap for a navbar I'm trying to turn anchor inside dropdown clickable on but isn't working on mobile. I saw ui-sref not working in bootstrap dropdown and the solution is not working for me. I'm not getting any error on console.
HTML:
<div class="container">
<a class="mainnav-toggle is-open" data-toggle="collapse" data-target=".mainnav-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</a>
<nav class="mainnav-collapse collapse" role="navigation" aria-expanded="false" style="height: 0px;">
<ul class="mainnav-menu">
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
Links<i class="mainnav-caret"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a ui-sref="auth.add()">
<i class="fa fa-users dropdown-icon" aria-hidden="true"></i>
Link 1
</a>
</li>
<li>
<a ui-sref="auth.list()">
<i class="fa fa-history dropdown-icon" aria-hidden="true"></i>
Link 2
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
Reference Order:
<script src="bower_components/jquery.slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script src="bower_components/select2/dist/js/select2.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.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/angular-bootstrap-toggle/dist/angular-bootstrap-toggle.min.js"></script>
<script src="dist/app.min.js"></script>
JS: the UI-Router config:
var app = angular.module('accountsMod');
app.config(function routeConfig ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('auth.add', {
url: '/accounts/add',
controller: 'AccountController',
templateUrl: 'app/components/account/add.html'
})
.state('auth.list', {
url: '/accounts/add',
controller: 'AccountController',
templateUrl: 'app/components/account/list.html'
})
}
The problem focus is: when I touch on these anchors in navbar collapsed according to responsive design provided by bootstrap on mobile phone, then menu closes and nothing happening.
One solution: I had to install 'angular-ui-bootstrap' package and did some changes as follow:
Referencing to directive:
var app = angular.module('accountsMod',['ui.router', 'ui.bootstrap']);
Replacing each html tag for toggle menu as follow (about old in comment):
HTML:
`
Toggle navigation
<nav class="mainnav-collapse collapse" role="navigation" aria-expanded="false" style="height: 0px;">
<ul class="mainnav-menu">
<li uib-dropdown> <!--OLD: <li class="dropdown">-->
<a uib-dropdown-toggle> <!--OLD:<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">-->
Links<i class="mainnav-caret"></i>
</a>
<ul uib-dropdown-menu><!--OLD: <ul class="dropdown-menu" role="menu">-->
<li>
<a ui-sref="auth.add()">
<i class="fa fa-users dropdown-icon" aria-hidden="true"></i>
Link 1
</a>
</li>
<li>
<a ui-sref="auth.list()">
<i class="fa fa-history dropdown-icon" aria-hidden="true"></i>
Link 2
</a>
</li>
</ul>
</li>
</ul>
</nav>
`
So the UI-SREF links started working in mobile navigation!! Tks!
I am calling a Bootstrap Model on hyperlink.
My code was in "MasterPageNavBar.html"
Login/SignUp
Here is my completed code "MasterPageNavBar.html"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/bootstrap-theme.css" rel="stylesheet" />
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui-router.min.js"></script>
<script src="../Scripts/Collapse.JS"></script>
</head>
<body>
<div>
<div>
<h3>AngularJS Tutorial</h3>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target="#mynavbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-ui-sref="home">Home</a></li>
<li><a data-ui-sref="contactus">Contact</a></li>
<li>Gallery</li>
<li>About</li>
</ul>
<ul class="nav navbar-right navbar-nav">
<li>
Login/SignUp
<!-- Modal HTML -->
<form>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body form-group">
<input style="margin-bottom:15px" type="text" class="form-control " placeholder="User Name ---" />
<input style="margin-bottom:5px" type="text" class="form-control " placeholder="Password" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Login</button>
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
When i run alone this page , Modal was working fine. Here is the output of a model.
up to here code is fine.
My Problem is here
I am calling this "MasterPageNavBar.html page in another page "index.html". Here is my "Index.html" code( this my start page).
**<div ng-include="'../Views/MasterPageNavBar.html'"></div>**
<div ng-include="'../Views/ContentPage.html'"></div>
Modal window is not working through running "Index.html" page.
One thing i have noticed that " when on click Login link 'UI-Route functionality is working' and it's is looking for a myModel page and its is not finding. Below is my ui.route module. ( I don't want to call this ui.rotuer on click Login link.
**Login/SignUp**
var myrouting=angular.module('routingDemoApp', ['ui.router'])
myrouting.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("", "/index")
$stateProvider
.state('index', {
url: "/index",
templateUrl: "../Views/home.html"
})
.state('contactus', {
url: "/contactus",
templateUrl: "../Views/contactus.html",
})
.state('home', {
url: "/home",
templateUrl: "../Views/home.html",
})
You can use ng-click to open your modal as given below:
Login/SignUp
In your controller write the following code:
$scope.openModal= function(){ $("#myModal").modal("show"); }
I hope it will help you
Your best bet is to use the data-target attribute that Bootstrap supports (http://getbootstrap.com/javascript/#via-data-attributes). Use it like data-target="#myModal" and remove the href="". Then Angular will not attempt to navigate to it.
Hi i tried to make ngRoute works but found post about ui-route. I follow this example here but i can't get anything working, tho i have no error message in the console.
I'm trying with pure text partials atm.
index.html :
<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<!-- <script src="js/jquery.js"></script>
<script src="js/angular-route.js"></script>-->
<script src="js/angular.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="js/todolist.js"></script>
<script src="js/controller.js"></script>
<!-- App Script -->
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid" >
<div class="navbar-header">
<a class="navbar-brand" ui-sref="index">Pense-bête</a>
</div>
<div class="navbar navbar-right" id="myNavbar" >
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button></li>
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</button></li>
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button></li>
</ul>
</div>
</div>
</nav>
<div class="row">
</div>
<div class="row" id="menu" ng-controller='navCtrl'>
<div class="col-sm-3 cold-md-2" id="left-menu">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active: menu=='inbox'}"><a ui-sref="inbox" ng-click="menu='inbox'"><span class="glyphicon glyphicon-inbox">
</span> Boite de réception</a></li>
<li ng-class="{active: menu=='today'}"><a ui-sref="today" ng-click="menu='today'"><span class="glyphicon glyphicon-calendar"></span> Aujourd'hui</a></li>
<li><span class="glyphicon glyphicon-calendar"></span> Cette semaine</li>
<li><i class="glyphicon glyphicon-pushpin"></i> Important </li>
<li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-cutlery"></span>
Repas</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-shopping-cart"></span>
Courses</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-list"></span>
Perso</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-plus"></span>
Nouvelle liste</a></li>
</ul>
</div>
<div class="col-sm-9 cold-md-10" id='main-view'>
<div ui-view>
</div>
</div>
</div>
</body>
</html>
todolist.js :
var todoList = angular.module('todoList', ["ui.router"])
todoList.config(function($stateProvider){
$urlRouterProvider.otherwise("/inbox");
$stateProvider
.state('inbox', {
url: "/inbox",
templateUrl: "partials/inbox.html"
})
.state('today', {
url: "/today",
templateUrl: "partials/today.html"
})
})
controller.js :
var todoListController= angular.module('todoList', []);
todoListController.controller('todoCtrl',['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}]);
todoListController.controller('todayCtrl', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
todoListController.controller('navCtrl', function($scope) {
$scope.menu = 'inbox';
});
I updated the plunk. The following were corrected.
moved angularjs script as the first script.
include angular-ui-router.min.js followed by angularjs
the controller has a different variable todoListController. Not todoList
The $urlRouterProvider not mentioned in script.js
script.js
var todoList = angular.module('todoList', ["ui.router"])
todoList.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/inbox");
$stateProvider
.state('inbox', {
url: "/inbox",
templateUrl: "inbox.html"
})
.state('today', {
url: "/today",
templateUrl: "today.html"
})
})
index.html
<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="index">Pense-bête</a>
</div>
<div class="navbar navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</button>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="row"></div>
<div class="row" id="menu" ng-controller="navCtrl">
<div class="col-sm-3 cold-md-2" id="left-menu">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active: menu=='inbox'}">
<a ui-sref="inbox" ng-click="menu='inbox'">
<span class="glyphicon glyphicon-inbox"></span>
Boite de réception</a>
</li>
<li ng-class="{active: menu=='today'}">
<a ui-sref="today" ng-click="menu='today'">
<span class="glyphicon glyphicon-calendar"></span>
Aujourd'hui</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-calendar"></span>
Cette semaine</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-pushpin"></i>
Important </a>
</li>
<li>
<a href="#profile" data-toggle="tab">
<span class="glyphicon glyphicon-cutlery"></span>
Repas</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-shopping-cart"></span>
Courses</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-list"></span>
Perso</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-plus"></span>
Nouvelle liste</a>
</li>
</ul>
</div>
<div class="col-sm-9 cold-md-10" id="main-view">
<div ui-view></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>
<script src="controller.js"></script>
</body>
</html>
controller.js
todoList.controller('todoCtrl',['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}]);
todoList.controller('todayCtrl', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
todoList.controller('navCtrl', function($scope) {
$scope.menu = 'inbox';
});
I'm trying to learn ionic framework, and I have been reading routing side of things and this is were I am getting a little stuck.
I had my app working, but now I want to add more views. So, I have started by putting my home view in a state called 'home' (sorry if i am not using the correct terminology).
Ok here is my html:
<!DOCTYPE html>
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Venues</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<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-positive">
<div class="buttons">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</div>
<h1 class="title">Venues</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<ion-view nng-controller="MyCtrl" title="home">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="item in items">
<a href="#/venue/{{ item[0].id }}">
<div class="list card">
<div class="item item-avatar">
<img src="{{ item[0].profile_pic }}">
<h2 class="item-venue-title">{{ item[0].name }}</h2>
<p class="item-location">UK</p>
</div>
<div class="item item-body">
<img class="full-image" src="{{ item[0].heder_img }}">
</div>
</a>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</ion-view>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
<a class="tab-item">
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>
<i class="icon ion-leaf"></i>
</a>
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
</nav>
</ion-pane>
</body>
</html>
I have added the following to the .js file
var example=angular.module('ionic.example', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/home');
});
What I don't understand is how do you say this is the 'first' view so to speak.
Any advice would be appreciated.
the section
$urlRouterProvider.otherwise('/home');
would define the index route so in this case /home would be the first page.
The content of home.html is rendered inside the ion-nav-view, see below
<body ng-app="quote">
<!-- where the initial view template will be rendered -->
<div ng-controller="AppCtrl">
<ion-nav-view></ion-nav-view>
</div>
</body>
and the content for home.html goes inside the ion-content tag, see below
<ion-view title="your title">
<ion-content>
your content here
</ion-content>
</ion-view>
I done it by
<script type="text/ng-template" id="home.html">
<ion-view nng-controller="MyCtrl" title="home">
<!--content here--!>
</ion-view>
</script>
and in the js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/');
});