I have two angular js controllers. When the click the ng-href link in recorddetails.html,
I am able to see the result binded as "The activity name is Exercise" but the same if I do with ng-click by clicking button with find() in send.html. I am able to see the recorddetails.html but the page is displaying without the data being binded as "The activity name is {{activity}}".I have provided the code belowe for reference.Kindly, provide some valuable solutions.
index.html
<div ng-controller="controllerOne">
<a ng-href="#/recorddetails/100">Running</a>
</div>
recorddetails.html
<div ng-controller="controllerTwo">
<p> The activity name is {{activity}}</a>// The scope name is Exercise
</div>
send.html
<div ng-controller="controllerThree">
<button ng-click="find()">
</div>
JS file
angular.module('exampleapp', ['ngRoute').config(
[ '$provide', '$httpProvider', '$routeProvider', function($provide, $httpProvider, $routeProvider) {
$routeProvider.
when('/recorddetails/:id', {
templateUrl: '/records/recorddetails.html',
controller: 'controllerTwo'
.otherwise({
redirectTo: '/defaultpage'
});
app.controller('controllerOne',
[ '$scope','$location',function($scope,$location) {`enter code here`
}
app.controller('controllerTwo',
[ '$scope','$location',function($scope,$location) {
$scope.activity = "Exercise";
}
app.controller('controllerThree',
[ '$scope','$location',function($scope,$location) {
$scope.find = function(){
$location.path("/recorddetails/100");
}
}
var app=angular.module('binding',['ngRoute'])
app.config(['$routeProvider',function ($routeProvider)
{
$routeProvider
.when('/',
{
templateUrl:'one.html',
controller:'controllerOne'
})
.when('/recorddetails/:id', {
templateUrl: 'recorddetails.html',
controller: 'controllerTwo'
})
.when('/send', {
templateUrl: 'send.html',
controller: 'controllerThree'
})
}])
app.controller('controllerOne',function($scope,$location){
})
app.controller('controllerTwo', function($scope,$location) {
$scope.activity = "Exercise";
})
app.controller('controllerThree',function($scope,$location) {
$scope.find = function(){
console.log('in 3');
$location.path("/recorddetails/100");
}
})
<html ng-app="binding">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="routefile.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
Related
template directive is working in the follwing code but template Url is not working?
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view>
</div>
<!--template is working but template url is not working-->
<script">
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : 'hello'
})
.when("/red", {
template : 'hi'
})
.when("/green", {
templateUrl : 'hello.html'
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
You need a webserver like (apache) for using templateUrl.
http://plnkr.co/edit/L4Hxf7KiiVuouPWRv4pl
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: 'hello'
})
.when("/red", {
template: 'hi'
})
.when("/green", {
templateUrl: 'hello.html'
})
.when("/blue", {
templateUrl: 'blue.html'
});
});
First of all You have syntax error in <script"> -> <script>;
Second: check Your tempalates extension html & htm;
For this file structure Your code work Ok:
I am trying to display a modal with the information of a certain item. But when I call the function it reads:
TypeError: Cannot read property 'open' of undefined at Scope.$scope.openModal
I was hoping someone could tell me why, here is the relevant code:
Template
<div ng-controller="View1Ctrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Item Details</h3>
</div>
<div class="modal-body">
<ul ng-repeat="i in items">
<li>Type: <span ng-bind="i.type"></span></li>
<li>Description: <span ng-bind="i.description"></span></li>
<li>Date: <span ng-bind="i.createDate"></span></li>
<li>Priority: <span ng-bind="i.priority"></span></li>
<li>Finished: <span ng-bind="i.isDone"></span></li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>
</script>
</div>
App.Js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
//'ngRoute',
'ui.router',
'ui.bootstrap',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApp.items'
])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/view1');
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
})
.state('view2', {
url: '/view2',
templateUrl: 'view2/view2.html',
controller: 'View2Ctrl'
});
});
Controller
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope','itemsService',function($scope,itemsService, $uiModal) {
$scope.$on('itemSwitch.moreInfo', function(event, obj){
$scope.openModal(obj);
});
$scope.openModal = function (obj) {
var modalInstance = $uiModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/modalTemplate.html',
controller: 'View1Ctrl',
resolve: {
items: function () {
return obj;
}
}
});
}
}]); //END
Can anyone point me in the right direction to fix this issue?
Thanks
The error is gone, but now it doesn't show anything but the grey-out screen, the console shows the modal html is loading but not displaying properly.
Your injection signature is not correct. You are missing $uiModal. Observe the following...
.controller('View1Ctrl', ['$scope', 'itemsService',
function($scope, itemsService, $uiModal) {
=>
.controller('View1Ctrl', ['$scope', 'itemsService', '$uiModal',
function($scope, itemsService, $uiModal) {
I am not totally sure the exact name of the service you are intending to inject. I guess here based on your variable that is named $uiModal, however, I notice the docs state it is $uibModal. You'll need to verify this.
In response to your updated newly found issue, my best observation is that templateUrl: '' and <script id=""> must match. Try changing your <script> tag to the following...
<script type="text/ng-template" id="templates/modalTemplate.html">
<!-- <div> -->
I stumbled upon this while playing around with the default plunker found in the docs. If both values are not the same there is an error.
I am new to angular JS.How can I redirect to another page when the button is clicked.
My code here
var app = angular.module("plunker", [])
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/home',
{
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/about',
{
templateUrl: 'about.html',
controller: 'AboutCtrl'
});
$routeProvider.when('/contact',
{
templateUrl: 'contact.html',
controller: 'ContactCtrl'
});
$routeProvider.otherwise(
{
redirectTo: '/home',
controller: 'HomeCtrl',
}
);
});
app.controller('NavCtrl',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
}]);
app.controller('AboutCtrl', function($scope, $compile) {
console.log('inside about controller');
});
app.controller('HomeCtrl', function($scope, $compile) {
console.log('inside home controller');
//redirect when button click
function Cntrl ($scope,$location) {
$scope.redirect = function(){
window.location.href = '/about';
}
}
});
app.controller('ContactCtrl', function($scope, $compile) {
console.log('inside contact controller');
});
my html markup is
<div ng-controller="Cntrl">
<button class="btn btn-success" ng-click="changeView('about')">Click Me</button>
</div>
You entered :
How to get this.help me to solve this .
Just use a standard HTML link :
<div ng-controller="Cntrl">
<a class="btn btn-success" ng-href="#/about">Click Me</a>
</div>
No need to create a scope function for that. You can also handle that dynamically thanks to ng-href :
<div ng-controller="Cntrl">
<a class="btn btn-success" ng-href="#/{{view}}">Click Me</a>
</div>
Last thing, you should consider using ui-router which handle even better this cases
Why do you need to send the view as a param:
Try this:
$scope.changeView = function() {
$location.path(#/about);
}
If solution that Cétia presented does not work, then it is possible that you do not have your routes defined. Make sure that you have your route defined withing app.js like this :
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/Login', {
templateUrl: 'Navigate/LoginView',
controller: 'someLoginController'
})
]);
You can as well use angulars state provider (do some research) and from state provider you can access your routes within html as :
<a href="state.routName" />
I have added the scripts like this
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/test.js"></script>
and I did this in my test.js
var app = angular.module('MyApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
});
$routeProvider.otherwise({ redirectTo: '/login' });
});
app.controller('loginController', function () {
})
I got that the $routeProvider is unknown.
I have read many questions about this and I tried the solutions but nothing works.
help please
notethe angular library is working
I can make binding for example
Try
<div ng-app="MyApp" ng-controller="loginController">{{test}}</div>
then
var app = angular.module('MyApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
});
$routeProvider.otherwise({
redirectTo: '/login'
});
});
app.controller('loginController', function ($scope) {
$scope.test = "test me"
})
Since Angular 1.2 - ngRoute module is separated as component, you have to include angular-route.js, then you will have your providers.
https://github.com/angular/angular.js/commit/5599b55b04788c2e327d7551a4a699d75516dd21
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-12
Somehow my app stopped working during development and I really cannot get what's wrong with it.
I've removed everything, the only code remaining is:
function handlerControl($scope, $routeParams, $location){
$scope.route = $routeParams;
}
var app = angular.module('Hello', []).config(
function($routeProvider){
$routeProvider.when('/:a/:b', {controller: handlerControl});
}
);
and html is
<body ng-app="Hello">
<div ng-controller="handlerControl">
{{route}}
</div>
</body>
omitting head part with including everything.
When I go to
http://helloday/#/a/b/
I'm getting an empty hash while expecting to get {a: 'a', b: 'b'}
What I'm doing wrong?
Bit modified(to make it work) jsFiddle: http://jsfiddle.net/wWDj2/http://jsfiddle.net/wWDj2/
Routing requires you use ngView, and that you specify either a template or a templateUrl:
App code.
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/foo/:id', {
controller: 'FooCtrl',
template: '<h1>Foo {{id}}</h1>'
})
.when('/bar/:test', {
controller: 'BarCtrl',
templateUrl: 'bartemplate.html'
})
.otherwise({
controller: 'DefaultCtrl',
template: '<h1>This is the default</h1>'
});
});
app.controller('FooCtrl', function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
app.controller('BarCtrl', function($scope, $routeParams) {
$scope.test = $routeParams.test;
});
app.controller('DefaultCtrl', function($scope){});
Your main page's markup:
<div ng-app="myApp">
Foo 123
Bar Blah
Default route
<hr/>
<div ng-view>
<!-- your processed view will show up here -->
</div>
</div>