I'm trying to build a very simple app using angular UI-Router.
My index.html file:
<!DOCTYPE html>
<html ng-app="elara">
<head>
<script type="text/javascript" src="/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/ctrl/indexCtrl.js"></script>
<script type="text/javascript" src="/js/ctrl/registerCtrl.js"></script>
</head>
<body>
<ng-view> </ng-view>
</body>
</html>
app.js file
angular.module('elara', ['ui.router'])
.run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/tmpl/index.html',
controller: 'indexCtrl'
})
.state('register', {
url: '/register',
templateUrl: '/tmpl/register/register.tmpl.html',
controller: 'registerCtrl'
})
}
]);
The indexCtrl.js file
app = angular.module('elara', []);
app.controller('indexCtrl', ['$scope', function($scope){
$scope.message = "index"
}])
and registerCtrl.js is same. Just controller name and message is different.
in my x.tmpl.html files i just want to write message variable.
{{message}}
Problem is, when I navigate to url / or #/register I am always getting empty page. message variable is not in the page or my template htmls are not loaded.
Also there are not errors in the console.
The target for states is ui-view
// <ng-view> </ng-view>
<div ui-view=""></div>
In case, we use named views : {'myName': { ... } } we provide the name like this
<div ui-view="myName"></div>
Related
I tried every solution on stackoverflow to make this error go but all to vain..
I am trying to use ngRoute to make SPA.
angular.js:14328 Error: [$controller:ctrlreg] The controller with the name 'loginCtrl' is not registered.
Here is my code
/* route file called controoler.js */
var app = angular.module('mainApp', ['ngRoute']).
config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login/views/loginView.html',
controller: 'loginCtrl'
})
.when('/reward', {
templateUrl: 'rewardManagement/views/reward.html'
})
.otherwise({
redirectTo: '/'
});
}
]);
// loginCtrl in login/controllers/loginCtrl.js
var app = angular.module('mainApp', []);
app.controller('loginCtrl', ['$scope', '$location', function($scope, $http, $location) {
$scope.changeView = function(view) {
$location.path(view); // path not hash
};
}]);
<!-- -------index.html--------- -->
<!DOCTYPE html>
<html lang="en" class="body-full-height" ng-app="mainApp">
<head>
<script src="/controller.js"></script>
<script src="../login/controllers/loginCtrl.js"></script>
</head>
<body>
<div ng-controller="loginCtrl"></div>
<ng-view></ng-view>
</body>
</html>
<!-- -------loginView.html--------- -->
<script src="../login/controllers/loginCtrl.js"></script>
<div ng-controller="loginCtrl">
<button ng-click="changeView('/reward')">Please Bypass this for now</button>
</div>
Please suggest a solution, in my project I will have many links which when clicked should change the ng-view according to the route. And I don't think putting all the .js scripts in index.html is a good idea, shouldn't each partial contain its own .js which also contains the controller?
Here is the working Plunkr
Just did some little changes in your controller code:
app.controller('loginCtrl', ['$scope', '$location', function($scope, $location) {
$scope.changeView = function(view) {
$location.path(view); // path not hash
};
}]);
Also you don't need to add the script again in your loginView.html
The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network.
The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.
When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder
**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?
Header Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
HTML
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</div>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateURL: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
Use templateUrl instead of templateURL.
In your html use #/main.
Don't use tow ng-views
JS code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
$scope.name = "world"
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
HTML code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<p>Hello {{name}}!</p>
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</body>
</html>
Here is working plunker
EDIT
Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')
So you need to add this in your config phase.
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
now it will work with angular 1.6.1 as well
.when('/main', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
or
use this url to access main page :
http://127.0.0.1/
It should work, as you have not set routing for main in config.
I am a newbee to angular. in my web app i have a side bar loaded in a ui-view from template in the index page and there is another ui-view where i want to load template clicking links from the side bar. here are my codes and templates...please help me...
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-app="testapp" ng-controller="mainCtrl">
<div class="container">
<div class="row">
<div class="col-md-4" ui-view="sidebar">
</div>
<div class="col-md-8" ui-view="content">
</div>
</div>
</div>
<!-- Javascript links and scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script type="text/javascript">
var app = angular.module('testapp', ['ui.router']);
/*route configuration*/
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
});
$stateProvider.state('home.page02',{
views:{
'content#home':{templateUrl:'page02.html'},
}
});
}]);
/*main controller at index page*/
app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
$state.go('home');
}]);
</script>
</body>
</html>
<ul>
<li>home</li>
<li>page01</li>
<li>page02</li>
</ul>
<h2>Page 01 is here!</h2>
In ui-routing we can use ui-sref which takes the complete state name as its value
for example:
<li>page02</li>
and the controller should be like:
var app = angular.module('testapp', ['ui.router']);
/*route configuration*/
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
})
.state('home.page02',{
views:{
'content#home':{templateUrl:'page02.html'},
}
});
}]);
/*main controller at index page*/
app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) {
$state.go('home');
}]);
<li>page02</li>
ui-sref must contain a state name. if you want to go to home.page02 it should be
<li>page02</li>
and no need to give every time $stateProvider.state()
Just do it like
$stateProvider
.state('home', {url: '', template: ''})
.state('home.page02', {url: '', template: ''})
And named-views usage https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views go through the link provided. It is awesome
i changed the script...
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state('home',{
views:{
'sidebar':{templateUrl:'sidebar.html'},
'content':{templateUrl:'default.main.html'},
}
})
.state('home.page02',{
views:{
'content#':{templateUrl:'page02.html'},
}
});
}]);
I have an Angular controller defined something like
mainCtrl.js
angular.module("mainCtrl", [])
.controller("mainController", function ($rootScope, $location, Auth) {
var vm = this;
vm.testStr = "If you see this, mainController is active on your page";
.
.
.
Here Auth is an angular service defined to handle authentication and it doesn't put the testStr variable behind authentication.
A view defined tries to bind the variable testStr as bellow
index.html
<html>
<head>
<base href="/">
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<main class="container">
<!-- ANGULAR VIEWS -->
<div><h3>{{main.testStr}}</h3></div>
<div ng-view></div>
</main>
</body>
</html>
But when the index is loaded the value of testString doesn't appear on the page. Instead {{main.testStr}} appears.
I am assuming it is not a must to use $scope and couldn't find what I am doing wrong.
Thanks in advance, for your help.
Edit
There are other files involved that I didn't mention here. Now I can see their relevance.
The app module,
app.js
angular.module("userApp", ["ngAnimate", "app.routes",
"authService", "mainCtrl",
"employeeCtrl", "employeeService"])
// application configuration to integrate token into requests
.config(function ($httpProvider) {
// attach our auth interceptor to the http requests
$httpProvider.interceptors.push("AuthInterceptor");
});
module for routing
app.route.js
angular.module("app.routes", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when("/", {
templateUrl: "app/views/pages/home.html"
})
// login page
.when("/login", {
templateUrl: "app/views/pages/login.html",
controller: "mainController",
controllerAs: "login"
})
// show all employees
.when("/employees", {
templateUrl: "app/views/pages/employees/all.html",
controller: "employeeController",
controllerAs: "employee"
})
// form to create a new user
// same view as edit page
.when("/employees/create", {
templateUrl: "app/views/pages/employees/single.html",
controller: "employeeCreateController",
controllerAs: "employee"
})
// page to edit a user
.when("/employees/:employee_id", {
templateUrl: "app/views/pages/employees/single.html",
controller: "employeeEditController",
controllerAs: "employee"
});
$locationProvider.html5Mode(true);
});
You have declared the Module name as mainCtrl
angular.module("mainCtrl", [])
but using ng-app as userApp
Change your module like this,
angular.module("userApp", [])
Your module name is wrong. It should be userApp instead of mainCtrl. See a working example below:
var myApp = angular.module("userApp", []);
myApp.controller("mainController", function($scope) {
var vm = this;
vm.testStr = "Hello";
});
<html>
<head>
<base href="/">
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<main class="container">
<!-- ANGULAR VIEWS -->
<div>
<h3>{{main.testStr}}</h3>
</div>
<div ng-view></div>
</main>
</body>
</html>
I have 4 files:
index.html
logic.js
controller.js
homepage.html
index.html
<html ng-app="sample">
<head>
<script src="angular.js"></script>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="controller.js"></script>
<script src="logic.js"></script>
</body>
</html>
logic.js
var myapp = angular.module('sample',[]);
myapp.config(function($routeProvider)
{
$routeProvider
.when('/',
{
controller:homepageCtrl,
templateUrl:'homepage.html'
});
});
controller.js
function homepageCtrl($scope){
$scope.name = "ROHIT";}
homepage.html
{{name}}
homepage.html is loading and being displayed correctly by the route but the controller is not being called here when homepage.html is loaded into index.html.
Kindly help me out with this.
Thanks
You didn't defined controller in HTML.
Add this line
<div ng-controller = "homepageCtrl">
Suppose it should be in homepage.html:
<div ng-controller = "homepageCtrl">
{{name}}
</div>
In addition, wrap your controller name with ' logic.js
[EDIT]
Add $inject to routeProvider:
myapp.config(["$routeProvider",
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: 'homepage.html',
controller: 'homepageCtrl'
});
}
]);
Controller name must be pass to $routeProvider as a string :
$routeProvider
.when('/',
{
controller:'homepageCtrl',
templateUrl:'homepage.html'
});