i have an index page(login ) in which register link is present so while redirecting i am trying to load the controller but it is not loading also there is no error in console.
My home page is getting loaded with URL : http://localhost:8081/WebServices/
and after clicking resgiter i am trying to rediect it to : http://localhost:8081/WebServices/#/regsiter
Help would be appreciated.
My index.html page
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login Page</title>
<script type="text/javascript" src= "/WebServices/js/angular.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/angular-resource.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/angular-route.min.js"></script>
<script type="text/javascript" src= "/WebServices/js/friendsCtrl.js"></script>
<script type="text/javascript" src= "/WebServices/js/friendsService.js"></script>
<script type="text/javascript" src= "/WebServices/js/loginCtrl.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body>
<div ng-app="loginApp">
<div class="col-md-3">
<h2>Login</h2>
<form name="loginform" role="loginform" ng-submit="login()">
<div class="form-group" ng-class="{ 'has-error':loginform.username.$dirty && loginform.username.$error.required }" >
<label for="username">Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" required />
<span ng-show="loginform.username.$dirty && loginform.username.$error.required " class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error':loginform.username.$dirty && loginform.username.$error.required }">
<label for="Password">Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" required />
<span ng-show="loginform.password.$dirty && loginform.password.$error.required " class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type ="submit" class="btn btn-primary" ng-disabled="loginform.$invalid">Login</button>
Resgiter
</div>
</form>
</div>
</div>
</body>
</html>
loginCtrl.js file
var loginApp=angular.module('loginApp',['ngRoute']);
loginApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/' , {
templateUrl:'index.html',
controller: 'loginCtrl'
})
.when('/regsiter' , {
templateUrl:'registration_ang.html',
controller: 'loginCtrl'
})
.otherwise({
redirectTo:'/'
});
}]);
loginApp.controller('loginCtrl',['$scope',function($scope){
console.log("controller loaded");
alert("controller loaded");
$scope.login=function(){
console.log("inside loginCtrl : login function");
alert("checking login.");
};
}
]
);
You have missed to add ng-view directive on your page, so that will load the template & controller configured on $routeProvider inside ng-view directive element.
<div ng-view></div>
Related
I am trying to use Route in my newEvent page. But it's giving me 404 error. I checked my code but I am not able to identify the error.
can anyone please check my codes and let me know whats wrong im doing here. I uploaded app.js , EditEventController.js , index.html and NewEvent.html file. I also uploaded a screenshot. Please take a look and let me solve this error.
Thank you
'use strict';
var eventsApp = angular.module('eventsApp', ['ngResource', 'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/newEvent', {
templateUrl: 'templates/NewEvent.html',
controller: 'EditEventController'
});
});
.factory('myCache', function ($cacheFactory) {
return $cacheFactory('myCache', {
capacity: 3
});
});
........................
'use strict';
eventsApp.controller('EditEventController',
function EditEventController($scope, eventData) {
$scope.saveEvent = function (event, newEventForm) {
if (newEventForm.$valid) {
eventData.save(event)
.$promise
.then(
function (response) {
console.log('success', response)
})
.catch(
function (response) {
console.log('failure', response)
}
);
}
};
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
};
}
);
........................
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-1.4.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li> Create Event </li>
</ul>
</div>
</div>
<ng-view> </ng-view>
</div>
</body>
</html>
...................................
<div style="padding-left:20px; padding-right:20px">
<div class="container">
<h1> New Event</h1>
<hr />
<form name="newEventForm">
<fieldset>
<label for="eventName">Event Name: </label>
<input id="eventName" type="text" required ng-model='event.name' placeholder="Name of your event...." />
<label for="eventDate">Event Date: </label>
<input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model='event.date' placeholder="format (mm/dd/yyyy)...." />
<label for="eventTime">Event Time: </label>
<input id="eventTime" type="text" ng-model='event.time' placeholder="Start and end time...." />
<label for="eventLocation">Event Location: </label>
<input id="eventLocation" type="text" ng-model='event.location.address' placeholder="Address of event...." />
<br>
<input id="eventCity" type="text" ng-model='event.location.city' class="input-small" placeholder="City ...." />
<input id="eventProvince" type="text" ng-model='event.location.province' class="input-small" placeholder="Province ...." />
<label for="eventImageUrl">Image</label>
<input id="eventImageUrl" type="url" ng-model='event.imageUrl' class="input-xlarge" placeholder="Url of image ...." />
</fieldset>
<img ng-src="{{event.imageUrl}}" src="" />
<br>
<br>
<button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
<button type="submit" ng-click="cancelEdit()" class="btn btn-primary">Cancel</button>
</form>
</div>
</div>
In your html, should this entry:
<script src="angular/angular-route.js"></script>
... be changed to this, so that it matches the location to the other angular files?
<script src="lib/angular/angular-route.js"></script>
I'm a newbie to Angular and working on a project but I'm having an issue with displaying info in two different pages.
I have a browse page that displays profiles
I also have a homepage where I want to display the contents of the browse page plus other miscellaneous information.
To do that I created a component(browsePage)
Then I added the component to the home.view.html
<browse-page></browse-page>
but the profiles don't show up.
In my browse page the profiles do show up.
My code:
app.config.js
$routeProvider
.when('/home', {
RouteData: {
bodyStyle: {
//'background': 'url(../images/bg-7.jpg)repeat'
'background-color': 'white'
}
},
controller: 'HomeController',
templateUrl: 'home/home.view.html',
controllerAs: 'vm'
})
.when('/browse', {
RouteData: {
bodyStyle: {
//'background': 'url(../images/bg-10.jpg)repeat'
'background-color': 'white'
}
},
controller: 'BrowseController',
templateUrl: 'browse/browse.view.html',
controllerAs: 'vm'
})
home.controller.js
angular.module("mango").controller("HomeController", HomeController);
function HomeController() {
}
angular.module('mango').controller('ExampleController', ['$cookies', function($cookies) {
}]);
home.view.html
This is the home page<br>
Miscellaneous info goes here
<browse-page></browse-page>
Miscellaneous info goes here<br>
end of home page
browse.component.js
console.log("In browse.component.js");
angular.module("mango").component("browsePage",{
templateUrl:"browse/browse.view.html",
controller:BrowseController
});
browse.controller.js
angular.module("mango").controller("BrowseController", BrowseController);
BrowseController.$inject = ["$rootScope","$location","AuthenticationService","$http"];
function BrowseController($rootScope, $location, AuthenticationService, $http){
var vm = this;
$http.get('browse_profiles.json').success(function(data){
vm.data = data;
console.log("data==>");
console.log(data);
});
}
browse.view.html
<br><br>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer" >
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
</header>
<hr>
<!-- Page Features -->
<div class="row text-center">
<img id="mySpinner" src="/images/loader.gif" ng-show="loading" />
{{alpine}}
<div class="col-md-3 col-sm-6 hero-feature" ng-repeat="profile in vm.data">
<div class="thumbnail">
<img src="{{profile.thumbnail}}" alt="">
<div class="caption">
<div class="username-status">
<span class="username pull-left"><a ng-href="#/profile/{{profile.username}}">{{profile.username}}</a></span>
<p ng-class-odd="'circle odd'" ng-class-even="'circle even'"></p>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
End of browse view.
<br><br>
index.html
<!doctype html>
<html lang="en" ng-app="mango">
<head>
<meta charset="utf-8">
<title>Mango</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="app.config.js"></script>
<script src="login/route-data.js"></script>
<script src="navigation_menu/navigation_menu.config.js"></script>
<script src="browse/browse.controller.js"></script>
<script src="browse/browse.component.js"></script>
<script src="home/home.controller.js"></script>
<script src="profile/profile.controller.js"></script>
<script src="settings/settings.controller.js"></script>
<script src="login/login.controller.js"></script>
<script src="login/app-services/authentication.service.js"></script>
<script src="login/app-services/flash.service.js"></script>
<script src="login/app-services/user.service.local-storage.js"></script>
</head>
<body ng-style="RouteData.get('bodyStyle')" ng-cloak>
<navigationmenu ng-if="location.path() !== '/login'"></navigationmenu>
<ng-view autoscroll></ng-view>
</body>
</html>
I'm not getting any errors in the console.You can ignore the GET error.
What do I need to do to fix my problem?
I'm starting to think th
Thanks in advanced.
I think in your component, you haven't specified controllerAs, when you goto /browse, your browseView.html is getting the controller instance as vm, but when browseView.html is loaded through component,it is not getting the controller instance, as it is not getting instantiated like it is done, in routeProvider.
Try doing,
angular.module("mango").component("browsePage",{
templateUrl:"browse/browse.view.html",
controller:BrowseController,
controllerAs: 'vm'
});
Hope, this solves the issue.
I'm new to Angular, i've been trying to use ui-router in this project, but ui-view doesn't show anything, did i miss something?.
I'm trying to build a mean app, the folder structure is the following:
The app folder is where the angular app is located.
<!DOCTYPE html>
<html lang="en" ng-app="TimeWaste">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="">
<input type="text" ng-model="login.email">
<input type="password" ng-model="login.password">
<button>Login</button>
<a ui-sref="signUp">Create an account</a>
</div>
</div>
</nav>
<body>
<div ui-view></div>
</body>
<script src="node_modules/angular/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/signup/signup-controller.js"></script>
</html>
this is the app.js
(function()
{
angular.module('TimeWaste',['ui.router'])
.config(function($stateProvider)
{
$stateProvider
.state('signup',{
url:"/signup",
templateUrl: "app/signup/signup.html",
controller:"SignupController"
})
})
}());
the signup.html view
<div class="row">
<div class="col-sm-6">
<div class="row">
<strong>Email Address:</strong>
<input type="text" ng-model="newUser.email" class="form-control">
</div>
<div class="row">
<strong>Password:</strong>
<input type="password" ng-model="newUser.password" class="form-control">
</div>
<button ng-click="createUser()">Submit</button>
</div>
</div>
and the signup controller
(function()
{
angular.module('TimeWaste')
.controller('SignupController', ['$scope','$state',function($scope,$state){
}]);
}());
It may typo and path missing !!
in html used <a ui-sref="signUp">Create an account</a> but in $stateProvider used signup so need to change signUp to signup.
and I assume your app.js is in app directory because you use
<script src="app/app.js"></script> in home page.
if right then your template path need to change templateUrl: "signup/signup.html",
However you can configure ui.route to be case insensitive.
like:
.config(function($stateProvider,$urlMatcherFactoryProvider,)
{
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('signup',{
url:"/signup",
templateUrl: "signup/signup.html",
controller:"SignupController"
})
})
I'm building my first angular app, starting with a simple login form. I load the form from a partial, however when I try submitting the form, nothing is logged to the console, i.e. I assume my authenticate() method is not called. I have the following definition for my app.js:
'use strict';
angular.module('spForums',[])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider.when('/login', {
templateUrl: 'static/partials/login.html',
controller: loginController,
controllerAs: 'login'
});
$locationProvider.html5Mode(true);
}])
And here's the controller, defined in a separate controller.js:
'use strict';
function loginController() {
this.email = '';
this.password = '';
this.authenticate = function () {
console.log(this.email);
console.log(this.password);
};
};
Here's the partial, login.html:
<form class="form-signin" novalidate ng-submit="login.authenticate()">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus ng-model="login.email">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" ng-model="login.password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<input class="btn btn-primary" type="submit" value="Sign-in">
</form>
And here's the relevant part of index.html, or in my case, forum.html that includes the partial:
<!doctype html>
<html lang="en" ng-app="spForums">
<head>
<script type="text/javascript" src="/static/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/static/js/lib/angular-resource.min.js"></script>
</head>
<body>
<div class="container" id="forumcontainer" ng-view>
</div> <!-- /container -->
<script type="text/javascript" src="/static/js/app.js"></script>
<script type="text/javascript" src="/static/js/controller.js"></script>
</body>
</html>
I'd like to end this by saying I'm new to Angular-JS. As in I just saw a bunch of tutorials and this is my first app. Please tell me where I'm wrong.
EDIT:- I'm using Angular-JS version 1.0.7.
You need to include ngRoute module into your application, it's not shipped by default:
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="/static/js/lib/angular.min.js"></script>
<script src="/static/js/lib/angular-route.min.js"></script>
<script src="/static/js/lib/angular-resource.min.js"></script>
</head>
Note, that you also need to define base href tag, since you are using HTML5 mode.
Then define module with necessary dependencies:
angular.module('spForums', ['ngRoute', 'ngResource'])
I'm newbie to angular
My angular controller is:
var chatApp = angular.module('chatApp.controllers', []);
chatApp.controller('loginController', ['$scope', function($scope) {
$scope.user_name="name";
$scope.user_password="name";
}]);
the app.js is:
'use strict';
angular.module('chatApp', [
'ui.router',
'chatApp.filters',
'chatApp.services',
'chatApp.directives',
'chatApp.controllers'
]).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "partials/login.html",
controller : "loginController"
})
});
login.html is:
<div>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="{{user_name}}" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="{{user_password}}" />
<div class="pass-icon"></div>
</div>
</form>
</div>
I've used stateprovider for routing.
But, it's not showing anything in placeholder. What is the reason?
Solved the problem using ng-model instead of {{}}.
<div class="content">
<input name="username" type="text" class="input username" placeholder="username" ng-model="user_name" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="password" ng-model="user_password"/>
<div class="pass-icon"></div>
</div>
This works for me if I say ng-controller = "loginController" in the html-
<div ng-controller = 'loginController'>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="{{user_name}}" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="{{user_password}}" />
<div class="pass-icon"></div>
</div>
</div>
Here's a JSBin with it working: http://jsbin.com/aDuJIku/265/edit?html,js,output
This solution doesn't include ui-router, but it should work with it.
Try this:
var chatApp = angular.module('chatApp.controllers', []);
chatApp.controller('loginController', ['$scope','$timeout', function($scope,$timeout) {
$timeout(function(){
$scope.user_name="name";
$scope.user_password="name";
},100);
}]);
you just have to change to RouteProvider, In your case you just do:
angular.module('chatApp', [ 'ngRoute' 'ui.router','chatApp.filters','chatApp.services', 'chatApp.directives', 'chatApp.controllers'])
.config(function($routeProvider) {
$routeProvider.when('/login', { templateUrl: "partials/login.html", controller: "loginController" })
});
please make sure that you have angular-route js included.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.js"></script>
Hope this help you! ;)
Here's some examples for you this
Below mentioned code works.
Note: If somebody tries to run this code in preview its not going to work. JS and HTML code needs to be copied in separate file and use the names mentioned.
var myContrlApp = angular.module('ContrlApp', []);
myContrlApp.controller('MainController', function ($scope) {
var person = {
firstName: "Keith",
lastName: "Jackson",
};
$scope.message = "Welcome, Angular !";
$scope.person = person;
});
<html ng-app="ContrlApp">
<head>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<title>Angular JS Tryout</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
<div>First name: {{person.firstName}}</div>
<div>Last name: {{person.lastName}}</div>
</div>
</div>
</body>
</html>