I'm new to using UI-Router, and I'm struggling to get this controller working. The view loads, but the function doesn't trigger on ng-click. JSFiddle
var app = angular.module('app', ['ui.router']);
app.controller('dashboardCtrl', [
'$scope',
function($scope){
$scope.testFunction = function(){
console.log('test');
}
}
]);
app.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("dashboard", {
url: "#",
templateUrl: "dashboard.html",
controller: "dashboardCtrl"
});
});
View
<body ng-app="app">
<nav>
<a ui-sref="dashboard">Dashboard</a>
</nav>
<ui-view></ui-view>
</body>
<script type = "text/ng-template" id = "dashboard.html">
<button ng-click="testfunction()">Click</button>
</script>
The testfunction in your template not working because there no function in controller called testfunction. In controller you specified it as testFunction. Note the capital letter 'F' in it. It will work if you change it. but, please not that url: "#" is not valid URL
Related
I have found similar question but not getting solution so i have post a question.
I have been implementing and displaying data from database in angular js, below is mu code.
index.php file:
<header>
<script type='text/javascript' src='local-path/js/angular.min.js?ver=4.9.5'></script>
<script type='text/javascript' src='local-path/js/angular-route.min.js?ver=4.9.5'></script>
<script type='text/javascript' src='local-path/js/scripts.js?ver=4.9.5'></script>
</header>
<div ng-controller="mycontrollermenu">
First Name: {{firstname}}
</div>
<div ng-view></div>
<footer></footer>
script.js:
var app = angular.module('wp',['ngRoute',' ']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl : localized.partials + 'main.php',
controller : 'Main'
})
.when('/:slug', {
templateUrl: localized.partials + 'content.html',
controller: 'Content'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
app.controller('Main',function($scope, $http, $routeParams){
$http.get('wp-json/wp/v2/posts/').success(function(res){
$scope.posts = res;
});
});
app.controller('Content',
['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/posts/?slug=' + $routeParams.slug).success(function(res){
$scope.post = res[0];
});
}
]
);
app.filter('removeHTMLTags', function() {
return function(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
};
});
app.controller('mycontrollermenu',function($scope){
$scope.firstname = "Menu 1";
});
I have added controller mycontrollermenu in to index and js file which is not working, and thow an error like
"Argument 'mycontrollermenu' is not a function, got undefined"
can any one guide me what i have doen wrong in "mycontrollermenu" controller?
Try creating a new .js file like MenuController.js and add the same
app.controller('mycontrollermenu',function($scope){
$scope.firstname = "Menu 1";
});
and in your index.html add <script type='text/javascript' src='MenuController.js'></script>
A couple of questions,
ng-app needs to be there on the root element. Wrap your HTML like <div ng-app="wp">...<div>
localized is a global variable? It is neither injected nor declared.
There is an empty string in the module definition. Forgot to include a dependency?
var app = angular.module('wp',['ngRoute',' ']);
Here I have a fiddle working with your code.
I have MVC application, I want make routing for the following URL
http://localhost:2668/Home/User/1
I try
.config(function ($routeProvider, $locationProvider) {
//here we will write code for implement routing
$routeProvider
.when('#/Home/User/:userid', {
templateUrl: '/AngularTemplates/User.html',
controller: 'UserController'
})
.otherwise({ // This is when any route not matched
controller: 'ErrorController'
}) })
And then the UserController as below:
.controller('UserController', ['$scope','$routeParams', function ($scope,$routeParams) {
// $routeParams used for get query string value
//var loc = window.location.href;
//var id = loc.slice(loc.lastIndexOf('/'), loc.length).split('/')[1];
$scope.Message = "This is ORDER Page with query string id value =" + $routeParams.userid;
}])
But I always get "undefined" for the para $routeParams.userid
What is wrong in my code? Please help thanks!
Here is a working example:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
user 11
user 12
<div ng-view></div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config([
'$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$routeProvider
.when('/Home/User/:userid', {
template: '<pre>{{ message }}</pre>',
controller: 'UserController'
});
}]);
app.controller('UserController', ['$scope','$routeParams', function ($scope, $routeParams) {
$scope.message = "userid = " + $routeParams.userid;
}]);
</script>
</body>
</html>
JSBin http://output.jsbin.com/geluli
You may read more about default router here (nice examples + tests) https://docs.angularjs.org/api/ngRoute/service/$route
I'm trying to setup a page that has no parent template but contains multiple named views using angular ui-router.
A plunkr is here
There is a simple html setup:
<body>
<div ng-app="thing">
<h1>Multiple Views</h1>
<div ui-view="oneThing"></div>
<div ui-view="twoThing"></div>
<div ui-view="threeThing"></div>
<script id="one_thing.html" type="text/ng-template">
<p>one: {{text}}</p>
</script>
<script id="two_thing.html" type="text/ng-template">
<p>two: {{text}}</p>
</script>
<script id="three_thing.html" type="text/ng-template">
<p>three: {{text}}</p>
</script>
</div>
</body>
I expect this to mean I have three views and three templates that the 'thing' app can see
Then the JS setup is:
'use strict';
var thing = angular.module("thing", ['ui.router']);
thing.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('things', {
url: '/things',
views: {
'oneThing': {
templateUrl:'one_thing.html',
controller: 'oneCtrl'
},
'twoThing': {
templateUrl:'two_thing.html',
controller: 'twoCtrl'
},
'threeThing': {
templateUrl:'three_thing.html',
controller: 'threeCtrl'
}
}
});
$urlRouterProvider.when('/', 'things');
});
thing.controller('oneCtrl', function($scope) {
$scope.text = 'boom';
});
thing.controller('twoCtrl', function($scope) {
$scope.text = 'bang';
});
thing.controller('threeCtrl', function($scope) {
$scope.text = 'wallop';
});
I thought this meant always load 'things' as the route and within that state load three views each pointing to a different template and controller. But instead I get a blank page...
Have I misunderstood how this works or how to write it (or, worse, both!!)?
The default url is not /
So $urlRouterProvider.when('/', 'things'); is not being triggered.
Change to
$urlRouterProvider.when('', 'things');
and your plunkr works.
I have an view (insight index.html) like that:
<body ng-app="mainApp" ng-controller="MainCtrl">
[...]
<div>{{status}} </div>
</body>
I start the App onDeviceReady:
angular.element(document).ready(function() {
angular.bootstrap(document);
});
I have this module:
var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
$routeProvider
.when('/', {
controller: MainCtrl,
template: '<h1> Main View {{ status }} </h1>'
});
$compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel):/);
});
As far as I know, there are different ways to define a controller. One way is like that:
mainAppModul.controller('MainCtrl',['$scope', function ($scope)
{
$scope.status = "It works!";
}]);
The other one is like this:
function MainCtrl ($scope)
{
$scope.status = "It works!";
}
While the 1st Version results in [ng:areq] Argument 'MainCtrl ' is not a function, got undefined, the 2nd Version works fine.
Is there something I misunderstood in general?
ngRoute works in combination with ngView You won't need to specify the ng-controller in your templates, ngRoute takes care of that for you. When you have this:
var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
$routeProvider
.when('/', {
// controller: MainCtrl, // EDIT: needs to be a string of the controller name
controller: 'MainCtrl',
template: '<h1> Main View {{ status }} </h1>'
});
});
All you need is this:
<html ng-app="myApp">
<body>
<ng-view></ngview>
</body>
</html>
ngRoute will put the template of the specified route into ng-view and use the associated controller.
Note: ngRoute does not come with angular.js, you'll need the angular-route.js included as well.
I am trying to make a very simple app with routes and views, that displays a test text changing into "click" when a button is clicked.
I have an index.html file with an ng-view thats calls properly a test.html view. This view is supposed to use a testCtrl.js with a simple model.
But when it loads, the view seems to be called, but there is a problem with the scope, or the controller. When I click on a button the word test is supposed to become "click" but nothing happens.
here is the index.html
<body ng-app="simtoolbelt">
<div ng-view></div>
<script src="js/modules/angular-route.min.js"></script>
<script src="js/controllers/testCtrl.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
here is the app.js handling the routes and views:
var simtoolbelt = angular.module('simtoolbelt', ['ngRoute']);
simtoolbelt.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/test', {
templateUrl: 'views/test.html',
controller: 'testCtrl'
}).
otherwise({
redirectTo: '/test'
});
}]);
The test controller:
simtoolbelt.controller('testCtrl', ['$scope', function($scope){
$scope.test = "test";
$scope.change = function($scope){
$scope.test = "Click";
};
}]);
And finally the test view:
<div ng-controller="testCtrl">
<h1 ng-model="test">Le {{test}} fonctionne</h1>
<button ng-click="change()">Click</button>
</div>
All of that is in a localhost, and I really have no clue of what it is I am mising... Thanks lot guys for any help you can give me !
Your function "change" takes the argument "$scope". In ng-click you call a method without arguments.
Remove the parameter from your change method:
$scope.change = function(){
$scope.test = "Click";
};
Furthermore, there is no need for the ng-model attribute in your h1 tag.
Try to change controller definition in your routing to "only controller name" like
simtoolbelt.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/test', {
templateUrl: 'views/test.html',
controller: 'testCtrl'
}).
otherwise({
redirectTo: '/test'
});
}]);
I have not test it yet but it should work.