I have a html file
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Registration</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/registration.js"></script>
</head>
<body>
<header></header>
<div class="page">
<main class="cf" ng-view>
{{message}}</main>
</div>
</body>
</html>
Then I have app.js where i implement route providers.
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/login',{
templateUrl:'views/login.html',
controller:'RegistrationController'
}).
when('/register',{
templateUrl: 'views/register.html',
controller: 'RegistrationController'
}).
when('/success',{
templateUrl: 'views/success.html',
controller: 'SuccessController'
}).
otherwise({
redirectTo:'/login'
});
}]);
Then I have a registration.js where I implement the controller
myApp.controller('RegistrationController',['$scope',function($scope){
$scope.message="Welcome to my app";
}]);
this is the view file I am referring to:
<section class="card login">
<form name="myform"
novalidate>
<div class="textintro">
<h1>Hi there!</h1>
<p>Log-in to access the awesomeness!</p>
<p>{{message}}</p>
</div>
<fieldset>
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
</fieldset>
<button type="submit" class="btn">Login</button>
<p>or register</p>
</form>
</section>
The {{message}} is displayed as it is when I run the website !! I checked the console it says failed to load the module, what might be my mistake here or how can I solve this
Is your controller in the same file as the route config or it is separate file?
If it is in an extra file you have to replace
myApp.controller('RegistrationController',['$scope',function($scope){
with
angular.module('myApp').controller('RegistrationController',['$scope',function($scope){
If it is in the same file, please post the error message here
Related
I am trying to create a link where I click the register button and it goes onto the register.html, without it needing for the page to start reloading. But when I click the register link, nothing seems to happen when I click it.
index.html:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="Login">
<label for="login">Login</label>
<input id="login" ng-model="login" type="text">
<br>
<label for="password">Password</label>
<input id="password" ng-model="password" type="text">
<br>
<button type="button" ng-click="login()">Login</button>
<a href="#!register" >Register</a>
<div ng-view></div>
</body>
</html>
app.js:
var app=angular.module("myApp",["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/",{
templateUrl:"index.html",
})
.when("/register",{
templateUrl:"register.html",
controller:"Registration"
});
})
app.controller('Login',['$scope', function ($scope) {
}])
app.controller("Registration", function ($scope) {
$scope.msg = "I love London";
});
register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Registration page</h1>
</head>
<body ng-app="myApp" ng-controller="Registration">
</body>
</html>
You should fix your link to:
Register
Check documentation for details $route#examples
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
AngularJS controller not a function in IBM MobileFirst is what I am getting an error. I went through many similar questions being ask on Stack Overflow but nothing helped me.
Error Print Screen
// **************** app.js ***************
var app = angular.module('myApp',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
});
// **************** login.js ***************
app.controller('loginController',function($scope){
$scope.login = function(){
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
console.log($scope.userName, $scope.password);
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
WL.Client.invokeProcedure($scope.loginProcedure, function(){
onSuccess: loginSuccess,
onFailure: loginFailure
});
$scope.loginSuccess = function()
{
alert('success');
};
$scope.loginFailure = function()
{
alert('failed');
};
}
});
<!-- INDEX.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AB</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body ng-app="myApp">
<!--application UI goes here-->
<div id="view" ui-view></div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="library/jquery.min.js"></script>
<script src="library/angular.1.4.9.js"></script>
<script src="library/angular-ui-router.min.js"></script>
<script src="library/bootstrap.min.js"></script>
<script src="controller/app.js"></script>
<script src="controller/login.js"></script>
</body>
</html>
<!-- Login.html -->
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
<!-- Login Box Start -->
<div class="panel panel-primary">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-group" name="lgForm">
<input type="text" class="form-control" id="usrName" ng-modal="usrName" required />
<input type="password" class="form-control" id="pass" ng-modal="pass" required />
<input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
</form>
</div>
</div>
<!-- Login Box End -->
<!-- error Modal start -->
<div class="modal" role="modal" id="errorPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Error</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- error Modal End -->
</div>
You are specifying loginController in your html as well as in your route configuration. I'm not certain that this is the cause of the problem, but doing both is unnecessary. Remove one of them.
In other words, eliminate controller: 'loginController' from below
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
or eliminate: ng-controller="loginController" from:
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
Also, unrelated, but I doubt that these two lines:
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
do what you think. The purpose of angular.element is to wrap elements as jquery elements. I suspect you want to use document.getElementById here to get references to the items. However, you're using ngModel here, so none of this should be necessary if you use consistent spelling. (In one place you have userName and in another usrName.)
issue was wrong spelling of adapter
/* wrong one */
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
/*write one */
$scope.loginProcedure ={
procedure:'login',
adapter:'SQL',
parameters:[$scope.userName, $scope.password]
};
I am trying to learn angular. Can someone tell me why home.html does not show on my angular app? I have all required angular files included. No error happens when I start the app, just a blank screen. The jquery, bootstrap, and fontawesome were previously working, so no issues there. I can add a debugger statement and see that app.js is called, but home view does not show.
Folder Structure in my solution:
Root:
/index.html
/home.html
App Folder:
app/angular-route.js
app/app.js
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Learning Angular</title>
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="libs/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="libs/angular/angular.min.js"></script>
<script src="app/angular-route.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-app="myApp">
<div class="container">
<div ng-view></div>
</div> <!-- /container -->
</body>
<script src="libs/jquery/jquery-2.1.4.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
</html>
home.html
<p>
Welcome to Home {{user.firstName}}
</p>
<div class="row">
<div class="col-md-6">
<form class="registrationForm">
<h2 class="form-signin-heading faArrowIcon">Please sign in</h2>
<label for="inputEmail">Email address</label>
<input type="email" id="inputEmail" class="form-control validateIt" placeholder="Email address" required autofocus>
<label for="inputPassword">Password</label>
<input type="password" id="inputPassword" class="form-control validateIt" placeholder="Password" required>
<div style="padding: 0; margin: 0;" class="col-md-3 pull-right">
<button id="submitButton" class="btn btn-lg btn-primary btn-block" type="submit" disabled>Sign in</button>
</div>
</form>
</div>
</div>
app.js
var sampleApp = angular.module('myApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/home.html'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
you need to specify a route for home and set it as your main route.
here's an example:
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
}).
when('/route2', {
templateUrl: 'route2.html',
}).
otherwise({
redirectTo: '/'
});
});
index.html
<body ng-controller="MainCtrl">
<div>
home
route2
</div>
<div ng-view></div>
</body>
and a working plnkr
i have routeProvider, ng-view and controller.
Simple template with form and input. I can see $dirty value in {{form.var1.$dirty}} - it changes when i type, but how to access it in the controller code?
html main
<!doctype html>
<html ng-app="project">
<head>
<meta charset="utf-8">
<title>Tabs</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/dirty.js"></script>
<!--<script src="js/tab.js"></script>-->
</head><body>
<div ng-view>
</div>
</body>
</html>
template
{{2+2}}<br>
|{{var1}}|<br>
|{{form.var1.$dirty}}|
check dirty
<form class="form-horizontal" novalidate name="form" ng-submit="submit()">
<input id="var1" name="var1" class="input" type="text" ng-model="var1">
</form>
js
angular.module('project',[]).
config(function($routeProvider) {
$routeProvider.
when('/', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
when('/tab1', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
otherwise({redirectTo:'/'});
});
function Ctrl1($scope,$rootScope) {
$scope.var1=100;
$scope.dodo1 = function() {
alert(form.var1.$dirty);
}
}
Alert shows me "undefined".
How to get var1 $dirty value?
As Cherniv told you in the comments you need to access the variable from the $scope object
$scope.form.var1.$dirty