Folder structure is as follows
assets
...........img
...........fonts
...........js
...........css
data
...........data.json
partials
...........main.html
...........contact.html
...........demo.html
...........line-of-business.html
...........product.html
directives
...........nav.html
index.html
The First Snippet is my Angular app.js File
The Second Snippet is my index.html
The Third Snippet is my main.html which is the partial i need to be put when the home page is loaded, similar to this one I have partials for other pages in my website
The Fourth Snippet is my nav custom directive which is placed inside all partials because each partial have a different id in the header
the fifth snippet is the json file I take data from to the partials
The Problem is that the directive is not loading in any of the partials html
var rootCave = angular.module("rootCave", ['ngRoute']);
rootCave.directive('navigation', [
function() {
'use strict';
return {
restrict: "E",
templateUrl: 'directives/nav.html'
};
}
]);
rootCave.service('aboutService', function($http, $q) {
"use strict";
var deferred = $q.defer();
$http.get('data/data.json').then(function(rcdata) {
deferred.resolve(rcdata);
});
this.getAbout = function() {
return deferred.promise;
};
});
rootCave.controller('aboutCtrl', function($scope, aboutService) {
'use strict';
var promise = aboutService.getAbout();
promise.then(function(rcdata) {
$scope.about = rcdata.data.about;
$scope.products = rcdata.data.products;
$scope.mobileProduct = rcdata.data.mobileProduct;
$scope.clients = rcdata.data.clients;
$scope.anytime = rcdata.data.anytime;
$scope.lobProduct = rcdata.data.lobProduct;
$scope.Product = rcdata.data.lobProduct.projectsdetails;
});
});
rootCave.config(['$routeProvider',
function($routeProvider) {
'use strict';
$routeProvider.
when('/main', {
templateUrl: '/partials/main.html',
controller: 'MainCtrl'
})
.when('/contact', {
templateUrl: '/partials/contact.html',
controller: 'ContactCtrl'
})
.when('/demo', {
templateUrl: '/partials/demo.html',
controller: 'DemoCtrl'
})
.when('/line-of-business', {
templateUrl: '/partials/line-of-business.html',
controller: 'LOBCtrl'
})
.when('/mob-app', {
templateUrl: '/partials/mob-app.html',
controller: 'MobAppCtrl'
})
.when('/mobile-apps', {
templateUrl: '/partials/mobile-apps.html',
controller: 'MobileAppsCtrl'
})
.when('/product', {
templateUrl: '/partials/product.html',
controller: 'ProductCtrl'
})
otherwise({
redirectTo: '/main'
})
}
]);
rootCave.controller('MainCtrl', ['$scope',
function($scope) {
'use strict';
}
]);
rootCave.controller('ContactCtrl', ['$scope',
function($scope) {
'use strict';
}
]);
rootCave.controller('DemoCtrl', ['$scope',
function($scope) {
'use strict';
}
]);
rootCave.controller('LOBCtrl', ['$scope',
function($scope) {
'use strict';
}
]);
rootCave.controller('MobAppCtrl', ['$scope',
function($scope) {
'use strict';
}
]);
rootCave.controller('MobileAppsCtrl', ['$scope',
function($scope) {
'use strict';
}
]);
rootCave.controller('ProductCtrl', ['$scope',
function($scope) {
'use strict';
}
]);
<!DOCTYPE html>
<html lang="en" ng-app="rootCave">
<head>
<!-- meta tags -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- meta tags -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!---- title ---->
<title>RootCave| Software House</title>
<!---- title ---->
<!---- syles ---->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<!---- syles ---->
</head>
<body data-ng-controller="aboutCtrl">
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
<!-- Footer Start-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="footer-box white">
<img class="img-responsive" src="<?php echo $img; ?>Logo_white.png">
<ul class="social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
</ul>
<div class="copy">
<br>
<p>Copyright # 2015 - RootCave</p>
</div>
</div>
</div>
<div class="col-sm-4 hidden-xs"></div>
<div class="col-sm-4">
<div class="footer-box white">
<h3 class="upper" style="
margin-left: 45px;" >Reach Us </h3>
<ul class="details">
<li><i class="fa fa-map-marker"></i>6 Gamal Salem St., from Mosadak St., Dokki, Egypt.</li>
<li><i class="fa fa-phone"></i>+(20)100 5399 170</li>
<li><i class="fa fa-envelope"></i>info#rootcave.com</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- JavaScript Files -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!-- angular js -->
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/angular-route.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/typeit.min.js"></script>
<!-- smoth scroll -->
<script src="assets/js/SmoothScroll.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!-- GOOGLE MAP -->
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 8,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(29.9773051,31.3105241), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('googleMap');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(29.9773051,31.3105241),
map: map,
title: 'Snazzy!'
});
}
</script>
<script>
$(".nav li a").click(function() {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 2000);
});
</script>
<script>
$(window).load(
function () {
$(".loading").fadeOut(2000, function () {
$(this).parent().fadeOut(2000);
});
}
);
/*--
auto typing plugin
--*/
$('.typing').typeIt({
strings: [
"Tailored to suit your business ",
"Cloud based Software for your business",
"Real time Analytics for data driven business decisions"
],
speed: 150,
breakLines: false,
loop: true,
cursor: false
});
</script>
<!-- JavaScript Files -->
<script src="assets/js/app.js"></script>
<!-- Footer End-->
</body>
</html>
<!-- Header Start ---->
<header class="header" id="header">
<!-- navigation Start -->
<navigation></navigation>
<!-- navigation End -->
<div class="p-overlay"></div>
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="header-cont">
<h2 class="typing" style="color: white;"></h2>
<a class="btn btn-primary" href="demo.php">Get Started</a>
</div>
</div>
<div class="col-sm-7">
<div style="padding:25% 0">
<img class="img-responsive" src="assets/img/mockups/responsive1.png">
</div>
</div>
</div>
</div>
</header>
<!-- Header ---->
<section class="aboutme padding white" id=aboutUs>
<div class="overlay"></div>
<div class="container">
<div class="row">
<h1 class="text-center">Root Cave at a glance</h1>
<p class="text-center" style="width:60%; margin: auto;">
Root Cave delivers a business application suite for small and medium size companies around the world. , our flexible solutions help you accelerate your business growth. That flexibility allows you to choose to implement the suite on your existing servers or move to a modern cloud implementation. Explore these pages to see why we are now the fastest growing business management solution!
</p>
<br><br>
</div>
<div class="row" ng-repeat="items in about track by $index" ng-if="$index % 2 == 0">
<div class="col-sm-6"
ng-repeat="i in [$index, $index + 1]"
ng-if="about[i]"
>
<div class="about-box">
<div class="col-xs-3">
<i class="{{about[i].icon}}"></i>
</div>
<div class="col-xs-9">
<h3>
{{about[i].title}}
</h3>
<p>
{{about[i].description}}
</p>
</div
</div>
</div>
</div>
</div>
</section>
<section class="green-l padding">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="l-box">
<h3 class="white">Web App</h3>
<p class="white">
Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.
Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.
</p>
<a class="btn btn-primary" href="/line-of-business">Get Started</a>
</div>
</div>
<div class="col-sm-6">
<div class="l-box">
<img class="img-responsive" ng-src="assets/img/PcColl.png">
</div>
</div>
</div>
</div>
</section>
<section class="mobile padding">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Mobile App</h3>
<p>
Mobile devices are increasingly utilized to access content and interact with brands. So, it is critical that you have a well-designed and solidly executed mobile experience. Root Cave provides clients with brand consistency through and throughout customized mobile websites and applications.
</p>
Get Started
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</section>
<section class='clients padding text-center' id="customers">
<div class="container">
<div class="row" >
<!-- <h1 class="text-center">Customers</h1> -->
</div>
<div class="row" ng-repeat="client in clients track by $index" ng-if="$index % 4 == 0">
<div class="col-sm-3" ng-repeat="i in [$index,$index +1,$index + 2 , $index + 3]"
ng-if="clients[i]">
<img class="img-responsive" ng-src="assets/img/clients/{{clients[i].clientLogo}} " >
</div>
</div>
</div>
</section>
<!-- navigation Start -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">
<img alt="Brand" src="assets/img/Logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>home</li>
<li>about us</li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Line Of Business App</li>
<li>Mobile App</li>
</ul>
</li>
<li>customers</li>
<li>contact us</li>
<li class="hidden-md hidden-sm hidden-xs" style="font-size: 35px;color:#696969;margin-top: 15px;">|</li>
<li>Demo</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- navigation End -->
Could it be as simple as having your directive restricted to attribute:
rootCave.directive('navigation', [
function() {
'use strict';
return {
restrict: "A", <-- here you are restricting your directive to attribute
templateUrl: 'directives/nav.html'
};
}
]);
And you are using it as an element:
<!-- navigation Start -->
<navigation></navigation> <-- here you are using it as an element
<!-- navigation End -->
Related
I'm trying learn angular by using multiple modules for a html page. One module for routing and the others for displaying content.
For example, here i have 3 modules in app.js. I have routeApp for the routes, comentUpp for displaying content. and combineApp to combine everything.
var routeApp = angular.module('routeApp',['ngRoute']);
routeApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'views/comment.php',
});
});
var commentUpp = angular.module('commentUpp',['mainCtrl', 'commentService']);
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])
and in index.php i have it like this:
<!DOCTYPE html>
<html ng-app="combineApp" >
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"> </script>
<script src="js/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body >
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" >
<div ng-view></div>
</div>
</body>
</html>
As you can see i'm trying to inject comment.php into index.php.
below is my comment.php
<html>
<div ng-controller="mainController">
<div class="col-md-8 col-md-offset-2">
<!-- PAGE TITLE =============================================== -->
<div class="page-header">
<h2>Laravel and Angular Single Page Application</h2>
<h4>Commenting System</h4>
</div>
<!-- NEW COMMENT FORM =============================================== -->
<form ng-submit="submitComment()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- AUTHOR -->
<div class="form-group">
<input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">
</div>
<!-- COMMENT TEXT -->
<div class="form-group">
<input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
<!-- LOADING ICON =============================================== -->
<!-- show loading icon if the loading variable is set to true -->
<p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
<div class="comment" ng-hide="loading" ng-repeat="comment in comments">
<h3>Comment #{{ comment.id }} <small>by {{ comment.author }}</h3>
<p>{{ comment.text }}</p>
<p>Delete</p>
</div>
</div>
</div>
</html>
for some reason it shows
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=combineApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.3%2Fangular.min.js%3A22%3A179)
any idea on how to fix this? thanks
You don't need a separate Module to have mainCtrl and commentService injected, you need to inject the commentService to your mainCtrl,
var commentUpp = angular.module('commentUpp',[]);
then
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])
What am I doing wrong? I cannot make it work. The link of login and signin don't react as they are not links. I see the url of the login when I do the mouseover upon the link the following address localhost:8080/demo/index.html#/login. I click but it doesn't work at all.
At the beginning, I didn't realize that I needed to change the anchor attribute href to ui-sref, but when I use href, it redirects to login page completely without the index.html template structure.
html - index.html
<!DOCTYPE html>
<html x-ng-app="demo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/demo.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation" style="margin-bottom: 0px !important;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header container-fluid">
<a class="navbar-brand" href="index.html">Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="login">Log in</a></li>
<li><a ui-sref="signup">Sign in</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- /.container -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('images/header.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading" style="height: 250px;">
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1" ui-view="layout">
<!-- THIS IS JUST CONTENT WHEN ARRIVING TO THE INDEX PAGE -->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
blah blah
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 24, 2014</p>
</div>
<hr>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
</div>
</footer>
<script src="../scripts/jquery-3.1.0.min.js"></script>
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-ui-router.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/ui-bootstrap-tpls-2.1.3.min.js"></script>
<script src="../scripts/demo.js"></script>
</body>
</html>
demo.js
var app = angular.module('demo', ['ui.router', 'ui.bootstrap']);
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
$urlRouterProvider.otherwise('/');
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('index', {
url: '/index',
view:{
'layout': {
templateUrl: 'index.html'
}
},
controller: ''
})
.state('login', {
url: '/login',
view: {
'layout': {
templateUrl: 'login.html'
}
},
controller: ''
})
.state('signup', {
url: '/signup',
view: {
layout: {
templateUrl: 'signup.html'
}
},
controller: 'MyController'
})
});
You're doing it completely wrong.
First of all you need to have at least one ui-view which should be present inside index.html. What's more there won't be any state which is using index.html.
Ok, so here's an example how your index.html should look like:
index.html - navbar-brand destination was changed into ui-sref="home" which is your home/starting page. It's easier to use ui-sref which takes state name (home,login,signup) than href which takes url (#/,#/login,#/singup). Besides you'll have one place to change state destination (url) than searching for all href instances.
<!DOCTYPE html>
<html x-ng-app="demo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/demo.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation" style="margin-bottom: 0px !important;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header container-fluid">
<a class="navbar-brand" ui-sref="home">Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="login">Log in</a></li>
<li><a ui-sref="signup">Sign in</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- /.container -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('images/header.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading" style="height: 250px;">
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<!-- a place where your home.html, login.html and signup.html will be included -->
<div ui-view=""></div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
</div>
</footer>
<script src="../scripts/jquery-3.1.0.min.js"></script>
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-ui-router.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/ui-bootstrap-tpls-2.1.3.min.js"></script>
<script src="../scripts/demo.js"></script>
</body>
</html>
home.html - template which was previously included inside index.html
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
blah blah
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 24, 2014</p>
</div>
demo.js - here you can find all states definition which are going to be placed in place of ui-view directive.
var app = angular.module('demo', ['ui.router', 'ui.bootstrap']);
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
$urlRouterProvider.otherwise('/');
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: function(){}
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: function(){}
})
.state('signup', {
url: '/signup',
templateUrl: 'signup.html',
controller: 'MyController'
})
});
I was able to get your code to work when i removed the 'layout' portion. also, i dont think you need the index page in the routing.
<div ui-view></div>
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('signup', {
url: '/signup',
templateUrl: 'signup.html'
})
I'm setting up a page using angular.js and am using angular-ui-router and am running into a pretty basic issue which i can't seem to figure out. I have required the proper CDN's and I believe I have setup the angular correctly but am running into a an error:
> angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=portfolioApp&p1=Err…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A19)
My app.js is as follows:
> angular.module('portfolioApp', ['ui.router','ui.bootstrap']).config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider)
>{$urlRouterProvider.otherwise('/');
> $stateProvider
> .state('main', {
> url: '/',
> views: {
> '/': {
> templateUrl: '/views/main.html'
> }
> }
> }); $locationProvider.html5Mode({
> enabled: true,
> requireBase: false
> });
>}]);
my index.html file which is located within the main folder of my app:
<!DOCTYPE html>
<html>
<head>
<title>Tammer Galal</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script> -->
<script src="/js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.css">
</head>
<body ng-app='portfolioApp' class="portfolioBody">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="index.html">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Github Repositories<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Repos</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div ui-view><div>
<!-- <footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to load a basic home partial which i have named partial-home.html which is within my public/views/partials directory path.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
</div>
<div class="col-xs-12 text-center">
<img class="img-rounded me" id="firstPicture" src="/img/me.jpg">
</div>
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div>
<h3 class="siteHeader"><strong>Rock Paper Scissors!</strong></h3>
<img class="img-rounded" id="rpsPic" src="/img/rps.jpg">
<p class="siteDescrip">Play a game of Rock, Paper, Scissors! Created utilizing: <br /><strong>HTML, CSS3, Javascript, and jQuery</strong></p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>Face Check</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/faceCheckPic.jpg">
<p class="siteDescrip">A facial and emotional recognition app Created utilizing: <br /><strong>HTML, CSS3, Javascript, jQuery, AJAX, and 3 APIs</strong><br /><strong>Co-Creators: Long Phan and Evan Bates</strong></p>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>RU Fly?</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/rufly.jpg">
<p class="siteDescrip">RU Fly is a Rutgers Web Flyer, where students can add their favorite restaurants and leave reviews, so everyone knows the best place to eat! Adding upcoming events soon!<br /><strong>HTML, CSS3, Javascript, Node.js, MySQL, Sequelize, Express, JawsDB</strong></p>
</div>
</div>
</div>
I really cannot figure out what it is i have done wrong and am thinking about starting from scratch. Any help would be greatly appreciated.
I tried to reproduce this error. Everything works fine, but when I added 'ui.bootstrap' module in app 'portfolioApp', same error message displayed. Also, I am not seeing any reference for 'ui.bootstrap' module in your 'index.html'. Try to remove 'ui.bootstrap' or add reference of this module in 'index.html'.
i'm getting Angular.js: 13424 Error: [ng:areq] Argument 'enfermerosController' is not a function, got undefinederror I don't know what is happening. Found in some places that it's maybe i'm calling ng-app twice or my module but I don't. I'm using Angular 1.5.3 and it's my first time with this problem. I will be grateful with any help you can give.
Thanks
This is my router
'use strict'
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/views/admin/partials/hola.html',
controller: 'adminController'
})
$routeProvider.when('/admin/geriatras', {
templateUrl: '/views/admin/partials/geriatras.html',
controller: 'geriatrasController'
})
$routeProvider.when('/admin/medicos', {
templateUrl: '/views/admin/partials/medicos.html',
controller: 'medicosController'
})
$routeProvider.when('/admin/enfermeros', {
templateUrl: '/views/admin/partials/enfermeros.html',
controller: 'enfermerosController'
})
$routeProvider.when('/admin/pacientes', {
templateUrl: '/views/admin/partials/pacientes.html',
controller: 'pacientesController'
})
$routeProvider.otherwise({
redirectTo: '/'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
}])
and after this is one of my controllers pacientesController (with all I have the same problem)
'use strict'
myApp.controller('pacientesController',['$scope', ($scope) => {
$scope.hello = "hello"
}])
This is enfermerosController (as you see, there's no code yet in my controllers)
'use strict'
myApp.controller('enfermerosController', ['$scope', function($scope) {
}])
and my html is this one
<!DOCTYPE html>
<html lang="es" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hospital</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/public/assets/dist/css/Matadero.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>:D</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Hospital</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Navegación</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- Notifications: style can be found in dropdown.less -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">!!Nombre Usuario Loggeado¡¡</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<!-- Menu Body -->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Perfil
</div>
<div class="pull-right">
Cerrar sesión
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" ng-controller="navController">
<li class="header">Menú</li>
<li class="active treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Personal Médico</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li ng-class="{active: isActive('/admin/geriatras')}"><i class="fa fa-circle-o"></i>Geriatras</li>
<li ng-class="{active: isActive('/admin/medicos')}"><i class="fa fa-circle-o"></i>Médicos</li>
<li ng-class="{active: isActive('/admin/enfermeros')}"><i class="fa fa-circle-o"></i>Enfermeros</li>
</ul>
</li>
<li ng-class="{active: isActive('/admin/pacientes')}"><i class="fa fa-book"></i> <span>Pacientes</span></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Panel de Control</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<div ng-view="">
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Equipo Fiucsa</b>
</div>
<strong>Tecnológico de Monterrey © 2016 Repositorio.</strong>
</footer>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!--Angular -->
<script type="text/javascript" src="/libs/angular/angular.js"></script>
<script type="text/javascript" src="/libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/public/js/app.js"></script>
<script src="/libs/angular-aria/angular-aria.js"></script>
<script src="/libs/angular-animate/angular-animate.js"></script>
<script src="/libs/angular-material/angular-material.js"></script>
<script src="/libs/angular-messages/angular-messages.js"></script>
<script type="text/javascript" src="/libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script type="text/javascript" src="/public/js/controllers/cuestionarioController.js"></script>
<script type="text/javascript" src="/public/js/controllers/geriatrasController.js"></script>
<script type="text/javascript" src="/public/js/controllers/medicosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/enfermerosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/navController.js"></script>
<script type="text/javascript" src="/public/js/controllers/adminController.js"></script>
<!-- jQuery 2.1.4 -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.5 -->
<script src="/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/public/assets/dist/js/app.min.js"></script>
</body>
</html>
I just found my error and it was the arrow functions when I define my controllers. I think we can only use arrow functions inside controllers not when you define it
theres a little explanation here:
Are ES6 arrow functions incompatible with Angular?
I'm new to AngularJS and i don't know whether i'm doing things here right. I have a welcome and a login page. I would like to be able to login on the login page and then be logged on any page of my application. I'm aware that localStorage or cookies would be better than the service to store session data, but i wanted to try this out. When I connect the user using my service in the login partial view, the session variables of the controllers aren't updated. Why?
I guess the issue is quite simple to fix and due to the fact that i missed something.
Thank you in advance for your time.
Harald
Here comes the code:
Template html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Yahoo 2014 - Welcome</title>
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/template.css">
<script src="lib/jquery/jquery-1.10.2.js"></script>
</head>
<body ng-controller="AppCtrl">
<header>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><img src="img/logo.png" alt="Yahoo logo" class="img-responsive navbar-brand"/>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Groupe</li>
<li>Services</li>
<li>Logiciels</li>
<li>Secteurs</li>
<li>Rejoignez-nous</li>
<li>Investisseurs</li>
<li>English version</li>
<li ng-hide="connected" >Login</li>
<li ng-hide="!connected"> </li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<div ng-view></div>
{{connected}}
{{username}}
<footer>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="col xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav navbar-nav">
<li>Mentions légales</li>
<li>Plan du site</li>
<li>Contacter l'administrateur</li>
</ul>
</div>
</div>
<div class="row">
<div class="col xs-4 col-sm-4 col-md-4 col-lg-4">
<p>© Copyright Yahoo 2014</p>
</div>
</div>
</div>
</nav>
</footer>
<!-- 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="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/bootstrap/bootstrap.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Index.html partial view
<div id="content">
<div class="container-fluid">
<div class="row">
<div class="col xs-12 col-sm-12 col-md-12 col-lg-12"><a id="bannerlink" href="http://www.yahoo.com"><img id="bannerimage" src="img/slider-mobile1.jpg" alt="Banner image" class="img-responsive"></a></div>
</div>
<div class="row">
<div class="articles" ng-repeat="article in articles">
<div class="col xs-4 col-sm-4 col-md-4 col-lg-4">
<h3>{{article.title}}</h3>
<p>{{article.content}}</p>
</div>
</div>
</div>
</div>
</div>
Login html partial view:
<div id="content" ng-controller="LoginCtrl">
<form name="login" action="#" ng-submit="login()">
<table>
<tr>
<td>
<p>Nickname</p>
</td>
<td>
<input type="text" name="nickname" ng-model="nickname" required>
</td>
</tr>
<tr>
<td>
<p>Password</p>
</td>
<td>
<input type="password" name="password" ng-model="password" required>
</td>
</tr>
</table>
<input type="submit" id="submit" value="Submit">
</form>
</div>
App.js:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/index', {templateUrl: 'partials/index.html', controller: 'IndexCtrl'});
$routeProvider.when('/group', {templateUrl: 'partials/group.html', controller: 'GroupCtrl'});
$routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'});
$routeProvider.otherwise({redirectTo: '/index'});
}]);
Controllers:
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller('AppCtrl', ['$scope', 'Session', function(scope, Session) {
scope.connected=Session.isConnected();
scope.username="Harald";
scope.login = Session.connect();
scope.disconnect = Session.disconnect();
scope.$watch('connected', function(){
alert("Connected changed!");
});
}])
.controller('IndexCtrl', [ '$scope', 'Article', function(scope, Article) {
scope.articles = Article.query();
}])
.controller('GroupCtrl', [function() {
}])
.controller('LoginCtrl', [ '$scope', 'Session', function(scope, Session) {
scope.connected=Session.isConnected();
scope.login = Session.connect();
scope.disconnect = Session.disconnect();
}]);
Services:
'use strict';
/* Services */
// Demonstrate how to register services
// In this case it is a simple value service.
var myAppServices = angular.module('myApp.services', ['ngResource']).
value('version', '0.1');
myAppServices
.factory('Article', ['$resource',
function(resource){
return resource('articles/:articleId.json', {}, {
query: {method:'GET', params:{articleId:'articles'}, isArray:true}
});
}])
.factory('Session', function() {
var connected = false;
var nickname = "unknown";
return{
isConnected : function() {
return connected;
},
getNickname : function() {
return nickname;
},
connect : function() {
connected = true;
window.alert("Connected service!");
},
disconnect : function() {
connected = false;
}
}
});
isConnected() returns a boolean. When you change connected in your service, you assign it a new value, but that won't affect $scope.connected
You could keep the two in sync by using a watch function:
scope.$watch(Session.isConnected, function(connected){
$scope.connected = connected;
});
From what i understand and correct me if i am wrong. you want to store state in a service and check that state when route changes to see if the user is logged in or not without the use of cookies or local storage. However storing user state in just a service will not work as if the user hits refresh button the service will be undefined and no longer valid.