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
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'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
I'm not getting any error in console, but ngView is also not updating
index.html
<!DOCTYPE html>
<html lang="en">
<head data-ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- AngularJS script -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script src="js/jquery.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">Demo Work</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
Dashboard
</li>
<li>
Charts
<ul class="nav nav-second-level">
<li>Flot Charts</li>
<li>Morris.js Charts</li>
</ul>
</li>
<li>
Tables
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div data-ng-view>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
</html>
dashboard.html
<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
tables.html
It has also some code same as dashboard.html
app.js
var demoProject = angular.module('myApp',['ngRoute']);
demoProject.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'page/dashboard.html',
controller : 'contactController'
})
.when('/tables',{
templateUrl: 'page/tables.html',
controller: 'tablesController'
});
});
demoProject.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
demoProject.controller('tablesController',function($scope){
console.log("Tables controller");
});
You need to load the app.js after loading angular route
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
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.
I am using this boilerplate: https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate
I added support for Jade in regards to Gulp and it builds out the Jade files into HTML files.
When it kicks up the browser, it shows the index.html with the header/footer partials loaded in. That being said, it doesn't load in the home.html partial that Angular should be loading in with the UI-Router.
I am very new to Angular, so I am sure that I am missing something very simple.
Index HTML file (built from Jade):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--title('{{title}}')-->
<meta name="description" content="{{description}}">
<meta name="keywords" content="{{keywords}}">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/handheld.css" media="screen and (min-width:0px) and (max-width:1024px)">
<link rel="stylesheet" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:1024px)">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:767px)">
</head>
<body>
<div id="wrapper">
<header id="header">
<div class="page clearfix">
<div class="top">
<ul>
<li>khaccsupport</li>
<li>khaccsupport</li>
<li>shane#khaccounts.net</li>
</ul>
</div><img src="../images/logo.png">
<section class="secondary-header">
<nav class="navigation">
<ul>
<li class="top-link">Buy WoW Accounts</li>
<li class="top-link">Sell WoW Accounts</li>
<li class="top-link">Reviews / Feedback</li>
<li class="top-link">FAQ</li>
</ul>
</nav>
</section>
</div>
</header>
<div class="fb-frame">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkhaccounts&width=450&height=35&colorscheme=light&layout=standard&action=like&show_faces=false&send=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowtransparency="true"></iframe>
</div>
<div class="content">
<div class="page">
<div ui-view></div>
</div>
</div>
<div class="footer-wrapper index-page">
<footer id="footer">
<div class="page">
<div class="footer-content clearfix">
<div class="links-wrapper clearfix">
<section class="footer-links nav">
<h4>Navigation</h4>
<ul>
<li>Buy High End Elite Premium WoW Accounts<br>Sell High End Elite Premium WoW Accounts<br>High End Elite Premium WoW Accounts For Sale<br>KHAccounts.net Customer Reviews & Feedback<br>KHAccounts.net Buy & Sell WoW Accounts FAQ</li>
</ul>
<ul>
<li></li>
<div class="secondary-footer"><img src="../images/footer-logo.png"><span class="copyright">©2015 Knucklehead Accounts -- All Rights Reserved.</span></div>
</ul>
</section>
<section class="footer-links reference">
<h4>Referral Links</h4>
<ul>
<li>Anonymous WoW Armory Profiles<br>Trade WoW Accounts<br>MMO Game Account Trading<br>WoW Trading Forum</li>
</ul>
<ul>
<li>RBG Rating Boost<br>Arena Rating Boost<br>TwinkInfo.com<br>TwinkInfo.com Forums<br>Twinking Guides</li>
</ul>
</section>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
Routes.js file:
'use strict';
/**
* #ngInject
*/
function Routes($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('Home', {
url: '/',
controller: 'HomeCtrl',
template: '../views/home.html',
title: 'Home'
});
$urlRouterProvider.otherwise('/');
}
module.exports = Routes;
Figured it out. It turns out I needed to be using TemplateURL, not Template in the route.js.
How should i implement this:
4 tabs which open onclick and loads a view in to a child.
Tried with 4 ng-view tags and hiding 3 of them but it doesn't feel right. How should I display my content in the right tab?
<section id="tabs">
<div class="tab open">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
</section>
you should use bootstrap for a tabs and ng-include for a content
something like this
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div ng-include src="'red.html'"></div>
</div>
<div class="tab-pane" id="orange">
<div ng-include src="'orange.html'"></div>
</div>
<div class="tab-pane" id="yellow">
<div ng-include src="'yellow.html'"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
Angular UI bootstrap module has all the twitter bootstrap components ported as angular modules. You should be using it instead of reinventing it (unless you cannot/dont want to use twitter bootstrap).
tldr: Try using bootstraps tabs component from angular UI bootstrap