I want to have particular variable for menu to know which class to be active. Up to now I know how to set variable inside ng-view but I want to keep my menu out of that view. If I set variable in function in controller isn't visible outside of ng-view and that is exactly what I want to, to be visible. I try with rootscoope but I couldn't manage. If someone can help me my code is like this:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<title>Example</title>
</head>
<body>
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<link href="libs/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="libs/ng-dialog/css/ngDialog-theme-default.css" rel="stylesheet">
<script src="libs/ng-dialog/js/ngDialog.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/mainCtr.js"></script>
</body>
</html>
app.js
(function () {
'use strict';
angular
.module('example', ['ngRoute','ngDialog'])
.config(function ($routeProvider,$httpProvider) {
$routeProvider.when('/', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/firstPage.html'
});
$routeProvider.when('/second', {
controller: 'mainCtr',
controllerAs: 'mCtr',
templateUrl: 'app/views/secondPage.html'
});
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
}).run(function($http, $httpParamSerializerJQLike) {
//decode json on every submit form
$http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
})
})();
controller:
(function() {
'use strict';
angular
.module('example')
.controller('mainCtr', mainCtr);
mainCtr.$inject = ['$window','$routeParams','ngDialog','$timeout'];
function mainCtr($window,$routeParams,ngDialog,$timeout) {
var vm = this;
vm.firstPage = firstPage;
vm.secondPage = secondPage;
function firstPage() {
vm.test = 'This is first page';
}
function secondPage() {
vm.test = 'This is second page';
}
}
})();
I want to have access to variable vm.test in <div class="container-fluid main-header">
I would make a Controller around the ng-view which hold the value(s):
<body ng-controller="OuterController">
<div class="container-fluid main-header">
<div class="main-menu-active">First page</div>
<div class="main-menu">Second page</div>
</div>
<div ng-view class="main-body"></div>
...
</body>
and if you want to share data between the controllers in ng-view directive use a service.
So I've made a plunker to illustrate, how data sharing is accomplished: https://plnkr.co/edit/axekEgrFwnm93aFXoMKd
So the basic idea is to use a service and in someway either by button click as in the question or automatically in contoller as plunker, set the shared value.
Service
app.service('commonInfomation', function() {
return {
test: ''
};
});
Inner controller
app.controller('FirstCtrl', function($scope, commonInfomation) {
commonInfomation.test = "Hello from first page";
});
Outer controller
app.controller('MainCtrl', function($scope, commonInfomation) {
$scope.commonInfomation = commonInfomation;
});
View
<body ng-controller="MainCtrl">
<h2>{{commonInfomation.test}}</h2>
<div class="container-fluid main-header">
<a href="#/">
<div class="main-menu-active">First page</div>
</a>
<a href="#/second">
<div class="main-menu">Second page</div>
</a>
</div>
<div ng-view class="main-body"></div>
</body>
Module
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'firstpage.html',
controller: 'FirstCtrl'
})
.when('/second', {
templateUrl: 'secondpage.html',
controller: 'SecondCtrl'
})
});
Related
I am very new in angular JS and ng-view is not working.
Below is code of AngularFormsApp.js
var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]);
angularFormsApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/Home.html",
controller: "HomeController"
})
.when("/newEOIForm", {
templateUrl: "app/EOIForm/eoifTemplate.html",
controller: "eoifController"
})
.otherwise({
redirectTo: "/Home"
});
});
angularFormsApp.controller("HomeController",
function ($scope, $location) {
$scope.addNewEOI = function () {
$location.path('/newEOIForm');
};
});
Below is html code.
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EOIForm/eoifController.js"></script>
<script src="app/EOIForm/eoifDirective.js"></script>
<script src="app/EOIForm/eoifService.js"></script>
</head>
<body ng-controller="eoifController" class="container">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="nav">
Home
About
Detail
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
</body>
</html>
Below is my root structure.
Why ng-view is not working, also I am not able to debug the code.
Be careful with that $routeProvider.otherwise({redirectTo: '/Home'}).
It should be:
$routeProvider.otherwise({redirectTo: '/home'})
Please, link the href in your index.html like this:
Home
About
Detail
And in your config:
angularFormsApp.config(function ($routeProvider) {
$locationProvider.hashPrefix('');
// Rest of the code
I am developing a single page web application using AngularJS' ng-view and ng-template directives. But when I run it my browser show this type [1]: http://i.stack.imgur.com/TPuPo.png of error.
Here is my script block with main module and routing configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - Views</title>
<!--AngularJs Library-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">Simple Application using AngularJS - Views</h2><hr><br>
<!--Start AngularJS App-->
<div ng-app="myApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
<!--Script for Add Student-->
<script type="text/ng-template" id="addStudent.htm">
<h2>This is the view of Add Student</h2>
{{message}}
</script>
<!--Script for View Students-->
<script type="text/ng-template" id="viewStudent.htm">
<h2>This is the view of all students</h2>
{{message}}
</script>
</div>
<!--End AngularJS App-->
<!--App Necessary Scripts-->
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudent', {
templateUrl: 'viewStudent.htm',
controller: 'ViewStudentController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
myApp.controller('AddStudentController', function ($scope) {
$scope.message = "This page will be used to display add student form!!";
});
myApp.controller('ViewStudentController', function($scope){
$scope.message = "This page will be used to display all students!!";
});
</script>
</body>
</html>
what can I do to fix it?
Here's your working code. Also here's a CodePen example, I reorganize the code to make it more comfortable, please review it, study it and compare it for learning purpose. http://codepen.io/alex06/pen/rrzRbE?editors=1010
<html ng-app="mainApp">
<head>
<title>Angular JS Views</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div>
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
</div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
<script>
(function(){
'use strict'
angular
.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}])
.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
})
.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
})();
</script>
</body>
</html>
Just change the following line:
myApp.config(['routeProvider',function ($routeProvider) {
To
myApp.config(['$routeProvider',function ($routeProvider) {
I think this is what you missed.
Define config as this:--
myApp.config(function ($routeProvider) { $routeProvider
Rather than:-- myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.
Here's the code
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<base href='/'>
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-book"></span>Testing App
</div>
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
<li>Write</li>
</ul>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('MyApp')
.controller('HomeController', function($scope, $location) {
$scope.data = "Hello Angular";
})
.controller('ModalController', function($scope, $location, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: function() {
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
home.html
<div class="container">
<h1>Awesome {{ data }}</h1>
</div>
modal.html (The path that the modal suppose to show);
<h1>Need to show this actually</h1>
The picture, what shows up after i clicked the text that trigger the modal event
Added this:
<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>
right after
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
and it works in plunker:
http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview
I have a SPA that requires a different header to display based on which route location the user is on. It seems like the code I have should be working but it produces an error like this: TypeError: undefined is not a function
What am I missing here:
html
<html lang="en" ng-app="configApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<title>Configuration Admin</title>
<!-- Bootstrap CSS -->
<link href="_/css/bootstrap.css" rel="stylesheet">
<link href="_/css/main-styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header-->
<div class="row">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="showNavIcons"></div>
<!-- Header to be shown when Dashboard view-->
<div ng-include="'templates/headers/nav-logo.html'" ng-if="hideNavIcons"></div>
</div> <!-- end header -->
</div>
<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>
</body>
</html>
JS
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap'])
.config(function($routeProvider){
$routeProvider.when('/dashboard', {
templateUrl: 'templates/dashboard/home.html'
// controller: 'HomeController'
})
.when('/organizations', {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: 'OrganizationController',
activetab: 'organizations'
})
.when('/program-details-edit', {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: 'ProgramDetailsEdit'
})
.otherwise( {redirectTo: '/dashboard'} );
});
// Side Nav Link Controllers
configApp.controller('OrganizationController', function($scope) {});
configApp.controller('SideNavCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
configApp.controller('ProgramDetailsEdit', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.showNavIcons = $location.path() === '/program-details-edit';
}]);
configApp.controller('OrganizationController', ['$scope', '$location', '$route', function($scope, $route, $location) {
$scope.hideNavIcons = $location.path() === '/organizations';
$scope.$route = $route;
}]);
You need to add the controllers to the elements. "ng-controller='controllerName'" as an attribute. As far as the type error it is undefined however if you do... !!variable then undefined becomes false.
Edit:
<div class="row" ng-controller="ProgramDetailsEdit">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="!!showNavIcons">
</div>
ng-controller will give the dom inside of the dive access to everything that it puts into the $scope variable that you set in it.
As a side note you should look at UI-Router https://github.com/angular-ui/ui-router
it's a lot easier and more powerful then $routeProvider and you would be able to instead do something along the lines of the follow...
<div class="row" ng-controller="appController">
<!-- Header to be shown when a program is edited-->
<div ng-include="'templates/headers/nav-icons.html'" ng-if="state.name == 'programEditor'">
</div>
It might be the missing ng-controller tag on your html chrome.
Something like below :
Problem easily solved by using the angularJS ui router instead of ngRouter. Thanks for all the guidance on directing me to the perfect solution.
Heres how I solved it:
Javascript
var configApp = angular.module("configApp", ['ngRoute','ui.bootstrap','ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/dashboard");
// ui router states
$stateProvider
.state('cas', {
url: "/cas",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('applications', {
url: "/applications",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/application/applications-title.html',
controller: function($scope) {}
}
}
})
.state('organizations', {
url: "/organizations",
views: {
header: {
templateUrl: 'templates/headers/nav-logo.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/organizations-title.html',
controller: function($scope) {}
}
}
})
.state('program-details', {
url: "/program-details",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details.html',
controller: function($scope) {}
}
}
})
.state('program-details-edit', {
url: "/program-details-edit",
views: {
header: {
templateUrl: 'templates/headers/nav-icons.html',
controller: function($scope) {}
},
content: {
templateUrl: 'templates/dashboard/organizations/programs/program-details-edit.html',
controller: function($scope) {}
}
}
});
});
HTML
<html lang="en" ng-app="configApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<title>Configuration Admin</title>
<!-- Bootstrap CSS -->
<link href="_/css/bootstrap.css" rel="stylesheet">
<link href="_/css/main-styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header-->
<div class="row" ng-controller="NavCtrl">
<div ui-view="header"></div>
</div> <!-- end header -->
<section class="main-content">
<div class="row">
<!-- Sidebar -->
<div class="col-xs-3 sidebar">
<!-- Pullout menu -->
<nav id="sidebar-pullout">
<!--<li>application</li>-->
<!--<li>organization</li>-->
<div id="menu-listings"></div>
</nav>
<!-- end pullout-->
<div ng-controller="SideNavCtrl">
<ul class="list-unstyled side-nav">
<li ng-class="{active:isActive('/cas')}"><a id="showCas" href="#/cas" ui-sref="cas">cas</a></li>
<li ng-class="{active:isActive('/applications')}">application</li>
<li ng-class="{active:isActive('/organizations')}">organization</li>
</ul>
</div>
</div> <!-- Side Bar end -->
<!-- Page Content -->
<div class="col-xs-9 main-page">
<div ui-view="content"></div>
</div> <!-- Page content end -->
</div>
</section> <!-- End main Content -->
</div>
<!-- Scripts -->
<script src="_/js/bootstrap.js"></script>
<script src="_/js/main-scripts.js"></script>
<script src="_/js/angular.min.js"></script>
<script src="_/js/angular-route.min.js"></script>
<script src="_/js/angular-ui-router.min.js"></script>
<script src="_/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="_/js/router.js"></script>
</body>
</html>
I have a very simple app. When I start the app it works fine, both angular and angular-route are loaded, the config function is executed and "otherwise" works as intended.
However, both boxes and versions do not work and no HTML is injected. The main page just says
<!-- ngView: -->
and that's it.
THERE ARE 0 ERROR MESSAGES!!! The console is just empty as a desert.
I tried everything and it should work but it doesn't. I even tried replacing the browserify calls and including angular directly in the html - no success.
HTML:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>app</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="mainheader">
<div class="client-logo"></div>
<div class="logo"></div>
</header>
<nav class="mainmenu">
<ul>
<li class="active">Boxes</li>
<li>Versions</li>
</ul>
</nav>
<div ng-view></div>
<footer></footer>
</body>
<script src="./js/bundle.js"></script>
</html>
My JS:
'use strict';
require('angular/angular');
require('angular-route/angular-route');
var controllers = require('./controllers');
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/boxes', {
tamplate: 'views/boxes.html',
controller: 'boxController'
})
.when('/versions', {
tamplate: 'views/versions.html',
controller: 'versionsController'
})
.otherwise({
redirectTo: '/boxes'
});
}
]);
app.controller('boxController', controllers.boxController);
app.controller('versionsController', controllers.versionsController);
Example view:
<h2>Boxes</h2>
<p>{{ message }}</p>
Example controler:
'use strict';
exports.boxController = function($scope) {
$scope.message = 'Box Controller';
console.log('boxes');
};
exports.versionsController = function($scope) {
$scope.message = 'Versions Controller';
console.log('versions');
};
I'm as stupid as they come, the problem is a spelling error, it's tEmplate!
Thanks for the responses.