I'm trying to build an application and am using bootstrap ui to use the accordion and the datepicker for example.
However, when I try to add routing via the ng-route module, the ui part stops working.
Without the routing part the definition of my ng-app looks as follows:
var myApp= angular.module('myApp', ['ui.bootstrap']);
In the angular tutorial they say to use the routing thing i have to put the ng-app definition like this:
var myApp= angular.module('myApp', [
'ngRoute',
'Controllers'
]);
So combined it should look like this:
var myApp = angular.module('myApp', [
'ngRoute',
'Controllers',
'ui.bootstrap'
]);
Or am I wrong? Because like this, it doesn't work.
The index.html file looks like this:
!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers2.js"></script>
<script src="ui-bootstrap-tpls-0.9.0.js"></script>
<link rel="stylesheet" href="css/bootstrap-3.1.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">>
</head>
<body>
<div ng-view></div>
</body>
</html>
controllers2.js doesn't define any controllers yet:
var Controllers= angular.module('Controllers', []);
Controllers.controller('firstCtrl', ['$scope', '$http','$routeParams',
function ($scope, $http) {
}]);
Controllers.controller('secondCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
}]);
app.js handles the routing part:
var myApp = angular.module('myApp', [
'ngRoute',
'Controllers',
'ui.bootstrap'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/first', {
templateUrl: 'first.html',
controller: 'firstCtrl'
}).
when('/second', {
templateUrl: 'second.html',
controller: 'secondCtrl'
}).
otherwise({
redirectTo: '/first'
});
}]);
first.html and second.html don't do much either:
first.html:
<h1>first</h1>
second
<accordion close-others="oneAtATime">
<accordion-group heading="Heading 1" is-open="true">
TSome Content
</accordion-group>
<accordion-group heading="Heading 2">
Some Content
</accordion-group>
</accordion>
second.html:
<h1>second</h1>
first
The first.html should look like this, with working bootstrap:
Any time you call angular.module('myApp', []) with that second parameter, you're creating a module.
angular.module('myApp', []) //<-- will create a new module called myApp
angular.module('myApp') //<-- will look for an existing instance of a myApp module.
If you're creating an instance more than once, with the same name, the first instance will be overwritten by the second one.
Do you have a 'controllers' module defined before you try to load your app ?
If not remove it from the dependencies:
var myApp = angular.module('myApp', [
'ngRoute',
'ui.bootstrap'
]);
Is Controllers misspelled? One appears to be in lower case, 'controllers' and the other in Sentence case 'Controllers'.
Regardless, Try bring up the debugger on your browser (F12 on a window system) and see if any error messages are being written to the console window when you refresh the page(F5 or the browser refresh button). I find that when my pages are acting funny the console usually provides me a hint.
In my case deleting ngAnimate fixed problems with ui.bootstrap.
Related
This is my very first AngularJs app and created it after going through many examples on the web but I am doing something wrong here. It is highly likely because files are stored in dedicated folders. The HomeView.html template gets loaded fine but the controller doesn't. I mean I cannot get greetingMessage printed in the template. All I see is {{ greetingMessage }} instead of "Welcome!". What am I missing?
Error
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=HomeController
App Structure
app
conponents
home
HomeView.html
HomeController.js
...
...
index.js
index.html
index.html
<body ng-app="myApp">
<h3>AngularJS</h3>
<hr />
<p>Home</p>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>
<script src="index.js"></script>
</body>
index.js
var module = angular.module('myApp', ['ngRoute']);
module.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'components/home/HomeView.html',
controller: 'HomeController'
// I tried -> controller: 'components/home/HomeController'
})
.otherwise({
redirectTo: '/'
});
});
HomeView.html
<div ng-controller="HomeController">
<h4>Home</h4>
<p>{{ greetingMessage }}</p>
</div>
HomeController.js
var module = angular.module('myApp', []);
module.controller('HomeController', [
'$scope',
function(
$scope
) {
$scope.greetingMessage = 'Welcome!';
}]);
The main reason is you haven't referred homeController.js on index.html, it should place right after index.js. This will not solve your issue. The other thing I'd like to mention is, you shouldn't be creating myApp module again while registering your controller with your myApp module. By declaring new module will flush out former registered component. So just use module getter like angular.module('myApp') and append further components to it.
<script src="components/home/HomeController.js">
Code
angular.module('myApp')
.controller('HomeController', [ '$scope',
function($scope) {
$scope.greetingMessage = 'Welcome!';
}
]);
You must be attach app file and next attache your controller file in your hoem page or master page.
This example helped you
Angular js routing
I can't figure out why i've this "controller is not registered" error in angular 1.6.4.
Controller:
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
Index:
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/formCtrl.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<div ng-view>
</div>
</body>
</html>
App:
app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/:id", {
templateUrl: './partials/main.html',
controller: 'formCtrl'
});
})
This is because you're actually creating a new module for the controller, instead of reusing the existing app module.
To fix this you simply change your controller code to this:
angular.module('app').controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
You only need to specify the second argument of angular.module() when you intent to create a new module. If you want to register controllers, components, services, etc. for your application, you only apply the first argument: angular.module('app').
Note, make sure your controller js file is loaded after the app js file.
try this :
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl",["$scope", "$rootScope", "$stateParams", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
}]);
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
I started a project form the Angular Seed Project. I've done a few Angular projects before, but this is the first one I have setup from scratch. I don't remember having to add new modules to the "app level module" before. Seems like there is a way to automate this, but my Google-Fu is failing me.
Basically, I'm looking for a way to remove 'myApp.home' and such from app.js so that I don't have to always add new pages to the app.js. I know some modules will need to go there, but adding every page there seems like a pain. I already figured out how to automate adding the script references to index.html
//////////////////// APP.JS ////////////////////
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.home'
])
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({ redirectTo: '/home' });
}]);
//////////////////// HOME.JS ////////////////////
'use strict';
angular.module('myApp.home', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: '../app/home/home.html',
controller: 'HomeCtrl'
});
}])
.controller('HomeCtrl', [function () {
}]);
<!---------- INDEX.HTML ---------->
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>My App</h1>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
</body>
</html>
<!---------- HOME.HTML ---------->
<div>TEST</div>
if you will not create a new module for each new page, but use myApp module, then you do not need to add it as dependency to the myApp module. Each page will have its own JS file:
//////////////////// HOME.JS ////////////////////
'use strict';
angular.module('myApp')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: '../app/home/home.html',
controller: 'HomeCtrl'
}
);
}])
.controller('HomeCtrl', [function () {
}
]);
I have 2 js files in different directories for each module. if i start my app, i get the error, that the controller SubAppCtrl cannot be found ... can anyone tell me, why do i get this error message?
Code in mainAPP:
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/test', {templateUrl: 'components/test/test-list.html', controller: SubAppCtrl});}]);
Code in subAPP:
var myapp = angular.module('subAPP', []);
myapp.controller('SubAppCtrl', ['$scope', '$rootScope', '$translate', function ($scope, $rootScope, $translate){ .... ]);
html
<!doctype html>
<html ng-app="mainAPP" lang="en">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="components/test/subAPP.js"></script>
<script src="js/mainAPP.js"></script>
...
</head>
<body>
<div ng-view></div>
</body>
</html>
mainApp should read
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config([
/******/ '$routeProvider',
function ($routeProvider) {
$routeProvider.when('/test', {
templateUrl: 'components/test/test-list.html',
controller: 'SubAppCtrl'
});
}
]);
note quotes around the controller name.