ng-view not showing with resolve - angularjs

I am using resolve in this way (seems to be the standard way to do this way). But the view is not showing. Any ideas what I missed? Best Regards
angular.module('fifaApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/team/:code', {
templateUrl: 'views/team_details.html',
controller:'TeamDetailsCtrl as teamDetailsCtrl',
resolve: {
auth: function(UserService){
return UserService.session();
}
}
});
});
.factory('UserService', ['$http', function($http) {
var service = {
isLoggedIn: false,
session: function() {
var promise = $http.get('/api/session')
promise.success(function(response) {
service.isLoggedIn = true;
return response;
});
return promise;
};
return service;
};
}]);
.controller('MainCtrl', ['$scope','auth',
function($scope,auth) {
$scope.auth = auth.response;
}]);
And html:
<div class="team-details-container card">
<div class="team-logo">
<img title="Image Courtesy: Wikipedia"
ng-src="{{teamDetailsCtrl.team.logoUrl}}">
</div>
<div class="name">
<span ng-bind="teamDetailsCtrl.team.name"></span>
(<span ng-bind="teamDetailsCtrl.team.fifaCode"></span>)
</div>
<div class="detail">
<div class="label">
<span>Nickname</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.nickname"></span>
</div>
</div>
<div class="detail">
<div class="label">
<span>FIFA Ranking</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.fifaRanking">
</span>
</div>
</div>
<div class="detail">
<div class="label">
<span>Association</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.association"></span>
</div>
</div>
<div class="detail">
<div class="label">
<span>Head Coach</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.headCoach"></span>
</div>
</div>
<div class="detail">
<div class="label">
<span>Captain</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.captain"></span>
</div>
</div>
</div>

Add $q in service.
.factory('UserService', ['$http' , '$q', function($http, $q) {
var service = {
isLoggedIn: false,
session: function() {
var deferred = $q.defer();
var promise = $http.get('/api/session')
promise.success(function(response) {
service.isLoggedIn = true;
deferred.resolve(response);
});
return deferred.promise;
};
return service;
};
}]);

Related

ngRepeat:dupes when trying to fetch from database

I am constantly getting the mentioned error no matter what I try. The error stops when I comment out the "fetchCourses()" in courses.js file. I am guessing the error is somewhere in the http request but I cannot figure it out.
Here are my code snippets.
courses.js (controller)
var app = angular.module("app");
app.controller('coursesCtrl', ['$scope', 'Courses', '$routeParams', function ($scope, Courses, $routeParams) {
function fetchCourses() {
Courses.getCourses({}).then(function (res) {
$scope.courses = res.data;
}, function (err) {
console.log(err);
});
}
fetchCourses();
$scope.modal = {
title: "Modal",
btnText: "Ok",
save: function () {
if ($scope.modal.type == 'course_delete') {
Courses.deleteCourse($scope.modal.req).then(function (res) {
if (res.status == 200) {
$scope.courses.splice($scope.modal.req.index, 1);
$("#course_modal").modal("hide");
}
}, function (err) {
console.log(err);
});
} else if ($scope.modal.type == 'course_create') {
Courses.createCourse($scope.modal.req).then(function (res) {
$scope.courses.unshift(res.data);
$("#course_modal").modal("hide");
}, function (err) {
console.log(err);
});
} else if ($scope.modal.type == 'course_edit') {
$scope.courses[$scope.modal.req.index] = $scope.modal.req.course;
$("#course_modal").modal("hide");
$scope.modal.req.course = null;
}
},
type: "default",
req: {},
};
$scope.createCourse = function () {
$("#course_modal").modal("show");
$scope.modal.title = "Create course";
$scope.modal.btnText = "Create";
$scope.modal.type = "course_create";
$scope.modal.req = {};
};
$scope.editCourse = function (index) {
$("#course_modal").modal("show");
$scope.modal.title = "Edit course";
$scope.modal.btnText = "Ok";
$scope.modal.type = "course_edit";
$scope.modal.req.index = index;
};
$scope.deleteCourse = function (index) {
$("#course_modal").modal("show");
$scope.modal.title = "Delete course";
$scope.modal.btnText = "Yes";
$scope.modal.type = "course_delete";
$scope.modal.req.index = index;
};
}]);
Route.js
var Students = require('../../models/students');
var Courses = require('../../models/courses');
var Departments = require('../../models/departments');
var Exams = require('../../models/exams');
var ObjectId = require('mongoose').Types.ObjectId;
var bodyParser = require('body-parser');
module.exports = function (app) {
app.use(bodyParser.urlencoded({
extended: true
}));
app.post('/getCourses', (req, res) => {
Courses.find({}).exec(function (err, documents) {
res.send(documents);
console.log(documents);
});
});
app.post('/createCourse', (req, res) => {
var data = {
coursesName: req.body.coursesName,
coursesProfessor: req.body.coursesProfessor,
coursesDepartment: req.body.coursesDepartment,
coursesNumStudents: req.body.coursesNumStudents,
};
Courses.create(data, function (err, document) {
if (err) return res.status(500).send({
message: "Sorry! There was a problem creating a course."
});
res.send(document);
console.log(document);
});
});
};
menu.js (aka header)
var menu = angular.module("menu", []);
menu.controller('menuCtrl', ['$scope', '$location', function ($scope, $location) {
/*
if (notloggedin){
window.location.replace("/");
}
*/
$scope.logout = function () {
window.location.replace("/");
}
$scope.url = $location.url();
console.log($location.url());
}]);
menu.service('Courses', ['$http', function ($http) {
var Headers = {
'Content-Type': 'application/x-www-form-urlencoded',
}
var transformReq = function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
this.getCourses = function (req) {
return $http({
method: 'POST',
url: '/getCourses',
headers: Headers,
transformRequest: transformReq,
data: req
});
}
this.createCourse = function (req) {
return $http({
method: 'POST',
url: '/createCourse',
headers: Headers,
transformRequest: transformReq,
data: req
});
}
}]);
And the courses.html
<div class="wrapper">
<div ng-include="'header/menu.html'"></div>
<div class="main-panel">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>
</button>
<a class="navbar-brand" href="#">Courses</a>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Courses List</h4>
<p class="category">Here is a list of all courses</p>
<button class="btn btn-success" style="float:right" ng-click="createCourse()">Create Course</button>
</div>
<div class="content table-responsive table-full-width">
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Professor</th>
<th>Department</th>
<th>Num of Students</th>
<th>#</th>
</thead>
<tbody>
<tr ng-repeat="c in courses">
<td>{{c.coursesName}}</td>
<td>{{c.coursesProfessor}}</td>
<td>{{c.coursesDepartment}}</td>
<td>{{c.coursesNumStudents}}</td>
<td>
<a href="" ng-click="editCourse($index)">Edit
</a> /
<a href="" ng-click="deleteCourse($index)">Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="course_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title" id="modalLabel">{{modal.title}}</h5>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<form ng-if="modal.type == 'course_create' || modal.type == 'course_edit'">
<div class="form-group">
<label for="coursesName">Name</label>
<input type="text" class="form-control" ng-model="modal.req.course.coursesName" ng-disabled>
</div>
<div class="form-group">
<label for="coursesProfessor">Professor</label>
<input type="text" class="form-control" ng-model="modal.req.course.coursesProfessor" ng-disabled>
</div>
<div class="form-group">
<label for="coursesDepartment">Department</label>
<input type="text" class="form-control" ng-model="modal.req.course.coursesDepartment" ng-disabled>
</div>
<div class="form-group">
<label for="coursesNumStudents">Number of Students</label>
<input type="text" class="form-control" ng-model="modal.req.course.coursesNumStudents" ng-disabled>
</div>
</form>
<div ng-if="modal.type == 'course_delete'">
Are you sure you want to delete this course?
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="modal.save()">{{modal.btnText}}</button>
</div>
</div>
</div>
</div>
This means that $scope.courses have some values which are duplicate. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.
So in this case you can use track by $index So repeated items will be tracked by its index.
<tr ng-repeat="c in courses track by $index">{{value}}</tr>

Angularjs enable checkbox when click on href

I want to enable checkbox when click on
Google
My html code is given below
<div class="wrapper">
<div class="container">
<section class="main-ctr">
<div class="error-msg" ng-show="showError">
<div class="text">Please fix the validation error(s) below and try again</div>
</div>
<div class="error-msg" ng-show="serviceErrorMsg">
<div class="text">{{serviceErrorMsg}}</div>
</div>
<header class="security-header">
<img src="images/lock.png" alt="Security" class="security">
</header>
<main class="sm-main">
<section class="fix-section security">
<h1>Security and privacy is important to us </h1>
<p>Please read the Google</p>
<label class="control control--checkbox m-t-45">I confirm that I have read, understood and agree to
the above
<input type="checkbox" ng-model="terms.agreed"/>
<div class="control__indicator"></div>
</label>
<span class="error" ng-if="showError">Please select checkbox</span>
</section>
<div class="clear"></div>
<div class="button-ctr">
<button class="button" ng-class="terms.agreed ? 'active' : 'disable'" ng-click="proceed()">Agree</button>
</div>
</main>
</section>
</div>
</div>
<div id="loading" ng-if="showLoader">
<img src="images/loader.gif" id="loading-image">
</div>
My controller code is given below
.controller('agreementCtrl', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
$scope.terms = {
agreed: false
}
$scope.showLoader = false;
$scope.proceed = function () {
if (!$scope.terms.agreed) {
$scope.showError = true;
return;
}
$scope.showLoader = true;
}
}
So I want that when anyone click on Google link only after that my checkbox has to be enable.
You can have an variable and an event handler function in the controller like
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
}
And on the a attach an event handler and use ng-disabled directive on the input
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
Working example
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
</div>

using ng-if to make p appear if image is null

I want to make a <p> appear if an image is missing from the image source. So if there is an image show the image if there is no image show the stuff in the <p> tag.
<div id="logo">
<img src="{{selected_.image}}">
<div ng-if="selected_.image == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
</div>
Directive to handle images
var app = angular.module("app", []);
app.directive("imageLoading", function ($rootScope, $timeout) {
return {
restrict: "A",
scope: {
imageLoading: "="
},
link: function (scope, element) {
element.on("error", function () {
element.hide();
scope.$apply(function(){
scope.imageLoading = true;
})
});
}
};
});
<html ng-app="app">
<head>
</head>
<body>
<h4>image 1</h4>
<img image-loading="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92d.png">
<div ng-show="google">google image not found</div>
<hr>
<h4>image 2</h4>
<img image-loading="google2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div ng-show="google2">google image not found</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
Here, I made working example for that plz check below link.
https://jsfiddle.net/hirojaisinghani/pxwbyuLL/27/
Plz check that.
<div ng-app="ImageDisplay">
<div id="logo" ng-controller="ImageController">
<div>
<h3>
First Image
</h3>
<img ng-if="selected_.image1 != ''" src="{{selected_.image1}}" height="100px" width="50px" /></div>
<div ng-if="selected_.image1 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
<div>
<h3>
Second Image
</h3>
<img ng-if="selected_.image2 != ''" src="{{selected_.image2}}" /> </div>
<div ng-if="selected_.image2 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>
</p>
</div>
</div>
</div>
var app = angular.module('ImageDisplay', []);
app.controller('ImageController', function($scope) {
$scope.selected_ = {
image1:null,
image2:null
};
$scope.selected_.image1= 'https://cdn0.iconfinder.com/data/icons/metro-style-people-svg-icons/48/User_login-512.png';
// alert($scope.selected_.image1);
$scope.selected_.image2 = '';
$scope.discardIntroPage = function() {
alert('Add Photo');
}
});

How to use controller as syntax in the following scenario

controller as syntax problem
I am a newbie to angular, so please forgive me if i'm wrong. I have a problem where a service is used for certain operation. In this case, adding books to cart.
I have followed the recommended way using controller as syntax instead of $scope. But in kart-list.html, i'm not able to access kart details, since this operation is done by BookListCtrl.
app.js
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/books", {
templateUrl: "partials/book-list.html",
controller: "BookListCtrl",
controllerAs: 'booklist'
})
.when("/kart", {
templateUrl: "partials/kart-list.html",
controller: "KartListCtrl",
})
.otherwise({
redirectTo: "/books"
});
});
app.factory("kartService", function() {
var kart = [];
return {
getKart: function() {
return kart;
},
addToKart: function(book) {
kart.push(book);
},
buy: function(book) {
alert("Thanks for buying: ", book.name);
}
};
});
app.factory("bookService", function() {
var books = ['some data'];
return {
getBooks: function() {
return books;
},
addToKart: function(book) {
}
}
});
app.controller("KartListCtrl", function(kartService) {
var self = this;
self.kart = kartService.getKart();
self.buy = function(book) {
kartService.buy(book);
};
});
app.controller("HeaderCtrl", function() {
var self = this;
self.appDetails = {};
self.appDetails.title = "BooKart";
self.appDetails.tagline = "We have collection of 1 Million books";
});
app.controller("BookListCtrl", function(bookService, kartService) {
var self = this;
self.books = bookService.getBooks();
self.addToKart = function(book) {
kartService.addToKart(book);
};
});
book-list.html
<div id="bookListWrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search here..." />
</div>
</form>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in booklist.books" style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to Kart</button>
</div>
</li>
</ul>
</div>
kart-view.html
<div id="bookListWrapper">
<p>Please click on buy button to buy the book.</p>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in kart" style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="buy(book)">Buy</button>
</div>
</li>
</ul>
</div>
Problem is how use controller as syntax for kart-list.html near ng-repeat to access kart details?
Your'e using the controller as feature but you haven't covered all view references.
book-list.html
<button ... ng-click="addToKart(book)">Add to Kart</button>
Change to
<button ... ng-click="booklist.addToKart(book)">Add to Kart</button>
kart-view.html
<li ... ng-repeat="book in kart" ...
...
<button ... ng-click="buy(book)">Buy</button>
Change to
<li ... ng-repeat="book in KartListCtrl.kart" ...
...
<button ... ng-click="KartListCtrl.buy(book)">Buy</button>
You have to prefix booklist while calling addToKart() method in book-list.html.
Use below file which will resolve your issue:
book-list.html
<div id="bookListWrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search here..." />
</div>
</form>
<ul class="list-unstyled">
<li class="book" ng-repeat="book in booklist.books" style="background: white url('imgs/{{book.imgUrl}}') no-repeat">
<div class="book-details clearfix">
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul class="list-unstyled list-inline">
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="booklist.addToKart(book)">Add to Kart</button>
</div>
</li>
</ul>
</div>

AngularJS Modal Form Login

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

Resources