I'm trying to add templates to links, which is working, however I was wondering if there was a possibility to add your header and footer to it aswell, now I'm copying my header and footer for each page.
here's my js:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/startpage.html',
controller: 'PageCtrl',
controllerAs: 'page'
})
.when('/page/test', {
templateUrl: 'test.html',
controller: 'PageCtrl',
controllerAs: 'page'
})
and here's the template im loading them in
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-animate.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
<title>SiteEngine Mobile</title>
</head>
<body ng-app="ngViewExample">
<div class="fixedHeaderApp">
<div class="headerIconLogo">
<img src="img/world_icon.png" width="28px" height="28px" />
</div>
<span class="blue">Site</span><span class="orange">Engine</span>
</div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="homebackimgWrapper">
<div class="titleLarge">SiteEngine</div>
<div class="titleSmall">Mobile</div>
</div>
<div class="container">
<div class="loginLogo">
<img src="img/loginIcon.png" width="120px" height="120px" />
</div>
<form action="views/startpage.html">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Ingelogd blijven
</label>
</div>
<button type="submit" class="btn btn-primary btnq-lg btn-block">Inloggen</button>
</form>
<div class="whitespace"></div>
<div ng-controller="HomeController as product">
<div ng-repeat="product in product.products">
<h4>{{product.name}}</h4>
<button ng-show="product.canPurchase">Add to stomach</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Also I have different pages with different menu options.
You can try use ng-view as place for including yours templates. Your footer and header will be outside that ng-view. You can also rendering your menu directly in html. Just put map of yours menus and links somewhere and render it in html.
Related
I've a trouble in cookies. When I use ngCookies in my project, there's something wrong in my div (alert).
enter image description here
And here's my app.js
angular.module('postLogin', [ngCookies])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
this.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent(this.inputData.username) +
'&password=' +
encodeURIComponent(this.inputData.password);
$http({
method: 'POST',
url: 'userauth.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
//console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'success.html';
} else {
$scope.errorMsg = "Username and password do not match.";
}
})
}
}]);
And here's my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex"/>
<title>angulrjs login page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" id="main-css"/>
<link href="css/style.css" rel="stylesheet" id="main-css"/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-app="postLogin" ng-controller="PostController as postCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<div class="row">
<img src="images/logo.jpg" class="imglogo"/>
</div>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login using username & password</div>
</div>
<div class="panel-body" >
<form name="login" ng-submit="postCtrl.postForm()" class="form-horizontal" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" id="inputUsername" class="form-control" required autofocus ng-model="postCtrl.inputData.username"/>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" id="inputPassword" class="form-control" required ng-model="postCtrl.inputData.password"/>
</div>
<div class="alert alert-danger" ng-show="errorMsg">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×</button>
<span class="glyphicon glyphicon-hand-right"></span> {{errorMsg}}
</div>
<div class="form-group">
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-primary pull-right" ng-disabled="login.$invalid">
<i class="glyphicon glyphicon-log-in"></i> Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
When I didn't use ngCookies
angular.module('postLogin', [])
It could be run as normally. Please help me, I really want it to throwing username in my login form to next page. I can't use $cookies like session in php. Thanks.
In your module setter (angular.module...) when you inject dependent modules they must be in quotes. In your example there are no quotes surrounding ngCookies. Also, your index.html doesn't appear to reference the angular-cookies.js file which is not part of the base angular.js file.
Check development tools for specific error(F12).
I created a body class so I could use different CSS for different pages:
homepage.js
.controller('HomePageCtrl',function($scope,$rootScope,appService) {
$rootScope.bodyClass = 'home-page'
login.js:
.controller('LoginCtrl', function ($rootScope,$scope,appService,$window) {
$rootScope.bodyClass = 'login-page'
index.html:
<body ng-app="yoApp" data-ng-class="bodyClass">
It works, but when I click to another page the previous class is maintained and I have to hit refresh to see the new class.
From Login page to Home page before refresh:
<body ng-app="yoApp" data-ng-class="bodyClass" class="ng-scope login-page">
Home page after refresh:
<body ng-app="yoApp" data-ng-class="bodyClass" class="ng-scope home-page">
What is causing this and how to fix it?
It is working perfectly on my machine. I have created a sample application to test the scenario.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8" />
<title>Into to Angular.js</title>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body class="container" ng-class="bodyClass">
<div class="row">
<div class="col-sm-12">
<h1>Intro to Angular</h1>
<div id="view" ng-view=""></div>
</div>
</div>
</body>
</html>
home.html
<div id="login" class="row">
<div class="col-sm-6 col-sm-offset-3">
Welcome To Home Page.
</div>
</div>
login.html
<div id="login" class="row">
<div class="col-sm-6 col-sm-offset-3">
<form>
<fieldset class="radius">
<div class="row">
<div class="col-sm-6 columns">
<input type="text" class="form-control" name="username" placeholder="username" required="" />
</div>
<div class="col-sm-6 columns">
<input type="password" class="form-control" name="password" placeholder="password" required="" />
</div>
</div>
<br>
Login
</fieldset>
</form>
</div>
</div>
app.js
var app = angular.module("app", ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'login.html',
controller: 'LoginController'
});
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
});
})
.controller('HomeController', function($rootScope, $scope) {
$rootScope.bodyClass = 'bg-info'
})
.controller('LoginController', function($rootScope, $scope) {
$rootScope.bodyClass = 'bg-danger'
});
See plnkr.
Material design features not working while using Angular states.
My set up is as follows:
1. index.html contains all styles and scripts
2. layout.html contains elements of the page layout and UI-VIEW
3. and partial pages are the rest
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Material Admin - Form basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="your,keywords">
<meta name="description" content="Short explanation about this website">
<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css?1422792965" />
<link type="text/css" rel="stylesheet" href="css/materialadmin.css?1425466319" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?1422529194" />
<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css?1421434286" />
</head>
<body class="menubar-hoverable header-fixed ">
<!-- BEGIN JAVASCRIPT -->
<script src="js/Mdesign/jquery-1.11.2.min.js"></script>
<script src="js/Mdesign/jquery-migrate-1.2.1.min.js"></script>
<script src="js/Mdesign/bootstrap.min.js"></script>
<script src="js/Mdesign/spin.min.js"></script>
<script src="js/Mdesign/jquery.autosize.min.js"></script>
<script src="js/Mdesign/jquery.nanoscroller.min.js"></script>
<script src="js/Mdesign/App.js"></script>
<script src="js/Mdesign/AppNavigation.js"></script>
<script src="js/Mdesign/AppOffcanvas.js"></script>
<script src="js/Mdesign/AppCard.js"></script>
<script src="js/Mdesign/AppForm.js"></script>
<script src="js/Mdesign/AppNavSearch.js"></script>
<script src="js/Mdesign/AppVendor.js"></script>
<script src="js/Mdesign/Demo.js"></script>
<script src="js/Dependencies/angular.js"></script>
<script src="js/Dependencies/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<!-- END JAVASCRIPT -->
</body>
</html>
Layout.html
<!-- HEADER BEGINS -->
<header id="header" >
<div class="headerbar">
<div class="headerbar-left">
<ul class="header-nav header-nav-options">
<li class="header-nav-brand" >
<div class="brand-holder">
<a href="">
<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
</a>
</div>
</li>
<li>
<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
</div>
</div>
</header>
<!-- HEADER ENDS -->
<!-- BASE BEGINS -->
<div id="base">
<div id="content">
<!-- SECTION BEGINS - our UI-VIEW goes here -->
<section>
<div class="container">
<div ui-view>
</div>
</div>
</section>
<!-- SECTION ENDS -->
</div>
<!-- BEGIN MENUBAR-->
<div id="menubar" class="menubar-inverse ">
<div class="menubar-fixed-panel">
<div>
<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="expanded">
<a href="../../html/dashboards/dashboard.html">
<span class="text-lg text-bold text-primary ">MATERIAL ADMIN</span>
</a>
</div>
</div>
<div class="menubar-scroll-panel">
<!-- BEGIN MAIN MENU -->
<ul id="main-menu" class="gui-controls">
<li>
<a href="">
<div class="gui-icon"><i class="md md-home"></i></div>
<span class="title">Dashboard</span>
</a>
</li>
<li class="gui-folder">
<a>
<div class="gui-icon"><i class="md md-email"></i></div>
<span class="title">Email</span>
</a>
</li>
</ul>
<!-- END MAIN MENU -->
<!-- FOOTER COPYRIGHT BEGINS-->
<div class="menubar-foot-panel">
<small class="no-linebreak hidden-folded">
<span class="opacity-75">Copyright © 2014</span> <strong>Vinayak</strong>
</small>
</div>
<!-- FOOTER COPYRIGHT ENDS -->
</div>
</div>
<!-- END MENUBAR -->
</div>
<!-- END BASE -->
app.js
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'index.html'
})
.state('layout', {
url: '',
templateUrl: 'pages/layout.html'
})
.state('page1', {
url: '/page1',
templateUrl: 'pages/page1.html'
})
.state('page2', {
url: '/page2',
templateUrl: 'pages/page2.html'
})
});
I know its late, but just had the same issue and maybe can help someone else.
Using Material Design Lite in an Angular app (1.x) with nested views (courtesy of ui-router), not all the MDL components display correctly in the nested views - but it works ok if you place it all in the index file.
adding the following to your angular.run function ensures the components get rendered correctly:
app.run(function($rootScope, $timeout) {
// Required so that MDL components render correctly when using nested views
$rootScope.$on('$viewContentLoaded', function() {
$timeout(function() {
componentHandler.upgradeAllRegistered();
})
})
I have a header area before my ui-view. I don't want to include my header in every template file. How can I use a directive or something to get a button on top of the page?
The button depends on the pages.
Here some examples:
My main index.html
<!DOCTYPE html>
<html ng-app="smarthome">
<head>
<script type="text/javascript" src="/lib/ionic/js/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/ionic/js/angular-ui/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<section id="content">
<div class="page-header row">
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
Why don't you link a controller to the header and use ng-show in the top div of the header?
Like this:
<body>
<section id="content" ng-controller="headerCtrl">
<div class="page-header row" ng-show="isVisible()>
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
I had a similar requirement. You could add the button function in ng-click by adding the function
angular.module('app', ['LocalStorageModule'])
.run(['$rootScope', function ($rootScope) {
$rootScope.yourFunction = function () {
console.log("clicked here");
}
}]);
I have problem with angular routing.
index.html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular-route#*" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="loginController.js"></script>
<script src="loginService.js"></script>
<script src="AppController.js"></script>
</head>
<body ng-app="betsApp" ng-controller="appCtrl">
<div class="container">
<div ng-view></div>
</div>
</body>
AppController.js
var betsApp = angular.module('betsApp', ['ngRoute', 'loginApp', 'loginService']);
betsApp.config(function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.when('/', {templateUrl: '/error.html'})
.when('/login', {templateUrl: '/pages/loginView.html'});
});
betsApp.controller('appCtrl', function($scope)
{
});
loginView.html:
<div ng-app="loginApp" ng-controller="loginCtrl">
<h1>Login</h1>
<hr>
<form>
<div class="form-group">
<input type="email" ng-model="credentials.email" value="{{credentials.email}}">
</div>
<div class="form-group">
<input type="password" ng-model="credentials.password" value="{{credentials.password}}">
</div>
<div class="form-group">
<input type="button" value="Login" ng-click="doLogin()">
</div>
</form>
</div>
The problem is that I see only a white page without any inserted view. here is a link to plunker.
The link to the plnkr does not match the code you have provided above (route definitions)
That being said I was able to get it routing by turning off html5Mode
Note: even angular's routing example does not work w/ html5Mode on... http://plnkr.co/edit/7YNtWncWYtxceELnzkAT?p=preview
Also, in loginView you are trying to define ng-app="loginApp" that will not be allowed, while you can have nested ng-app's (unless you manually bootstrap them documentation)