I am using AngularJS for the very first time and I am writing down the HTML script of the page over here:
<!DOCTYPE html>
<html>
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
alert("india");
function questionController($scope) {
$scope.queList = ['a', 'b'];
alert("India");
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
</script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;"><h1>Stack Overflow</h1></div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'"/>
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'"/>
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'"/>
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
<div class="metapost">
<h4 class="headertitle">Hot Meta Post</h4>
<div class="sidebarinnerdiv">Is it useful to edit a question I will vote to close? </div>
<div class="sidebarinnerdiv">Rewriting a Waffle question</div>
</div>
<div class="networkquestions">
<h4>Hot Network Questions</h4>
<div class="sidebarinnerdiv">How to pronounce the English alphabet? (A, B, C, ...)</div>
<div class="sidebarinnerdiv">Why does the Black Lives Matter movement organize protests while the incident they're protesting is still under investigation?</div>
</div>
</div>
</div>
<!-- Always at the end of the page -->
<footer>
Copyright 2016, Stack Overflow
</footer>
</body>
</html>
It is not working and I am seeing {{question}} on the page. I am not able to trace down the source of the error. Please help me make my page work.
You forgot to add ng-app="queApp"
function questionController($scope) {
$scope.queList = ['a', 'b'];
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
<!DOCTYPE html>
<html ng-app="queApp">
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;">
<h1>Stack Overflow</h1>
</div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'" />
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'" />
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'" />
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'" />
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'" />
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'" />
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
First of all you need 'ng-app="queApp"' in order to use AngularJS (Basics AngularJS)
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 am using bootstrap's popover, but I don't want the popover overflow it's wrapper, any ideas?
Demo on Plunker
<!DOCTYPE html>
<html>
<head>
<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>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css#*" />
<script src="controller.js"></script>
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false">
</datepicker>
</script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="popover.css">
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-panel">
<div class="card-body">
<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" ng-repeat="item in weaponItems">
<div class="col-xs-12">
<div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
<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 class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think I don't make my question clear, see the attached imagethe red line surrounded area is the card-panel area, and the green line surrounded is the popover. Here, I don't want the popover beyond the panel area.
Declare word-wrap on the overflowing element.
.card-body p{
word-wrap: break-word;
}
I have been using Cloud9 to make an Ionic app.
So far, the frontend of the app is doing fine. I use the ionic-framework through Cloud9.
My backend is another Cloud9 project. It uses WordPress to make a specific custom post type with advanced custom fields. It then uses WP REST API to generate that data in a json format. I can access my custom post type and its fields when I run the WordPress on Cloud9 using its /wp-json/posts?type=[specific type].
The problem is, when using a $http.get request in my ionic app, it doesn't work at all. If I use $http.get on a json file I downloaded from my WordPress and added in the workspace of my ionic app, everything works fine.
So, I have a problem getting json data from a WordPress site hosted using Cloud9 through an ionic app, also in a Cloud9 workspace.
Both workspaces are separated and run at the same time.
My code to load the json file is the following :
var defer = $q.defer();
$http.get('LINK TO .../wp-json/posts?type=[post type]', { cache: 'true'})
.success(function(data) {
defer.resolve(data);
});
return defer.promise;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
As mentionned, when I replace the link with [name of json file].json, a file that was directly downloaded from the REST API generated json and so that is identical to the site I'm trying to get, it doesn't work.
When I console.log(data), instead of logging the data for each custom post (what happens with the download .json), it logs this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<!--C9LOCAL_CODE_INJECT_PLACEHOLDER-(login-head)-DO_NOT_REMOVE-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Sign-in | Cloud9 IDE - Ajax.org</title>
<meta name="description" content="Meet Cloud9, development-as-a-service for Javascripters and other developers"/>
<meta name="keywords" content=""/>
<link rel="icon" type="image/gif" href="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/homepage/favicon.ico" />
<!--C9LOCAL_CODE_INJECT_PLACEHOLDER-(login-loadedDetectionScript)-DO_NOT_REMOVE-->
<link href="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/style/signin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/prefixfree.min.js"></script>
</head>
<body class="">
<script type="text/javascript">
// ClickTale Top part
var WRInitTime=(new Date()).getTime();
// ClickTale end of Top part
</script>
<div id="header">
<a class="logo" href="/"></a>
<div class="social">
<div class="socialMediaBlok">
Tweet
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="socialMediaBlok">
<iframe src="//www.facebook.com/plugins/like.php?href=c9.io&layout=button_count&show_faces=false&width=90&action=like&font=lucida+grande&colorscheme=light&height=21"
allowtransparency="true"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;height:20px"></iframe>
</div>
</div>
</div>
<div class="headerdivider"></div>
<div id="signin_window">
<div id="signinViewport">
<div class="pageContainer">
<div id="barForgetPass" class="page">
<form id="resetPasswordForm">
<div class="header">Reset password</div>
<div class="form-holder">
<div id="lbl_inpResetPassword" class="c9-label">
<label for="inpResetPassword">Username or email address</label>
</div>
<div class="c9-textbox">
<div class="c9-txt_fix">
<input type="text" id="inpResetPassword" name="inpResetPassword" disabled2="disabled" />
</div>
</div>
</div>
</form>
<div class="fbox">
<div id="btnRPCancel" class="cancel-button button">Go back</div>
<div id="btnRP" class="action-button button">Reset my password</div>
</div>
<div class="label3">Your password will be reset and you will receive an email with a new password.</div>
</div>
<div id="barSignIn" class="page">
<form id="signinForm">
<div class="header">Please sign in</div>
<div class="form-holder">
<div id="lbl_inpUsernameEmail" class="c9-label">
<label for="inpUsernameEmail">Username or email address</label>
</div>
<div id="txt_inpUsernameEmail" class="c9-textbox">
<div class="c9-txt_fix">
<input type="text" id="inpUsernameEmail" name="inpUsernameEmail" tabindex="1" />
</div>
</div>
<div id="lbl_inpPassword" class="c9-label">
<label for="inpPassword">Password</label>
<a id="forgetlink" class="forgetlink">Forgot?</a>
</div>
<div id="txt_inpPassword" class="c9-textbox">
<div class="c9-txt_fix">
<input type="password" id="inpPassword" name="inpPassword" tabindex="2" />
</div>
</div>
<div class="fbox">
<div id="cbRememberLogin" class="c9-checkbox" tabindex="3">
<div class="check"></div><span>Remember my login</span>
</div>
<div id="btnSignIn" class="action-button button" tabindex="4" accesskey="ENTER">Sign in</div>
</div>
</div>
<div id="barSignInStatusMsg" class="signinstatus-bar">
<div id="lblSignInHeader" class="errorboxContent"></div>
<div id="lblSignInStatus" class="errorboxContent"></div>
</div>
</form>
<!-- <div id="btnLoginViaGitHub" class="c9-button btn-github" style="margin: 13px 0 0 12px;" tabindex="5"></div>-->
<div class="signin_options">
<div class='info'>Or sign in with:</div>
<!--
-->
</div>
</div>
<div id="barActivationLink" class="page">
<form id="activationlinkForm">
<div class="header">Activation email</div>
<div class="form-holder">
<div id="lbl_inpResetPassword" class="c9-label">
<label for="inpResetPassword">Username or email address</label>
</div>
<div class="c9-textbox">
<div class="c9-txt_fix">
<input type="text" id="inpResendConfirmation" name="inpResendConfirmation" />
</div>
</div>
</div>
</form>
<div class="fbox">
<div id="btnALCancel" class="cancel-button button">Go back</div>
<div id="btnAL" class="action-button button">Resend activation email</div>
</div>
<!--div style="clear: both"></div-->
<!--div class="divider" style="margin:40px 5px 0 5px;"></div>
<div class="label3" style="margin:21px 17px 0 17px;">To receive the registration email again please click the button above.</div-->
</div>
</div>
</div>
</div>
<div id="signup_window">
<div class="no_account_yet"></div>
<div class="signuplink-bar">
<div class="bird"></div>
<div class="content">
<a id="btnSignUpUrl" href="/signup">SIGN UP</a> FOR YOUR ACCOUNT
</div>
</div>
</div>
<!-- <div id="terms_of_use">
Terms of use - © 2011 - Register here
</div>-->
<div class="sign_up_now">
<a id="resendactivation">Resend my activation email</a>
</div>
<ul class="bottom_menu">
<li>Home</li>
<li>|</li>
<li>Talk to us at Twitter and Facebook</li>
<!-- <li>|</li>-->
<!-- <li>Terms of use</li>-->
<li>|</li>
<li>Cloud9 IDE, Inc © 2011</li>
</ul>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/components.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/code.js"></script>
<script type="text/javascript" src="https://cdn.c9.io/nc-3.1.2733-9ac8c40a/static/oldclient/homepage/js/signin.js"></script>
<!-- ClickTale Bottom part -->
<div id="ClickTaleDiv" style="display: none;"></div>
<script type='text/javascript'>
document.write(unescape("%3Cscript%20src=\"" + (document.location.protocol == "https:"
? "https://clicktale.pantherssl.com/"
: "http://s.clicktale.net/") + "WRc5.js\"%20type=\"text/javascript\"%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var ClickTaleSSL = 1;
if (typeof ClickTale == "function")
ClickTale(48230, 1, "www");
</script>
<!-- ClickTale end of Bottom part -->
</body>
</html>
Also, since I use chrome as a debugger for my app, I use an extension for Access-Control-Expose-Headers. Without this extension, I get another error for the header.
In order to allow services to make API calls to your app (or Wordpress) you'll need to open the Share menu in the top right and make your app public.
In this case, you can lock down your app with authentication in the API so the publicness of your app shouldn't be an issue.
in app.js
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
in controller.js
angular.module('PoliticalOrg').controller('HomePageController',function( $scope ) {
$scope.Login= function () {
alert("s");
}
});
in index.html
<!DOCTYPE html>
<html lang="en" ng-app="PoliticalOrg">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
<title>Organization</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="" name="description">
<meta content="" name="author">
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen">
<!-- BEGIN CORE CSS FRAMEWORK -->
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css">
<!-- END CORE CSS FRAMEWORK -->
<script src="libs/vendor/angularJS/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script type="js/login/services.js"></script>
<script type="js/globalmethods/login.js"></script>
<!-- BEGIN CSS TEMPLATE -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom-icon-set.css" rel="stylesheet" type="text/css">
<!-- END CSS TEMPLATE -->
<script src="js/app.js"></script>
<script src="js/Controllers.js"></script>
<script src="js/registration/config.js"></script>
<script src="js/registration/Controllers.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script src="js/login/services.js"></script>
<script src="js/candidate/config.js"></script>
<script src="js/candidate/Controllers.js"></script>
<script src="js/candidate/services.js"></script>
<script src="js/submemberrequests/config.js"></script>
<script src="js/submemberrequests/Controllers.js"></script>
<script src="js/submemberrequests/services.js"></script>
<script src="js/messages/config.js"></script>
<script src="js/messages/Controllers.js"></script>
<script src="js/messages/services.js"></script>
<script src="js/users/config.js"></script>
<script src="js/users/Controllers.js"></script>
<script src="js/users/services.js"></script>
<script src="js/admin/config.js"></script>
<script src="js/admin/Controllers.js"></script>
<script src="js/admin/services.js"></script>
<script src="js/users/services.js"></script>
<script src="js/globalmethods/map.js"></script>
<script src="js/globalmethods/login.js"></script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="boxed-layout breakpoint-1024 pace-done grey"><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
<!-- BEGIN HEADER -->
<div class="container">
<div class="header navbar navbar-inverse ">
<!-- BEGIN TOP NAVIGATION BAR -->
<div class="container">
<div class="navbar-inner">
<div class="header-seperation" style="display: none; height: 61px;">
<ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none">
<li class="dropdown"> <a id="main-menu-toggle" href="#main-menu" class=""> <div class="iconset top-menu-toggle-white"></div> </a> </li>
</ul>
<!-- BEGIN LOGO -->
<img src="assets/img/logo.png" class="logo" alt="" data-src="assets/img/logo.png" data-src-retina="assets/img/logo2x.png" width="106" height="21">
<!-- END LOGO -->
<ul class="nav pull-right notifcation-center">
<li class="dropdown" id="header_task_bar"> <div class="iconset top-home"></div> </li>
<li class="dropdown" id="header_inbox_bar"> <div class="iconset top-messages"></div> <span class="badge animated bounceIn" id="msgs-badge">2</span> </li>
<li class="dropdown" id="portrait-chat-toggler" style="display:none"> <div class="iconset top-chat-white "></div> </li>
</ul>
</div>
<!-- END RESPONSIVE MENU TOGGLER -->
<div class="header-quick-nav">
<!-- BEGIN TOP NAVIGATION MENU -->
<!-- END TOP NAVIGATION MENU -->
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END TOP NAVIGATION BAR -->
</div>
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
<!-- BEGIN SIDEBAR -->
Scroll
<!-- END SIDEBAR -->
<!-- BEGIN PAGE CONTAINER-->
<div class="page-content condensed" data-height="679">
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<div id="portlet-config" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"></button>
<h3>Widget Settings</h3>
</div>
<div class="modal-body"> Widget settings form goes here </div>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="page-title">
<h3>Home Page</h3>
</div>
</div>
</div>
<!-- BEGIN CHAT -->
<!-- END CHAT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN CORE JS FRAMEWORK-->
<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/breakpoints.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-block-ui/jqueryblockui.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>
<!-- END CORE JS FRAMEWORK -->
<!-- BEGIN PAGE LEVEL JS -->
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-numberAnimate/jquery.animateNumbers.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN CORE TEMPLATE JS -->
<script src="assets/js/core.js" type="text/javascript"></script>
<script src="assets/js/chat.js" type="text/javascript"></script>
<script src="assets/js/demo.js" type="text/javascript"></script>
<!-- END CORE TEMPLATE JS -->
</div><div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"><div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div></div></body></html>
I mentioned app.js and controller.js in index.html. Here's the problem I am facing. When I click on the login button in index.html ng-click="Login()" function defined in HomePageController the Login function is not called.
This happened because the controller is not loaded correctly, you were trying to load the controller form the index.html page at the same time you included your scripts on index.html page.
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
so what you should do is breakdown your views using ui-view.
put the folowing in home.html file
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
and add ui-view in the index.html instead of the above code. then change the route like this
$routeProvider.when('/', {
templateUrl : appUrl + '/home.html',
controller : 'HomePageController'
})
i.e you should initialize the index.html from the file not from the route
Follow this ui-router documentation.
I've been looking at this example and looking through google to no avail. I don't understand how popover-template works. Is it Angular's templating system? I couldn't find any documentation on this, so I thought I'll turn to the community. How can I similarly create my own template?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="bootstrap-ui.js"></script>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<div style="padding-bottom: 400px"></div>
<div class="container-fluid">
<fieldset>
<div class="control-group">
<label class="control-label" for="tc">Sample:</label>
<div class="controls">
<div class="input-prepend">
<input placeholder="Enter end date.." type="text" class="input-small" ng-model="entity.endDate" name="endDate" />
<button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">
<i class="icon-calendar"></i>
</button>
</div>
</div>
</div>
</fieldset>
</div>
</body>
</html>
It is a directive from angular-ui's bootstrap sub-project:
<button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">
the corresponding Javascript is inbootstrap-ui.js:
.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
return $tooltip( 'popoverTemplate', 'popover', 'click' );
}]);
The project is here: https://github.com/angular-ui/bootstrap