First of all , I m new in angularJS.
And I m using in my first App the following versions :
AngularJs 1.5
Bootstrap 3.3.6
my First AngularJS App is structued like the following :
index.html
----js:app.js
-------controllers:controller.js
-------services:service.js
:angular.js
:angular-route.js
:angular-animate.js
:ui-bootstrap-tpls-1.1.2.min.js
----html:home.html
:header.html
:footer.html
----modal:login.html
:register.html
----css:main.css
in index.html:
**<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<title>my First Angular App</title>
</head>
<body>
<div ng-view class="'slide-animation'"></div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-animate.js"></script>
<!-- <script src="js/angular-ui-bootstrap.js"></script> -->
<script src="js/ui-bootstrap-tpls-1.1.2.min.js"></script>
<script src="js/app.js"></script>
<!-- <script src="js/service/services.js"></script> -->
<script src="js/controller/controllers.js"></script>
<link href="css\bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="css\mainstyle.css">
</body>
</html>**
app.js :
'use strict';
var app = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap']);
app.config(function($routeProvider){
//console.log($routeProvider);
$routeProvider
.when('/', { templateUrl: 'html/home.html', controller: "HomeCtrl"})
.when('/login', { templateUrl: 'modal/login.html', controller: "LoginCtrl"})
.when('/register', { templateUrl: 'modal/register.html', controller: "RegisterCtrl"})
.otherwise({redirecTo: '/'});
});
controller.js :
'use strict';
app.controller('HomeCtrl', function($scope,$rootScope){
//console.log($scope);
$scope.login=false;
$scope.slogan = "Jump inside AngularJS";
$rootScope.loading=false;
});
app.controller("LoginCtrl", function($scope,$uibModal,$log) {
$scope.open = function (size) {
console.log(size);
var modalInstance = $uibModal.open({
animate: true,
templateUrl: 'html/login.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
/*app.controller("modalAccountFormController", ['$scope', '$uibModal', '$log',
function ($scope, $uibmodal, $log) {
console.log('LoginCtrl');
//$scope.showForm = function (Type) {
// $scope.message = "Show Form Button Clicked:"+Type;
// console.log($scope.message);
var modalInstance = $uibModal.open({
templateUrl: 'modal4.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
userForm: function () {
return $scope.userForm;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
//};
}]);*/
var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
$scope.form = {}
$scope.submitForm = function () {
if ($scope.form.userForm.$valid) {
console.log('user form is in scope');
$modalInstance.close('closed');
} else {
console.log('userform is not in scope');
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
app.controller('RegisterCtrl', function($scope,$rootScope) {
console.log('RegisterCtrl');
});
home.html
<div>
<div id="wrapper">
<div class="container-fluid">
<header ng-include="'header.html'" ></header>
<div id="content">
<div class="row main-top-margin text-center">
<div class="col-md-8 col-md-offset-2 " >
<h1 class="animated flash">my First AngularJS App</h1>
<p>{{slogan}}</p>
</div>
</div>
</div>
<footer ng-include="'footer.html'"></footer>
</div>
</div>
</div>
header.html
<!-- Header -->
<div id="header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<img src="img/headlogo.png" class="img-rectangle" alt="Logo" width="150" height="60">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Info<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ng-show="login">Hello</a></li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div>
And login.html
<div>
<modal title="Login form" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" ng-model="password"/>
</div>
<button type="button" class="btn btn-default" ng-click="submit()">Submit</button>
</form>
</modal>
</div>
And my problem is : myApp NOT working :-(
And I don't know how to solve or debug it .
Could you please tell first of all on what I have done is it the right way of handling with Angularjs 1.x ?
Second thing , How to solve my issue ?
Thank you .
/Koul
Related
I want to add model dialog in my project.
My html code is like:
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
And My app.js is like this:
var app = angular.module("MyApp", ["ui.bootstrap.modal"]);
app.controller("bodyController", function($scope) {
$scope.open = function() {
$scope.showModal = true;
};
$scope.ok = function() {
$scope.showModal = false;
};
$scope.cancel = function() {
$scope.showModal = false;
};
});
I have added angular UI Bootstrap JS in my index.html file.Still I am not getting model dialog. I am getting an error which i am getting.
My error is like:
Can anyone suggest me how to do resolve this error.
This is an example for bootstrap modal. I think the way you are trying to do where you are not using bootstrap classes
There are quite a few issues in your code, so better try the sample and develop as you need
<button data-toggle="modal" data-target="#test">CLick</button>
<div class="modal fade" id="test" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Refer below.. This will help you.
var app = angular.module("MyApp", ["ui.bootstrap"]);
app.controller("bodyController", function($scope,$uibModal) {
$scope.open = function() {
var modalInstance = $uibModal.open({
animation:true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
template: `<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>`,
size: 'sm',
controller:'modalCtrl',
resolve: {
items: function () {
// return $ctrl.items;
}
}
});
modalInstance.result
.then(function (result) {
console.log('okay');
},
function (result) {
console.log('cancel');
});
};
});
app.controller('modalCtrl', function($scope,$uibModalInstance){
$scope.ok = function() {
$uibModalInstance.close();
};
$scope.cancel = function() {
$uibModalInstance.dismiss();
};
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<body ng-app="MyApp">
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button style="margin:20px" class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
I am need of showing two different bootstrap modal pop-up's when we check and uncheck the checkbox like if i check the checkbox i need to display first modal pop-up and when i un check the same checkbox then i need to display second modal pop-up.
Here is my sample html:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="myModalContent2.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<input type="checkbox" class="btn" ng-click="open()">
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
here is my sample controller :
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
I am new to angular js little bit confused with the controllers.
I guess you just have to add a few conditions that change your open() function behaviours depending on checkbox value :
Just add a model to your checkbox so you can know its value
<input type="checkbox" class="btn" ng-model="checkbox" ng-click="open()">
And now you can add a conditions depending on checkbox value
$scope.open = function() {
if ($scope.checkbox == true) {/* open modal 1 */}
else {/* open modal 2 */}
}
I am using the ng-init directive to initialize. I have a button (btnPrevious) that should not be displayed at startup, but only on the call of the ng-click. How can I initialize the application with the button hidden and then display on ng-click?
var MyApp = angular.module('MyApp', ['angular-loading-bar']);
MyApp.controller('MyController', function ($scope, $http, $rootScope) {
$scope.getFirstQuestion = function () {
$http.get('/URL')
.success(function (qst) {
$scope.question = qst;
})
.error(function (error) {
$scope.status = error.message;
console.log($scope.status);
});
}
$scope.getNextQuestion = function (p, r) {
//
}
$scope.getPreviousQuestion = function () {
//
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" class="container">
<div ng-controller="MyController" ng-init="getFirstQuestion()">
<h3>{{question.Description}}</h3>
<ul>
<li ng-repeat="r in question.Answers">
<input type="button" id="{{r.Id}}" value="{{r.Description}}"
ng-click='getNextQuestion(question.Id, r.Id)' class="btn btn-default" />
</li>
</ul>
<input type="button" ng-click='getPreviousQuestion()' name="btnPrevious" value="Previous" class="btn btn-default" />
</div>
</div>
I am working on thinkster 'Learn to Build Modern Web Apps with MEAN' tutorial. The tutorial worked well till the ui-router part. After coding the ui-router and using the inline template, my index.html is blank. googled quite a bit but I am not able to find anything helpful. Here's my code.
index.html
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</div>
</div>
</script>
</body>
</html>
app.js
angular.module('flapperNews', ['ui.router'])
var app = angular.module('flapperNews', []);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home/',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.factory('posts', [function(){
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}]);
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
}]);
I'm working on an app that uses AngularJS and Bootstrap. I am trying to show and hide a dialog from my controller using Bootstrap UI. For some reason, when I try to open the dialog, I just see a blackened screen. However, the dialog never appears.
My Plunker is here
In that plunker, you can see that I have:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
Which looks correct to me. Why is only a black screen appearing? Thank you!
The Bootstrap UI directive just needs the content of your modal as template.
You can simply remove the wrapping tags and it will show as expected:
<div id="scoopModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">...</div></div></div>
var app = angular.module('app', ['ui.bootstrap']);
app.service('myService', ['$http', '$q', function($http, $q) {
this.getOptions = function(prefix) {
return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){
console.log(response.data.results);
return response.data.results;
});
};
}]);
app.controller('MyController', ['$scope', '$modal', function ($scope, $modal) {
$scope.query = 'test';
$scope.newItem_Click = function() {
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
};
$scope.saveItem = function() {
console.log($scope.newItem);
alert('Need to close dialog here.');
};
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="MyController">
<h1>Hello Plunker!</h1>
<button class="btn btn-info" data-toggle="modal" ng-click="newItem_Click()">new item</button>
<script type="text/ng-template" id="item-dialog.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">New Scoop</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="type">Type</label>
<select id="type" class="form-control" ng-model="newItem.typeId">
<option value="-1">Other</option>
<option value="1">Product</option>
<option value="2">Service</option>
</select>
</div>
<div class="form-group">
<label>Text</label>
<textarea class="form-control" rows="3" ng-model="newItem.data"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="saveItem()">Save Scoop</button>
</div>
</script>
</body>
</html>
For closing the modal you can simply add a controller like this:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm',
controller:function($scope, $modalInstance){
$scope.saveItem=function(){
$modalInstance.close();
};
}
});