https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview
I have created an array of items and when I click on each item details page will be displayed ,for all the items in the array I have used same details page,can anyone look at my plunker and explain why the templateURL is not working when I click on an item?
var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
$scope.items = [{
name: 'Iphone',
}, {
name: 'Oneplus'
}, {
name: 'Moto'
}];
});
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
app.controller('ItemCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.itemName = $routeParams.itemName;
}
]);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="script.js"></script>
<body ng-app="myApp" ng-controller="mobileController">
<h2> Welcome to Mobile Store</h2>
<p>Search:<input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="item in items|filter:test">{{ item.name }}
</li>
</ul>
<div ng-view></div>
</body>
</html>
here is my details page
<!DOCTYPE html>
{{itemName}}
is it because of a mismatch?
.when('/item/:itemName', {
a href="/items/{{item}}"
there's an extra s there
Summary of problems:
Your ItemCtrl is currently defined inside your module's config function. Move it out of there
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
}); // you were missing this
app.controller('ItemCtrl', ['$scope', '$routeParams',
Your route is /item/:itemName and since you're not using HTML5 mode, you need to create your href attributes with a # prefix. For example
ng-href="#/item/{{item.name}}"
Fixed demo here ~ https://plnkr.co/edit/rKHsBMFcXqJUGp8Blx7Q?p=preview
Related
I am relatively new to Angularjs, and am building a website. When I try to inject todo.html into the body tags of index.html nothing happens. I am not getting any errors in the console. I have read many of the similar posts to mine, and have already tried
Remove the ng-include from the body of index.html
Moved the links for angualrjs and bootstrap from the body of index.html to the head
Originally I used Ng-route but it did not work, so I implemented ui-router
I have tried both ng-route and ui-router,and both run without any errors. I don't think it has anything to do with either.
index.html
<html ng-app="todoApp">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Todo App</title>
<!-- Angular ans JS links-->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/services/todo.service.js"></script>
<script src="app/controllers/todo.controller.js"></script>
<!-- <script src="vendor/angular-route/angular-route.min.js"></script>-->
<!--Jquery and Bootstrap Links-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"
crossorigin="anonymous"></script>
<!-- css links -->
<link href="vendor/bootstrap-css-only/css/bootstrap.min.css" rel="stylesheet"><!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/todoApp.css">
<link rel="stylesheet" type="text/css" href="assets/css/Header-Picture.css">
</head>
<body >
<div ng-include="'app/views/header.html'"></div>
<!--<div ng-include="'app/views/footer.view.html'"></div>
-->
<ui-view></ui-view>
<!--<div ui-view></div>-->
</body>
</html>
App.js
var todoApp = angular.module('todoApp', [
'ui.router'
]);
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
todo.controller.js
todoApp.controller('TodoController', ['$scope', 'Todos', function TodoController($scope, Todos) {
$scope.formData = {};
console.log("in the TodoController");
// when landing on the page, get all todos and show them
Todos.get()
.success(function(data) {
$scope.todos = data;
});
// when submitting the add form, send the text to the spring API
$scope.createTodo = function() {
if(!$scope.todoForm.$valid) {
return;
}
Todos.create($scope.formData)
.success(function(data) {
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos.push(data);
});
};
// delete a todo after checking it
$scope.deleteTodo = function(id) {
Todos.delete(id)
.success(function(data) {
angular.forEach($scope.todos, function(todo, index){
if(todo.id == id) {
$scope.todos.splice(index, 1);
}
});
});
};
// when submitting the add form, send the text to the node API
$scope.saveTodo = function(todo) {
Todos.update(todo)
.success(function(data) {
$scope.editedTodo = {};
});
};
$scope.editedTodo = {};
$scope.editTodo = function(todo) {
$scope.editedTodo = todo;
}
$scope.revertTodo = function() {
$scope.editedTodo = {};
}
}]);
You should be using otherwise to force the first state to be loaded as below
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'todo.html',
})
$urlRouterProvider.otherwise('/');
});
Your index.html will look like
<div ng-include="'app/views/header.html'"></div>
<ui-view>
</ui-view>
LIVE DEMO
I added the code posted by #Aravind to my project which I belive was an improvement on my own and was correct. But the issue was the file path to the todo.html. The file path in the original was views/todo.html
the correct path is app/views/todo.html
My original code:
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
Current Working Code
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'app/views/todo.html',
})
$urlRouterProvider.otherwise('/');
});
I'm trying to make a custom directive that will show some elements that i previously declared in the MainController
HTML body:
<body ng-app="myApp" ng-controller="MainController">
<h1> Choose your Car </h1>
<div ng-repeat="car in cars">
<my-pattern info="car"></my-pattern>
</div>
<script src="js/MainController.js"></script>
<script src="js/myPattern.js"></script>
</body>
MainController:
angular.module('myApp').controller('MainController',function($scope) {
$scope.cars=[
{
icon: 'imgs/lamborghini.jpg',
name: 'Lamborghini',
price: 100000
},
{
icon: 'imgs/audi.png',
name: 'Audi',
price: 80000
}
];
});
Custom Directive
angular.module('myApp').directive('myPattern', function() {
return{
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/myPattern.html'
};
});
Template:
<img ng-src="{{info.icon}}">
<h2>{{info.name}}</h2>
<p>{{info.price}}</p>
If i don't use the directive but i just make the output whit the expressions <h2>{{car.name}}</h2> like this it work but with the custom directive it doesn't show me nothing.
I have all in different files.
This is working for me. There must be a issue with the location of your template with respect to your current HTML:
var app = angular.module("myApp", []);
angular.module('myApp').controller('MainController', function($scope) {
$scope.cars = [{
icon: 'imgs/lamborghini.jpg',
name: 'Lamborghini',
price: 100000
}, {
icon: 'imgs/audi.png',
name: 'Audi',
price: 80000
}];
});
angular.module('myApp').directive('myPattern', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/myPattern.html'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
<h1> Choose your Car </h1>
<div ng-repeat="car in cars">
<my-pattern info="car"></my-pattern>
</div>
<script type="text/ng-template" id="js/directives/myPattern.html">
<img ng-src="{{info.icon}}">
<h2>{{info.name}}</h2>
<p>{{info.price}}</p>
</script>
</div>
I solved, i didn't synchronize the directives in the Custom Directive and in the body HTML. The code was right but i make a mistake with the calling script of the directive:
<script src="js/directives/myPattern.js"></script>
I have nested abstract view in my angular js project.
I got Error : Cannot transition to abstract state 'main.middle' when i move to nested abstract view.
My html code is as below:
<!DOCTYPE html>
<html ng-app="nesting">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
href:
<br />
#/alpha
#/beta
#/gama
<button ng-click="moveToMiddle()">move to middle</button>
<br />
ui-sref:
<br />
<a ui-sref="main.middle.alpha">main.middle.alpha</a>
<a ui-sref="main.middle.beta">main.middle.beta</a>
<a ui-sref="main.middle.gama">main.middle.gama</a>
<hr />
<div ui-view=""></div>
<script>
'use strict';
var $urlRouterProviderRef = null;
var $stateProviderRef = null;
var app = angular.module('nesting', [
'ui.router'
]);
app.config(function( $urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/alpha');
$stateProvider
.state('main', {
url: "",
abstract: true,
template: '<div><h3>Main</h3><div ui-view=""></div></div>',
})
.state('main.middle', {
url: "",
abstract: true,
template: '<div><h4>Middle</h4><div ui-view=""></div></div>',
})
.state('main.middle.alpha', {
url: "/alpha",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.beta', {
url: "/beta",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.gama', {
url: "/gama",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
;
});
app.controller('testController', function ($scope, $state) {
$scope.moveToMiddle = function () {
$state.go('main.middle');
}
})
</script>
</body>
</html>
When I click on move to middle button I got error.
How to move to abstract view?
I have referred this but its not useful in my case.
You never go to an abstract state. From the docs:
An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.
If you define main.middle.alpha, main.middle.beta, and main.middle.gama as not abstract, you can transition to those.
As mentioned in angualr docs
An abstract state can have child states but can not get activated
itself. An 'abstract' state is simply a state that can't be
transitioned to. It is activated implicitly when one of its
descendants are activated.
app.controller('testController', function ($scope, $state) {
$scope.moveToMiddle = function () {
$state.go('main.middle.alpha');
}
as abstract state cannot be instantiated and can't viewed. if you want to access then remove abstract line
I'm just starting out with Angular and most of programming in general. I'm trying to make a separate view1.html file appear on my index.html page but it won't, so I'm assuming it's a routing problem. I tried pasting the view1.html content in the body of my index.html to test it and it wasn't showing the controller content either. I'm sure they're simple mistakes but I can't find them. view.html is in a separate folder called views. I only have the javascript in the index.html page for convenience.
index.html
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', []);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'views/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'views/view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
}
</script>
</body>
</html>
view1.html
<h2>View 1</h2>
Name:
<input type="text" ng-model="name" />
<ul>
<li ng-repeat="cust in customers"></li>
</ul>
Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br>Customer City:
<input type="text" ng-model="newCustomer.city" />
<br>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>
You need to include the script for angular's router.
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
Also, looks like you're missing a closing </head> tag.
Here's a working version of your HTML file:
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', ['ngRoute']);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.newCustomer = { name: "", city: ""};
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
</html>
Actually I want to make some html blocks and load them via ngInclude and when I call a page via a controller, ngView shows the page that contain my html blocks
for example like this scaffold
root
index.html -----> contain ngView for loading pages
app.js
-------root/views
Dashboard.html ----> Contain dashboard's html blocks
--------------root/views/Dashboard
dashboard-profile.html ---->html block for dashboards
...
...
I tried the code below but it doesn't work
app.js
var demoApp = angular.module('sampleApp', ['ngRoute']);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/dashboard',
{
controller: 'SimpleController1',
templateUrl: 'views/dashboard.html'
})
.when('/page',{
controller: 'SimpleController2',
templateUrl: 'Sources/views/page2.html'
})
.otherwise({ redirectTo: '/dashboard' });
});
demoApp.controller('myCtrl', function($scope) {
$scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});
index.html
<body ng-app="sampleApp" >
<div ng-view ></div>
<!-- compiled and minified Bootstrap JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script type="text/javascript" src="Sources/app2.js"></script>
</body>
dashboard.html
<div ng-include='dashboardprofile' ng-controller="myCtrl"></div>
dashboard-profile.html
Some divs and text
Thanks for your help
Try this..
var demoApp = angular.module('sampleApp', ['ngRoute']);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/dashboard',
{
controller: 'myCtrl',
templateUrl: 'views/dashboard.html'
})
.when('/page',{
controller: 'SimpleController2',
templateUrl: 'Sources/views/page2.html'
})
.otherwise({ redirectTo: '/dashboard' });
});
demoApp.controller('myCtrl', function($scope) {
$scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});