I'm trying to load a new view upon a button click in my angularjs project. I have been getting this error.How to solve this? As i'm new to angularjs I want to I have given the state correctly in my app.js
app.js
'use strict';
var app = angular.module('app', ['ui.compat', 'ui.router', 'testCtrl']);
app.config(['$stateProvider', '$urlRouterProvider', '$routeProvider', '$locationProvider', '$httpProvider', function ($stateProvider, $urlRouteProvider, $routeProvider, $locationProvider, $httpProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('app.registerPage', {
url: "/tp/AddQ",
views: {
'menuContent': {
templateUrl: "views/Registration_view.php",
controller: 'testCtrl'
}
}
});
$urlRouteProvider.otherwise('/AEAS/admin/');
}]);
first view
<body>
<div class="container" ng-controller="testCtrl" ng-app="app">
<div class="row">
<form role="form" ng-submit="submit(data)">
<h1>Welcome to Heart attack predictor!</h1>
<div id="body">
<button><a href="" ng-click="click();">Edit</a></button>
</div>
</form>
</div>
</div>
</body>
<script src="<?php echo base_url(); ?>angularjs/angular.min.js"></script>
<script src="<?php echo base_url(); ?>angularjs/angular-ui-router.js"></script>
<script src="<?php echo base_url(); ?>angularjs/angular-route.js"></script>
<script src="<?php echo base_url(); ?>assets/js/app.js"></script>
<script src="<?php echo base_url(); ?>assets/js/Controllers/testCtrl.js"></script>
second view
<body>
<div class="container" ng-controller="testCtrl" ng-app="app">
<div class="row">
<form role="form" ng-submit="submit(data)">
<h1>Welcome to Registration Page</h1>
<div id="body">
<button><a href="" ng-click="submit();">Edit</a></button>
</div>
</form>
</div>
</div>
</body>
<script src="<?php echo base_url(); ?>angularjs/angular.min.js"></script>
<script src="<?php echo base_url(); ?>angularjs/angular-ui-router.js"></script>
<script src="<?php echo base_url(); ?>assets/js/app.js"></script>
<script src="<?php echo base_url(); ?>assets/js/Controllers/regCtrl.js"></script>
controller
angular.module('app', ['ui.router']).controller('testCtrl', ['$scope', '$state', function testCtrl($scope, $state) {
$scope.click = function () {
$state.go('app.registerPage');
};
}]);
ERROR
angular.min.js:116 Error: Could not resolve 'app.registerPage' from state ''
at Object.transitionTo (angular-ui-router.js:3179)
at Object.go (angular-ui-router.js:3107)
at m.$scope.click (testCtrl.js:8)
at fn (eval at <anonymous> (angular.min.js:226), <anonymous>:4:206)
at b (angular.min.js:124)
at e (angular.min.js:268)
at m.$eval (angular.min.js:142)
at m.$apply (angular.min.js:143)
at HTMLAnchorElement.<anonymous> (angular.min.js:268)
at Pf (angular.min.js:36)
You create a stateless view, so, angular can't "jump" from your view to app.registerPage
state. I think you need to create a base(home, index) state and point it to your first view.
.state('home',
{
url: "/",
templateUrl:'views/your_first_view.html',
controller: "testCtrl"
});
Also, you need to delete ng-controller="testCtrl"
from your first view div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.