I used angular seed with satellizer. I started the app with the command: npm install and run the project on browser by typing: http://localhost:8080/app/#/auth, but I see the browser is showing [view1] [view2]
Angular seed app: v0.1.
I have used the following codes in app.js:
'use strict';
angular.module('myApp', [
'ui.router',
'myApp.view2',
'myApp.auth',
'myApp.version',
'satellizer'
]).
config(['$stateProvider', '$urlRouterProvider', '$authProvider',
function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.loginUrl = 'http://localhost:8000/adminlogin/showLogin';
$urlRouterProvider.otherwise('/auth');
}]);
I have used the below codes for auth.js within "view_auth":
'use strict';
angular.module('myApp.auth', [])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('auth', {
url: '/auth',
views: {
'jokesContent': {
templateUrl: "view_auth/auth.html",
controller: 'AuthCtrl as auth'
}
}
})
}])
.controller('AuthCtrl', ['$auth', '$state', '$http', '$rootScope', function($auth, $state, $http, $rootScope) {`
var vm = this;
vm.loginError = false;
vm.loginErrorText;
vm.login = function() {
var credentials = {
email: vm.email,
password: vm.password
}
$auth.login(credentials).then(function() {
$http.get('http://localhost:8000/api/v1/authenticate/user').success(function(response){
var user = JSON.stringify(response.user);
localStorage.setItem('user', user);
$rootScope.currentUser = response.user;
$state.go('jokes');
})
.error(function(){
vm.loginError = true;
vm.loginErrorText = error.data.error;
console.log(vm.loginErrorText);
})
});
}
}]);
The view file (auth.html) under view_auth is below:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading"> <strong class="">Login</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required="" ng-model="auth.email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" required="" ng-model="auth.password">
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm" ng-click="auth.login()">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
`
My index.html looks like:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.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>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="view_auth/auth.js"></script>
<!--<script src="view_jokes/jokes.js"></script>-->
<script src="bower_components/satellizer/dist/satellizer.js"></script>
</body>
</html>
But after running the project, the view appear as like:
I need to show the screen like: https://i0.wp.com/baljeetsingh.in/wp-content/uploads/2015/11/2015-11-13_22-24-06.png?ssl=1
Any help appreciated.
Finally, I solved this issue. I replaced the codes <div ng-view></div> in index.html as
<div ui-view="jokesContent"></div>
Related
This is asked and answered many times already.
But, after trying many things, I still have this problem.
I have single page with a search button in Angular. The parameter is getting trough fine and logged like this console.log("searched: " + search.term);
Then I use this term to query my database using REST, the result is coming back fine. All good!
Now, I'd like to update the $scope data with these new results. I have treid to do that by adding $scope.$apply() and by using $timeout and by using $digest.
It all leads me to the error: $digest already in progress
Then I used $scope.$watch and that works, I tested it with alerts but the data never ever changes in my browser.
'use strict';
// Declare app level module which depends on views, and components
angular.module('Grep GUI', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view1'});
}]).
controller('DataBeest', function($scope, $http) {
$http.get('http://localhost:8529/_db/grep/grepdata/huizen').
then(function(response) {
$scope.greeting = response.data;
});
$scope.search = function(search) {
console.log("searched: " + search.term);
$http.get('http://localhost:8529/_db/grep/zoek/zoek/' + search.term).
then(function(response) {
$scope.greeting = response.data;
$scope.$digest()
});
}
});
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="grep GUI" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="grep Crawler">/Grand Theft grep</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>/alle_data</li>
<li>/alle_plaatjes</li>
<li>/nog_wat</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" ng-controller="DataBeest">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Zoek" name="srch-term" id="srch-term" ng-model="search.term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="search(search)"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container" ng-controller="DataBeest">
{{ greeting }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.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>
ok found it, I had re-used the controller in the view, this made it all wonky..
I am new to angularjs,can someone please help to resolve my issue.I have an index.html page,where it has a logo and some message,along with that i have a text box where i ask employeeID as a input.On entering the employeeID i would want the page to be routed to portal.html ,where i will have to display the the employee details in a form.But the form displays blank input fields.I am using restservice which would return a JSON object as below
[
{
Emp_Id: 123,
Emp_Name: "abc",
Email: "abc#jkl.com",
Primary_Skill: "angularjs",
}
]
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">
<!-- Bootstrap 3 css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS/basicPage.css">
</head>
<body ng-app="routeApp">
<div ng-view></div>
</body>
</html>
portal.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Employee Details</p>
<form>
Employee Id : <input type="text" ng-model="empPortal.Emp_Id" required></br></br>
Employee Name : <input type="text" ng-model="empPortal.Emp_Name" required></br></br>
Email Id : <input type="text" ng-model="empPortal.Email" required></br></br>
Primary Skill : <input type="text" ng-model="empPortal.Primary_Skill" required></br></br>
</form>
</body>
</html>
main.html
<form>
<div class="text-center">
<h1 class="ex1">Welcome to the portal!</h1>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>COMPETENCY MANAGEMENT is the system's ability to connect various competencies/skill sets.</p>
</div>
<div class="col-md-5">
<div class="one">
<h2 class ="ex2">Please enter your Employee ID</h2>
<label>Employee ID:</label>
<input ng-model="empID" size= "15" required>
<button type="submit" class="btn btn-default btn-sm" ng-click="submit()">Submit</button>
</div>
</div>
<div class="col-md-4">
<img ng-src="{{image}}" class="img-rounded" width="380" height="220">
</div>
</div>
</div>
</div>
</form>
app.js
var routeApp = angular.module("routeApp", ["ngRoute"]);
routeApp.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "partials/main.html",
controller : "empDetailsCtrl"
})
.when("/submit", {
templateUrl : "partials/portal.html",
})
.otherwise({
redirectTo:'/'
});
});
routeApp.controller("empDetailsCtrl",['$scope','$http','$log','$location',function ($scope,$http,$log,$location) {
$scope.image = "http://hrm-storitve.si/uploads/files/slika_13x.jpg";
$scope.submit = function(){
if ($scope.empID != null){
$http.get('http://localhost:5555/com.vog.jersey.first/rest/empService/getEmployeeDetails?employeeId='+$scope.empID')
.success(function(data)
{
$scope.empPortal = data;
$location.path('/submit');
})
.error(function(err){
$log.error(err);
})
}
else
{
$location.path('/');
}
};
}]);
I'm trying to develop an app with the ionic framework and typescript, but I'm receiving this error at ionic.bundle.js:
rrror: [ng:areq] Argument 'MainViewModel' is not a function, got undefined
This is my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TodoApp</title>
<script src="cordova.js"></script>
<link rel="stylesheet" href="css/index.css" />
<link href="Content/ionic.css" rel="stylesheet" />
<script src="scripts/ionic.bundle.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/app/ViewModels/MainViewModel.js"></script>
<script src="scripts/app/index.js"></script>
</head>
<body ng-app="app" ng-controller="MainViewModel">
<div class="bar bar-header bar-light">
<h1 class="title">Todo</h1>
</div>
<ion-content class="has-header">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="New Todo"/>
</label>
<div class="button button-small">Add</div>
</div>
</div>
</ion-content>
</body>
</html>
and here I'm setting up angular:
angular.module("app", ["ionic"])
.controller("MainViewModel", MainViewModel);
Does someone recognize the problem?
you are missing callback function inside controller.
Here is the mistake
angular.module("app", ["ionic"])
.controller("MainViewModel", function ($scope){
//yourcode
});
I'm trying to do a simple project with KendoUi + AngularJs.
When I use the code below, it works fine:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
</script>
</body>
</html>
But, when I try to separate the angular code into a .js file, (like below), it doesn't work anymore:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
<script src="Scripts/app/itensApp.js"></script> <!--ADDED-->
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
</body>
</html>
Scripts/itensApp.js
(function() {
var itensApp = angular.module('KendoDemos', ["kendo.directives"]);
}());
What I'm doing wrong?
Regards
It seems that you did not add the controller to your file.
Here's the code for the external .js file:
angular.module("MyApp", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
Here's a working example:
http://plnkr.co/edit/3vRqvvvQZ8w6RRVohVdi?p=preview
I need to load/start revealjs slides via angularjs route provider, following is the code.
It works however revealjs slide size is abnormally very small, any clue why ?
1) index.html
<!doctype html>
<html ng-app="ngApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
</head>
<body>
<button type="button" onclick="startRevealjs()">start revealjs slides</button>
</div>
<script>
function startRevealjs()
{
var res=document.getElementById("revealjsId");
res.click();
}
angular.module('ngApp', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/revealjs', {
templateUrl: 'revealjs.html'
});
//for html5 compatibility
$locationProvider.html5Mode(true);
}])
</script>
<form action="" method="post">
<div ng-view> </div>
</form>
</body>
</html>
2) revealjs.html
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>slide 1</h1>
</section>
<section>
<h1>slide 2</h1>
</section>
<section>
<h1>slide 3</h1>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({});
</script>
</body>
Note: I have recently started working on above tech.