Is there a way to have the contents of the view page not show on template pages?
Say my index page is to display blog posts and has the code
<!DOCTYPE html>
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-controller="WelcomeCtrl">
<div ng-view></div>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/">Home</a>
<a class="blog-nav-item " href="#/register">Register</a>
</nav>
</div>
</div>
<div class="list-group" ng-repeat="article in articles">
<a href="#" onclick="return false;" class="list-group-item active">
<h4 class="list-group-item-heading">{{article.title}}</h4>
<p class="list-group-item-text">{{article.post}}</p>
</a>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="register/register.js"></script>
<script src="welcome/welcome.js"></script>
<script src="addPost/addPost.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
When I goto template pages, for example the register template, the nav and blog posts that are meant for only index.html are showing on the register page as well as all the other templates. (test post)
Code for register.html
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>AngularJS Blog</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="https://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript" src="ladda.min.js"></script>
<link href="ladda-themeless.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS Blog!</h2>
</div>
<form class="form-signin" name="regForm">
<div class="form-group" ng-class="{ 'has-error' : regForm.email.$invalid }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email">
<p class="help-block" ng-show="regForm.email.$invalid">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : regForm.password.$invalid }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
<p class="help-block" ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
<p style="color:red;" ng-show="regError">{{regErrorMessage}}</p>
</div>
<button type="button" ladda-loading="login.loading" data-style="expand-right" ng-click="signUp();" ng-disabled="!user.email || !user.password" class="btn btn-lg segoe-ui-light ladda-button btn-primary btn-block">Register</button>
</form>
</div>
</body></html>
Code for register.js
'use strict';
angular.module('myApp.register', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/register', {
templateUrl: 'register/register.html',
controller: 'RegisterCtrl'
});
}])
.controller('RegisterCtrl', ['$scope','$location','$firebaseAuth', function($scope,$location,$firebaseAuth) {
$scope.mesg = 'Hello';
var firebaseObj = new Firebase("myblog-xxx.com");
var auth = $firebaseAuth(firebaseObj);
var login={};
$scope.login=login;
$scope.signUp = function() {
if (!$scope.regForm.$invalid) {
var email = $scope.user.email;
var password = $scope.user.password;
if (email && password) {
login.loading = true;
auth.$createUser(email, password)
.then(function() {
// do things if success
console.log('User creation success');
$location.path('/home');
}, function(error) {
// do things if failure
console.log(error);
$scope.regError = true;
$scope.regErrorMessage = error.message;
});
}
}
};
}]);
Please let me know if additional information is needed as I'm not sure exactly where the problem lies. Thanks.
Take a look at ng-if ng-show ng-hide directives
https://docs.angularjs.org/api/ng/directive/ngIf
ng-if is better in terms of performance.
ng-show will render an element, and use display:none to hide it, ng-if will actually remove the element from DOM, and will re-create it, if it’s needed. You may need ng-show for an elements that toggles on an off often, but for 95% of the time, ng-if is a better way to go.
However, I think your real problem here is that what changes with your route is what <div ng-view></div> renders.
ngView is a directive that complements the $route service by including
the rendered template of the current route into the main layout
(index.html) file. Every time the current route changes, the included
view changes with it according to the configuration of the $route
service.
So obviously if you declare other components outside your templates in your index.html, those tags will keep on showing in every view.
For example:
<div ng-view></div>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/">Home</a>
<a class="blog-nav-item " href="#/register">Register</a>
</nav>
</div>
There, no matter which your template is, the nav bar will be shown.
BTW if you still want to manage it outside your ng-view you coud use ng-if.
Like this:
<div class="blog-masthead" ng-if="expression">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/">Home</a>
<a class="blog-nav-item " href="#/register">Register</a>
</nav>
</div>
expression should be an evaluatable expression. Take a look at the examples provided by the official documentation.
Related
Angular.JS issue with ng-repeat value from inputs
I'm having an issue with ng-repeat, where I can't see to get the values from the input to show on the UI when submitted.
I'm very new to angular JS, hence why I'm trying to build a simple to do app to learn the basics.
On the newItem.html page, there is a form with a function Add(). There are two inputs for the project and the title. There is a button to add the new to do item.
Once the button is clicked and it runs the Add() function, it should add a new object to the toDoList array with the Project and the Task.
On the homePage.html I want to display a project title and the task details. Later down the line I want to generate the entire row on each click but for now I'm just trying to get the text to change.
I'm obviously missing something obvious here, I've read through the documentation for ng-repeat and ng-model, but just can't seem to grasp it.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="angular-route/angular-route.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/home.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body ng-view ng-controller="toDoCtrl">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
homePage.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoList">
<div class="row newItem">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
<p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<a href="#/newItem"><button type="button" class="btn btn addItem">
<i class="fas fa-plus-circle fa-3x"></i>
</button></a>
</div>
</div>
newItem.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form ng-submit='Add()' class="form">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<button class="btn-lg btn-danger cancelButton">Cancel</button>
</div>
</div>
</div>
app.module.js
var app = angular.module('ToDoListApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
controller: "toDoCtrl"
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
controller: "toDoCtrl"
})
.otherwise({
redirectTo: '/'
})
});
//main controller for app functionality
app.controller('toDoCtrl', function ($scope) {
$scope.ToDoList = []
//add the new to do item to the array
$scope.Add = function () {
$scope.ToDoList.push({
Project: $scope.Project,
Task: $scope.Task
});
$scope.Project = '';
$scope.Task = '';
};
});
I got a list generated using angular 'ng-repeat', and I want if one item is clicked it will pop a popover to show some info. I tried several time but seems it doesn't work fine.
see plunker
a list demo in plunker
my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script data-require="ui-bootstrap#0.4.0" data-semver="0.4.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-repeat="item in weaponItems" ng-click="selectItem()" uib-popover-template="'popover.html'" popover-append-to-body="true" popover-trigger="none" popover-enable="item === selectedItem" popover-open="isOpen === true" popover-placement="left-top">
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here i added sample code..
You were loading ui-bootstrap before angular, so it failed (I put ui-bootstrap after angular.js):
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
The datepicker directive was not being called, because it requires "uib-" (note uib-datepicker):
<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>
The datepicker directive was also not being called, because it requires "uib-" (note uib-datepicker):
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false"></datepicker>
</script>
And check output..
I am trying to use the routing feature of angularJS, but so far it will not include my html templates (user.html and overview.html, which are in the same folder as index.html).
For information only: the expression {{test}} is working.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PARA Liste</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body>
<div ng-app="angularJsApplication" ng-controller="angularJsController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Para Liste</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>overview</li>
<li>user1</li>
<li>user2 - {{test}}</li>
</ul>
</div>
</div>
</nav>
<div class="ng-view"></div>
</div>
<script src="js/angularJsApplication.js"></script>
<script src="js/angularJsApplicationController.js"></script>
</body>
</html>
angularJsApplication.js:
var app = angular.module("angularJsApplication", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/#", {
templateURL : "overview.html"
})
.when("/overview", {
templateURL : "overview.html"
})
.when("/user1", {
templateURL : "user.html"
})
.when("/user2", {
templateURL : "user.html"
})
});
angularJsApplicationController.js:
app.controller("angularJsController", function($scope){
$scope.test = "testTestTEST";
});
user.html:
<h1>user</h1>
Its typo mistake :
not templateURL It''s templateUrl
So,it should be.
templateUrl: "overview.html"
My code is below:
https://plnkr.co/edit/p3lgYwMRgSg7UHNLLAP9?p=info
I cannot get the partial in main.html to display when i open the link. I tried different browsers and its the same issue. I can see in the console log that the controller is being invoked. I'm just not sure why my ngView isnt working.
Index file:
!DOCTYPE html>
<html lang="en" ng-app="Computer">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Computer Solutions</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted">Computer Solutions</h3>
<nav>
<ul class="nav nav-justified">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
</div>
<!-- /container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.14/angular-route.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js file
var app = angular.module("Computer", ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main',{
templateURL: 'main.html',
controller: 'MainCtrl'
}).
otherwise({redirectTo:'/main'})
}])
.controller('MainCtrl',[function(){
console.log('This is 111the MainCtrl');
}]);
main.html
<!-- Jumbotron -->
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<img src="http://techguystaging.com/files/computer-icon.png">
</div>
<div class="col-md-8">
<h1>Computer Solutions</h1>
<p class="lead">Get your stuff fixed here.</p>
</div>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Hardware Repairs</h2>
<p>Get your CPU fixed here along with your other tech stuff </p>
</div>
<div class="col-lg-4">
<h2>Virus Removal</h2>
<p>Destroy those trojan horses and worms</p>
</div>
<div class="col-lg-4">
<h2>System Tune up</h2>
<p>Faster better stronger.</p>
</div>
</div>
Firstly get rid of the ng-controller line in index.html as the controller is instantiated by the route definition (you don't have to explicitly load it).
The reason why the plunk seems to not be working is the relative url string of main.html. Change it to this and it should work:
$routeProvider.
when('/main',{
templateUrl: './main.html',
controller: 'MainCtrl'
})
I have created and update plunk here: https://plnkr.co/edit/uTGiDCF18J0fvQpg1It1?p=preview
I am getting an error of ngRoute not found while I added angular-route.js i can't understand why this is happening
<!DOCTYPE html>
<html ng-app="Userapp">
<head>
<title>Alltotal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<scipt src="js/lib/angular-route.js"></scipt>
<script src="js/app.js"></script>
<script src="js/controller/register.js"></script>
<script src="js/controller/show.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--navigation-->
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Register</li>
<li role="presentation">Show users</li>
</ul>
</div>
</div>
<!--view-->
<div class="row">
<div class="col-lg-12">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
And my javascipt is I think it is totally correct but not working when run
var app = angular.module("Userapp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {templateUrl : 'partials/form.html',
controller: 'formctrl'});
});
That's a typo! Must be script:
<scipt src="js/lib/angular-route.js"></scipt>