I am doing my AngularJS project with ng-route and everything works fine but the problem is I have a CSSC full background slide show which i implemented form this site http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ which work fine. When I click on other pages the content shows but the slideshow shows up as well moving/transitioning in the background. I want to stop this from happening. I want the slideshow to only show up on the index.html page only. Any solutions would be appreciated.
--- HTML code ---
<body ng-app="bigBlue"> <!--angular directive-->
<div main-page-navbar></div> <!--angular navbar directive-->
<div main-slide-show> </div> <!--angular side show directive-->
<div ng-view ></div>
<!-- Additional Java Script Files -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Angular Files -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular/angular-route/angular-route.js"></script>
<!-- Module/directives -->
<script src="js/app.js"></script>
<script src="js/directives/main-content.js"></script>
</body>
------- navbar directive code --------
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand navbar-link" href="#/">Big Blue</a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li class="active" role="presentation">Home </li>
<li role="presentation">Overview </li>
<li role="presentation">Map </li>
</ul>
</div>
</div>
</nav>
------ slide show directive code --------
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>endangered</h3></div></li>
<li><span>Image 02</span><div><h3>powerful</h3></div></li>
<li><span>Image 03</span><div><h3>caring</h3></div></li>
<li><span>Image 04</span><div><h3>loyal</h3></div></li>
<li><span>Image 05</span><div><h3>intelligent</h3></div></li>
<li><span>Image 06</span><div><h3>serene</h3></div></li>
</ul>
---- Angular Code ----
var app = angular.module("bigBlue", ["ngRoute"]); /* New module called big blue */
app.config(function($routeProvider) {
$routeProvider
.when('/overview', {
templateUrl : 'overview.html',
controller : 'whaleController'
})
.when('/map', {
templateUrl : 'map.html',
controller : 'MapController',
})
.otherwise({
redirectTo : '/'
});
});
You need to move your slideshow directive into the context of the index instead of the context of the entire application. Something like this:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<div main-slide-show></div>'
})
.when('/overview', {
templateUrl : 'overview.html',
controller : 'whaleController'
})
.when('/map', {
templateUrl : 'map.html',
controller : 'MapController',
})
.otherwise({
redirectTo : '/'
});
});
And pull the slideshow directive out of the markup.
Related
I am not able to get declared scope variable in my controller. Instead I'm getting reference error : message is not defined
Below is my code:
My Index.html
<body ng-app="myApp" ng-controller="homingController" ng-cloak>
<script type="text/javascript">
angular.module('myApp' ['ngRoute','ngMaterial']).controller('homingController', ['$scope',
function($scope){
$scope.message = 'Hello';
}
]).config(function ($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "homingController"
}).when("/monitor", {
templateUrl: "monitor.html",
controller: "monitoringController"
}).otherwise({
redirectTo: '/home'
});
}).controller('monitoringController', function ($scope) {
$scope.message = "Monitor";
});
</script>
<nav class = "navbar navbar-inverse" role="navigation">
<ul class = "nav navbar-nav" >
<li ><img src="./images/home.svg">Home</li>
<li >Monitor</li>
<li ><a class = "active" ui-sref = "Audit" ><img src="./images/audit.svg">Audit</a></li>
<li ><a class = "active" ui-sref = "configuration" ><img src="./images/configure.svg">Configure</a></li>
</ul>
</nav>
</div>
</body>
<div ng-view></div>
My home.html
{{ message}}
/*This line giving error in console : angular.js:14328 ReferenceError: $scope is not defined
*/
Is there anything I am missing here?
Your <div ng-view></div> should be inside your <body> tag. By placing it outside of the body, in which you define your app, the views have no idea what app or controller they should be using.
You also don't need to identify ng-controller's anywhere around your views, since you define them in your routeconfig:
var app = angular.module('myApp' ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "homingController"
}).when("/monitor", {
templateUrl: "monitor.html",
controller: "monitoringController"
}).otherwise({
redirectTo: '/home'
});
});
app.controller('homingController', function($scope) {
$scope.message = 'Hello';
})
app.controller('monitoringController', function($scope) {
$scope.message = "Monitor";
});
If you want to display something from one of your controllers you should define it like so:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="homingController">
{{message}}
</div>
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Monitor
</li>
</ul>
</nav>
<div ng-view></div>
</body>
With your home.html & monitor.html containing {{ message }}. An exact example of this can be found at w3Schools (Under the heading "Controllers"). Build that, then once you have that working start expanding on it to fill in the rest of your application.
I new to angular js.I am trying to create an app using angularjs with material library and i am using ui-router for routing.
But following error keeps poping up:
Uncaught Error: [$injector:modulerr] Failed to instantiate module.
Here is my code :
HTML =>
<body ng-app="SalesApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="one">one</a></li>
<li><a ui-sref="two">two</a></li>
<li><a ui-sref="three">three</a></li>
</ul>
</nav>
<div ng-controller="AppCtrl" layout="column" style="height: 500px;" >
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin>
<p>
This sidenav is not showing any backdrop, where users can click on it,
to close the sidenav.
</p>
<md-button ng-click="toggleLeft()" class="md-accent">
Close this Sidenav
</md-button>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br/>
This will disable the functionality to click outside to close the
sidenav.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-raised">
Toggle Sidenav
</md-button>
</div>
</div>
</md-content>
</section>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="js/app.js"></script>
</body>
And JS =>
var SalesApp = angular.module('SalesApp', ['ui.router', 'ngMaterial']);
SalesApp.config(function($stateProvider, $urlRouterProvider) {
var oneState = {
name: 'one',
url: '/one',
template: 'one.html'
}
var twoState = {
name: 'two',
url: '/two',
template: 'two.html'
}
var threeState = {
name: 'three',
url: '/three',
template: 'three.html'
}
$stateProvider.state(oneState);
$stateProvider.state(twoState);
$stateProvider.state(threeState);
});
SalesApp.controller('AppCtrl', function ($scope, $timeout, $mdSidenav) {
$scope.toggleLeft = buildToggler('left');
$scope.toggleRight = buildToggler('right');
function buildToggler(componentId) {
return function() {
$mdSidenav(componentId).toggle();
};
}
});
The error is caused by using different versions of angularjs and angular-animate. In the below example, I changed them with both 1.5.5 and it's working now.
var SalesApp = angular.module('SalesApp', ['ui.router', 'ngMaterial']);
SalesApp.config(function($stateProvider, $urlRouterProvider) {
var oneState = {
name: 'one',
url: '/one',
template: 'one.html'
}
var twoState = {
name: 'two',
url: '/two',
template: 'two.html'
}
var threeState = {
name: 'three',
url: '/three',
template: 'three.html'
}
$stateProvider.state(oneState);
$stateProvider.state(twoState);
$stateProvider.state(threeState);
});
SalesApp.controller('AppCtrl', function($scope, $timeout, $mdSidenav) {
$scope.toggleLeft = buildToggler('left');
$scope.toggleRight = buildToggler('right');
function buildToggler(componentId) {
return function() {
$mdSidenav(componentId).toggle();
};
}
});
<body ng-app="SalesApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="one">one</a></li>
<li><a ui-sref="two">two</a></li>
<li><a ui-sref="three">three</a></li>
</ul>
</nav>
<div ng-controller="AppCtrl" layout="column" style="height: 500px;">
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin>
<p>
This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
</p>
<md-button ng-click="toggleLeft()" class="md-accent">
Close this Sidenav
</md-button>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br/> This will disable the functionality to click outside to close the sidenav.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-raised">
Toggle Sidenav
</md-button>
</div>
</div>
</md-content>
</section>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
I'm using Yii2 with AngularJS. I have to call different pages like about us, contact us etc. But my Pretty URL not working Properly. I need PrettyUrl like this:
localhost/angularjsyii/frontend/web/site/#/login
Current Url which is not working: localhost/angularjsyii/frontend/web/site#!/#%2Flogin
.htaccess
RewriteEngine on
# If a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Otherwise forward it to index.php
RewriteRule . index.php
main.php(<navbar>)
<?php
use frontend\assets\AppAsset;
/* #var $this \yii\web\View */
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" ng-app="app">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Angular Yii Application</title>
<?php $this->head() ?>
<script>paceOptions = {ajax: {trackMethods: ['GET', 'POST']}};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/red/pace-theme-minimal.css" rel="stylesheet" />
<a base href="/angularjsyii/frontend/web/"></a>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<nav class="navbar-inverse navbar-fixed-top navbar" role="navigation" bs-navbar>
<div class="container">
<div class="navbar-header">
<button ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" type="button" 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>
<a class="navbar-brand" href="/angularjsyii/frontend/web/site/index">My Company</a>
</div>
<div ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true" class="collapse navbar-collapse" >
<ul class="navbar-nav navbar-right nav">
<li data-match-route="/">
Home
</li>
<li data-match-route="/about">
About
</li>
<li data-match-route="/contact">
Contact
</li>
<li data-match-route="/login">
Login
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-view>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-right"><?= Yii::powered() ?> <?= Yii::getVersion() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
app.js (For routing)
'use strict';
var app = angular.module('app', [
'ngRoute', //$routeProvider
'mgcrea.ngStrap'//bs-navbar, data-match-route directives
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/index.html'
}).
when('/about', {
templateUrl: 'partials/about.html'
}).
when('/contact', {
templateUrl: 'partials/contact.html'
}).
when('/login', {
templateUrl: 'partials/login.html'
}).
otherwise({
templateUrl: 'partials/404.html'
});
}
])
;
config/main.php
'urlManager' => [
'class' => 'yii\web\UrlManager',
// Disable index.php
'showScriptName' => false,
// Disable r= routes
'enablePrettyUrl' => true,
],
You should enable HTML5 mode in AngularJS to disable hashPrefix ! in your route.
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'partials/index.html'
}).
when('/about', {
templateUrl: 'partials/about.html'
}).
when('/contact', {
templateUrl: 'partials/contact.html'
}).
when('/login', {
templateUrl: 'partials/login.html'
}).
otherwise({
templateUrl: 'partials/404.html'
});
}
]);
From reading the $location documentation of AngularJS:
Relative links
Be sure to check all relative links, images, scripts etc. You must
either specify the url base in the head of your main html file (<base href="/my-base">) or you must use absolute urls (starting with /)
everywhere because relative urls will be resolved to absolute urls
using the initial absolute url of the document, which is often
different from the root of the application.
In your case the base href should be something like this <a base href="/angularjsyii/frontend/web/site">. Now you dont need # on your URL anymore. Change your routes like:
<li data-match-route="/login">
Login
</li>
The URL should finaly look like: localhost/angularjsyii/frontend/web/site/login which is more pretty.
i have a weird bug in my angular app where the data in my ng-repeat is not displaying but if i refresh the page and navigate to my home page it quickly flickers into view then disappears, im not sure why this is happening can someone help me out?
thanks in advance
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
// characters page that will use the CharactersController
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'CharactersController'
});
$locationProvider.html5Mode(true);
}]);
CharactersCtrl.js
angular.module('CharactersCtrl', []).controller('CharactersController', function($scope) {
$scope.init = function(){
$scope.getCharacters();
}
$scope.getCharacters = function(){
$.ajax({
url:'https://gateway.marvel.com/v1/public/characters?apikey=APIKEY',
success:function(response){
$scope.characters = response.data.results;
console.log($scope.characters);
},
fail:function(){
}
});
}
$scope.init();
});
characters.js
<div>
<div class="text-center">
<h1>Characters</h1>
</div>
<section id="character-section" class="row">
<figure class="columns small-3" ng-repeat="hero in characters">
<!-- <img ng-src="{{hero.thumbnail.path}}" alt="{{hero.name}}-image"> -->
<figcaption>
{{hero.name}}
</figcaption>
</figure>
</section>
</div>
index.html
<body ng-app="marvelApp">
<!-- HEADER -->
<header>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="/">Stencil: Node and Angular</a>
</div>
<!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
<ul class="nav navbar-nav">
<li>characters</li>
</ul>
</nav>
</header>
<!-- ANGULAR DYNAMIC CONTENT -->
<main ng-view ></main>
</body>
app.js
angular.module('marvelApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'CharactersCtrl', 'CharactersService']);
You are using jQuery ajax. Angular does not automatically update variable when modified outside the Angular scope (in this case, $scope.characters is modified using jquery ajax);
I sugges you use the $http service provided by angular for making ajax calls.
But if you insist in using jquery ajax, you can wrap this code $scope.characters = response.data.results; with
`$scope.$apply(function(){
})`
Result:
$scope.$apply(function(){
$scope.characters = response.data.results;
})
Does anyone know where I am going wrong? I am trying to load up a new view on a section of the page in AngularJS.
I have the following code within sidebar.html:
<ul>
<li><a ui-sref="MainPage({themeName:'theme1'})">Theme 1</a></li>
<li><a ui-sref="MainPage({themeName:'theme2'})">Theme 2</a></li>
</ul>
Then my module.js file which contains all my routes looks like this:
var main = {
name: "MainPage",
url: "/:themeName",
views: {
"mainContent": {
controller: "MainPageController",
templateUrl: function($stateParams){
var url = 'modules/main/template/' + $stateParams.themeName + '/home.html';
console.log(url);
return url;
},
},
"sidebar":{
templateUrl: "modules/main/template/sidebar.html",
controller: "SidebarController"
}
}
};
$stateProvider.state(main);
When I look at the console I can see that the urlbeing returned is correct but my view isn't updated on the screen.
Would anyone be able to point out where I'm going wrong, I'm not seeing any errors in my console and the application is loading fine.
Any help is much appreciated
The views I'm trying to load reside in modules/main/template/theme1/home.html and modules/main/template/theme2/home.html
the HTML for these views are as follows:
/theme1/home.html
<h1>This is theme 1</h1>
/theme2/home.html
<h1>This is theme 2</h1>
This is where I am using ui-view:
<body>
<!-- SIDEBAR -->
<div id="sidebar" class="col-md-2 animated fadeIn" ui-view="sidebar" ng-cloak>
<div ng-include="modules/main/template/sidebar.html"></div>
</div>
<!-- HEADER -->
<div id="header" class='col-md-10'>
<img src='assets/images/logo.png' alt='' width='270' />
<ul class="breadcrumb">
<li class="active">{{ 'MAIN.NAVIGATION.LINK1' | translate }}</li>
<li>{{ 'MAIN.NAVIGATION.LINK2' | translate }}</li>
<li><a>{{ 'MAIN.NAVIGATION.LINK3' | translate }}</a></li>
</ul>
</div>
<!-- MAIN CONTENT -->
<div id="main-container" class="col-md-10 animated fadeIn" ui-view="mainContent" ng-cloak></div>
<div id="footer" class="col-md-12"><p>This is a test site</p></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="lib/all.js"></script>
<script src="modules/app.js"></script>
</body>
Ok, so we've established that it looks like a routing problem on NodeJS. I am using gulpJS to start up my server like this:
gulp.task('server', function() {
gulp.src([DIRDEST])
.pipe(webserver({
fallback : 'index.html',
livereload : false,
open : false,
directoryListing: {
enable: true,
path: 'target/index.html'
}
}));
});
Make sure you have defined ui-view where you want to render the template:
<div ui-view="mainContent"></div>
Update
I guess, you should use the template instead of templateUrl:
template: function($stateParams){
var url = 'modules/main/template/' + $stateParams.themeName + '/home.html';
console.log(url);
return url;
}
Tip
Also, if you want to re-execute your MainPageController on view change (since both the states are same, just the parameter is changing) then you have to use ui-sref-opts:
<ul>
<li><a ui-sref="MainPage({themeName:'theme1'})" ui-sref-opts="{reload: true}">Theme 1</a></li>
<li><a ui-sref="MainPage({themeName:'theme2'})" ui-sref-opts="{reload: true}">Theme 2</a></li>
</ul>