I'm trying to get ng-click from one of my views to work globally.
I started with this Plunker
and I've looked at these answers already:
ng-click not firing in AngularJS while onclick does
Angular ng-click not firing
AngularJS : ng-click not working
From what I can tell, all of these have a ng-click in the same controller whereas the function I'm trying to call is in a different controller, but it has $scope, so that function should be reachable anywhere if I'm not mistaken.
Relevant Code(sorry its alot):
index.html:
<!doctype html>
<html lang="en" ng-app="floorForceApp">
<head>
<meta charset="utf-8">
<title>Floor Force Web</title>
<link rel="stylesheet" href="floorForceApp.css" />
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- <script src="floorForceApp.js" ></script> -->
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="header-bar/header-bar.module.js"></script>
<script src="header-bar/header-bar.component.js"></script>
<script src="cabinet-page/cabinet-page.module.js"></script>
<script src="cabinet-page/cabinet-page.component.js"></script>
<script src="checkout-page/checkout-page.module.js"></script>
<script src="checkout-page/checkout-page.component.js"></script>
<script src="floor-page/floor-page.module.js"></script>
<script src="floor-page/floor-page.component.js"></script>
<script src="home-page/home-page.module.js"></script>
<script src="home-page/home-page.component.js"></script>
<script src="wall-page/wall-page.module.js"></script>
<script src="wall-page/wall-page.component.js"></script>
</head>
<body>
<header-bar></header-bar>
<div ng-view></div>
</body>
</html>
app.module.js:
'use strict';
angular.module('floorForceApp', [
'headerBar',
'ngRoute',
'cabinetPage',
'checkoutPage',
'floorPage',
'homePage',
'wallPage'
]);
app.config.js:
'use strict';
angular.
module('floorForceApp').
config(['$routeProvider',
function config($routeProvider) {
$routeProvider.
when('/home', {
template: '<home-page></home-page>'
}).
when('/floors', {
template: '<floor-page></floor-page>'
}).
when('/cabinets', {
template: '<cabinet-page></cabinet-page>'
}).
when('/walls', {
template: '<wall-page></wall-page>'
}).
when('/checkout', {
template: '<checkout-page></checkout-page>'
}).
otherwise('/home');
}
]);
checkout-page.module.js(floor-page.module.js looks the same as this, except it references 'floorPage'):
'use strict';
angular.module('checkoutPage', [
'ngRoute'
]);
checkout-page.component.js (the function I'm trying call is in this file - $scope.addToCart) :
'use strict';
angular.
module('checkoutPage').
component('checkoutPage',{
templateUrl: 'checkout-page/checkout-page.template.html',
controller: function checkOutController($scope){
$scope.cart = [];
$scope.total = 0;
$scope.totalCount = 0;
$scope.addToCart = function(item,count){
if(!count) count = 1;
if($scope.cart.filter(function (e){ return e.itemNo === item.itemNo})){
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count + count;
}else{
$scope.cart.push(item);
$scope.cart.filter(function (e){ return e.itemNo === item.itemNo})[0].count = 1;
}
$scope.total = parseFloat($scope.total + (item.itemPrice * count));
}
$scope.removeFromCart = function(item,count){
let workingItem = $scope.cart.filter(function (e){ return e.itemNo === item.itemNo});
if(!count) count = 1;
if(workingItem){
workingItem[0].count = workingItem[0].count - count;
$scope.total = parseFloat($scope.total - (item.itemPrice * count));
}else{
//If No Item found, do nothing
}
}
$scope.checkOut = function(){
}
}
})
floor-page.component.js
'use strict';
angular.
module('floorPage').
component('floorPage',{
templateUrl: 'floor-page/floor-page.template.html',
controller: function headerBarController($scope,$http){
let self = this;
$http.get('/items/floorForceData.json').then(function(resp){
self.items = resp.data;
});
}
})
floor-page.template.html(this is where the ng-click is,second input tag):
<div>
<div ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height:30em;">
<div class="container-fluid h-100" >
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
<input class="addAmount" type="number"/>
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<input class="addToCartButton btn btn-success" ng-click="$scope.addToCart(item)" type="button"value="Add to Cart"/>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You are using components and therefore each $scope is isolated. From the docs:
Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in AngularJS it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.
The line ng-click="$scope.addToCart(item)" would not work anyway as you would need to access the function through the controller alias which defaults to $ctrl. So you would write something like $ctrl.addToCart(item).
If I were you I would continue to use components and restructure the app so that communication between components is explicit, either through input/output bindings, or through services.
Hope this helps
Related
I am learning angularjs and bootstrap.
It is simple, but I dont know, what I am doing wrong.
The point is to reload the page with a button, but I was not able to get inside the function, which has to reload the page.
This is my component.js
myApp.component('refreshComponent', {
template:"<button class='btn btn-lg btn-info' ng-click='refresh()' >Refresh </button>",
controller: function RefreshController($scope, $element, $attrs) {
var vm = this;
vm.refresh = function(){
console.log("How to get here?")
location.reload();
}
}
});
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div ng-app="myApp" class="container bg-primary img-rounded">
<h1>
<div class="row">
<div class="col-xs-6 text-right">
<date-component></date-component>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-right">
<greetings-component></greetings-component>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-right ">
<refresh-component></refresh-component>
</div>
</div>
</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="date.component.js"></script>
<script src="greetings.component.js"></script>
<script src="refresh.component.js"></script>
</body>
</html>
BTW those other componnent are working
var myApp = angular.module('myApp', []);
myApp is initialized in date.component.js
Be sure you added controllerAs: 'vm', to your component and ng-click='refresh() to ng-click='vm.refresh()
So your component should look like:
myApp.component('refreshComponent', {
template:"<button class='btn btn-lg btn-info' ng-click='vm.refresh()' >Refresh </button>",
controllerAs: 'vm',
controller: function RefreshController($scope, $element, $attrs) {
var vm = this;
vm.refresh = function(){
console.log("How to get here?")
location.reload();
}
}
});
Tip 1:
if you use vm, you don't need $scope at all. A.e.:
function RefreshController($element, $attrs)
Tip 2:
If you go to obfuscate your code, worth to use $inject to avoid unexpected behavior:
myApp.component('refreshComponent', {
template:"<button class='btn btn-lg btn-info' ng-click='vm.refresh()' >Refresh </button>",
controllerAs: 'vm',
controller: RefreshController
});
function RefreshController($element, $attrs) {
var vm = this;
vm.refresh = function(){
console.log("How to get here?")
location.reload();
}
}
RefreshController.$inject = ['$element', '$attrs'];
I have an array of jsons that have this structure:
[{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}]
I want to insert this jsons in this div:
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
And i iterate over the todo in todos that i get in this scope
Todos.get(12175507942)
.success(function(data) {
$scope.todos = data;
});
I get the data fine, however i can't seem to get the value playlist_name.
I print the data and i get this.
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
with, each object being:
$$hashKey:"005"
playlist_id:"0DAlm2gb8DrtyRSXEKw07h"
playlist_name:"Rocola On The Go"
__proto__:Object
the code for the Todos.get
angular.module('todoService', [])
// super simple service
// each function returns a promise object
.factory('Todos', ['$http',function($http) {
return {
get : function(id) {
return $http.post('/api/getPlaylists',{"id":id});
},
create : function(todoData) {
return $http.post('/api/todos', todoData);
},
delete : function(id) {
return $http.delete('/api/todos/' + id);
}
}
}]);
I show the controllers code:
angular.module('todoController', [])
// inject the Todo service factory into our controller
.controller('mainController', ['$scope','$http','Todos', function($scope, $http, Todos) {
$scope.formData = {};
$scope.loading = true;
// GET =====================================================================
// when landing on the page, get all todos and show them
// use the service to get all the todos
Todos.get(12175507942)
.success(function(data) {
console.log(data);
$scope.todos = data;
$scope.loading = false;
});
// CREATE ==================================================================
// when submitting the add form, send the text to the node API
$scope.createTodo = function() {
// validate the formData to make sure that something is there
// if form is empty, nothing will happen
if ($scope.formData.text != undefined) {
$scope.loading = true;
// call the create function from our service (returns a promise object)
Todos.create($scope.formData)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos = data; // assign our new list of todos
});
}
};
// DELETE ==================================================================
// delete a todo after checking it
$scope.deleteTodo = function(id) {
$scope.loading = true;
Todos.delete(id)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.todos = data; // assign our new list of todos
});
};
}]);
And i will show the view page:
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Optimize mobile viewport -->
<title>Node/Angular Todo App</title>
<!-- load bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<!-- load angular -->
<script src="js/controllers/main.js"></script>
<!-- load up our controller -->
<script src="js/services/todos.js"></script>
<!-- load our todo service -->
<script src="js/core.js"></script>
<!-- load our main application -->
</head>
<!-- SET THE CONTROLLER -->
<body ng-controller="mainController">
<div class="main-container">
<section>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<h4 class="uppercase mb16">Tus Playlists<br></h4>
<p class="lead mb80"><br></p>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-offset-2 col-md-8">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
<p class="text-center" ng-show="loading">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</p>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
and here is the core.js
angular.module('scotchTodo', ['todoController', 'todoService']);
Your code is working fine as per the code given in OP.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.todos = [{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
</div>
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'
})
});
I was following some random YT tutorial on using Angular's $routeProvider and the result - contrary to the video - is not working for me. Instead, what I get is crashed website and this error logged in Chrome's console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=site&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249) By following the trail, I found that there's something wrong with `$routeProvider', but beats me if I know what. Here's my code:
var site = angular.module('site', []).
config(function($routeProvider){
$routeProvider.
when('/home', {template:'/pages/home.html'}).
when('/', {template:'/pages/home.html'}).
when('/in-play', {template:'/pages/in-play.html'}).
when('/popular', {template:'/pages/popular.html'}).
otherwise({redirectTo:'/home', tempalte:'/pages/home.html'});
});
function MainCtrl($scope, $location) {
$scope.setRoute = function(route) {
$location.path(route);
};
};
And here are all the HTMLs (I'm working with ng-include also):
<!DOCTYPE html>
<html ng-app="site">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/app.js"></script>
<title>Pre-Demo</title>
</head>
<body ng-controller="mainStaysCtrl">
<header class="header" ng-include="'pages/header.html'"></header>
<nav class="nav" ng-include="'pages/nav.html'"></nav>
<div class="main">
<div class="left-col">
<div class="quick links" ng-include="'pages/quick_links.html'"> </div>
<div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
<div class="winner links" ng-include="'pages/winner_links.html'"></div>
</div>
<div class="center-col" ng-controller="mainCtrl">
<div class="wraper" ng-view ng-controller="jsonCtrl"></div>
</div>
<div class="right-col">
<div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
<div ng-include="'pages/twitter.html'"></div>
</div>
</div>
</body>
</html>
//included page that has the call for $routeProvider
<div class="events">
<div class="bullet">
<div class="bullet-padding">
<div ng-click="setRoute('in-play')" class="bullet-link">In-Play Links</div>
</div>
</div>
</div>
Could someone please tell me what's wrong?
EDIT
After Antiga's answer I got it to load the page. Everything besides the content that is to be loaded with ng-view and for which $routeProvider was set up in the first place. Here's the updated code:
var site = angular.module('site', ['ngRoute']).
config(function($routeProvider){
$routeProvider.
when('/home', {templateUrl:'/pages/home.html'}).
when('/', {templateUrl:'/pages/home.html'}).
when('/in-play', {templateUrl:'/pages/in-play.html'}).
when('/popular', {templateUrl:'/pages/popular.html'}).
otherwise({redirectTo:'/home', tempalteUrl:'/pages/home.html'});
});
site.controller('mainStaysCtrl', function($scope) {
$scope.setRoute = function(route) {
$location.path(route);
};
});
and HTML
<body ng-controller="mainStaysCtrl">
<header class="header" ng-include="'pages/header.html'"></header>
<nav class="nav" ng-include="'pages/nav.html'"></nav>
<div class="main">
<div class="left-col">
<div class="quick links" ng-include="'pages/quick_links.html'"></div>
<div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
<div class="winner links" ng-include="'pages/winner_links.html'"></div>
</div>
<div class="center-col">
<div class="wraper" ng-view ></div>
</div>
<div class="right-col">
<div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
<div ng-include="'pages/twitter.html'"></div>
</div>
</div>
You are not including the routing module.
Read up on this here so that you actually understand it first: https://docs.angularjs.org/api/ngRoute
Add this after you include angular.min.js:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
And then include the dependency in your main app module:
var site = angular.module('site', ['ngRoute']).
Okay, I got it working beyond Antiga's help.
There was few (yet minor) problems. I had to extend templateUrl path to include project folder.
when('/home', {templateUrl: '/ProjectName/pages/home.html', controller: 'mainStaysCtrl'}).
Other thing is that I simply forgot to include $location in controller.
site.controller('mainStaysCtrl', function($scope, $location) {
$scope.setRoute = function(route) {
$location.path(route);
};
});
Right I've got a really dumb one for you, and I've been looking at this code all day with no result.
I have a simple textbox which goes through a controller and updates a variable inside a service (The service will eventually fetch/update data from somewhere else).
At the moment, I am able to retrieve the variable value all the way to the view and it works, but the textbox is unable to update the variable inside the service in order to then display the new variable value in the view again....
I really appreciate any help and hope I have made sense!!!
// APP/APP.JS
(function(){
var app = angular.module('appMod', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'introController',
templateUrl: 'app/partials/intro.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('nameController', function($scope, dataService) {
var nameValue;
this.name = dataService.getName();
this.submitName = function(nameVal) {
nameValue = this.nameCtrl.nameVal;
dataService.setName(nameValue);
};
});
app.controller('introController', function($scope, dataService) {
this.name = dataService.getName();
});
app.service('dataService', function () {
var name = "f";
this.getName = function() {
return name;
};
this.setName = function(nameVal) {
name = nameVal;
};
});
})();
<!-- INDEX.HTML -->
<!DOCTYPE html>
<html ng-app="appMod">
<head>
<link rel="stylesheet" type="text/css" href="content/css/normalize.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/style.css">
<link rel="stylesheet" type="text/css" href="content/css/animation.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-timer.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="nameController as nameCtrl">
<img src="content/images/sitelogo.png" class="logo">
<h2 class="welcomeMessage fade">Welcome <span class="fade" ng-show="!nameCtrl.name == ''">{{nameCtrl.name}}</span><span class="inline fade" ng-hide="nameCtrl.name !== ''">Friend</span> <small>(We like to get personal!)</small></h2>
<div class="namebox fade">
<h2>Welcome <small class="fade">Please type your name</small></h2>
<form class="fade">
<div class="form-group">
<input type="text" class="form-control" ng-model="nameCtrl.nameVal" autofocus>
</div>
<button type="submit" style="width:100%;" class="btn btn-default fade" ng-click="nameCtrl.submitName()" >Submit</button>
</form>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
You need to be binding to name and not nameVal on your input
Then just pass that in your setName call, i don't think the rest of the code is needed in there, you can get rid of the nameValue var too.
this.submitName = function() {
dataService.setName(this.name);
};
The nameValue var is local to the controller and not available on the $scope to bind to your view, so even though you were changing it, the view didn't know about it as it couldn't see that var.