I am making a small application in angular to study, but the directive and the view are not being rendered, I already investigated my code, but I did not find anything, code can be seen below:
Index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">
<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>
<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>
<!-- My Directives -->
<script src="js/directives/header.js"></script>
<title>Music</title>
</head>
<body>
<header-menu></header-menu>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
main.js
angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){
});
header.js
angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
restrict: "AE",
templateUrl: "views/directives/header.html"
};
return ddo;
});
once the module injected to the angular.module no need to inject them again. Just get the reference only.
remove the 'musicasController' from the module injector. Controllers don't need to inject to the modules
angular.module('rdi_music', ['ngRoute', 'ngResource',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music')
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music')
.controller('musicasController', function($scope){
});
Demo
Related
I'm using eclipse with angularJS for make the front-end of my app. Not first time I'm using angular but first time I'm using it with eclipse.
AngularJS plugin have been installed and I made the link between view and controllers. I convert my project to AngularJS project. Angular is working (an input ng-model="a" {{a}} does the job) but the chrome terminal give me an error :
Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=HomeController&p1=not%20aNaNunction%2C%20got%20undefined
index.html
<!DOCTYPE html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Mon Titre</title>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/MainController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/HomeController.js"></script>
<script type="text/javascript" src="resources/js/angular/controller/CategoryController.js"></script>
<script type="text/javascript" src="resources/js/angular/app.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
app.js
var app = angular.module("app", ["ngRoute"]); // Already tried to inject controllers
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/accueil.html',
controller: 'HomeController'
})
.when('/categories', {
templateUrl: 'pages/categorie-list.html',
controller: 'CategoryController'
})
.otherwise({
redirectTo: '/'
});
});
HomeController.js
var app = angular.module("app",[]);
app.controller("HomeController", function($scope){
$scope.bonjour ='I\'m home controller !';
});
CategoryController.js
var app = angular.module("app",[]);
app.controller("CategoryController", function($scope){
$scope.bonjour = 'I\'m category controller';
});
Both .html contains just one {{bonjour}}.
Thanks for your help and sorry for this low english !
In HomeController.js and CategoryController.js replace
var app = angular.module("app",[]); // create new app module
with
var app = angular.module("app"); // use existing app module
After that move app.js script before controller scripts:
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="resources/js/angular/app.js"></script>
<script src="resources/js/angular/controller/MainController.js"></script>
<script src="resources/js/angular/controller/HomeController.js"></script>
<script src="resources/js/angular/controller/CategoryController.js"></script>
hi I'm doing a aplication with angular, well in this app I need show map and makers, but first step I need the map, now I'am having problem in this part ok, I'm very new in angular I make maps with jquery and javascript now I tried to make the same steps and nop work yet. well I thing that this part is the important. controller of map.
mapController.js
(function(){
angular.module('mapCtrl', [])
.controller('MapController', function($scope) {
function initialize() {
var options = {
googleApiKey: '',
locationColumn: 'geometry',
map_center: [-16.494898, -68.133553],
locationScope: 'La Paz'
};
var self = this;
options = options || {};
this.googleApiKey = options.googleApiKey || "";
this.locationColumn = options.locationColumn || "geometry";
this.locationScope = options.locationScope || "";
this.defaultZoom = options.defaultZoom || 13;
this.map_centroid = new google.maps.LatLng(options.map_center[0], options.map_center[1]);
this.myOptions = {
zoom: this.defaultZoom,
center: this.map_centroid,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//$scope.map = new google.maps.Map($("#map")[0], this.myOptions);
$scope.map = new google.maps.Map(document.getElementById('map'), this.myOptions);
//this.map = new google.maps.Map($("#map")[0], this.myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
});
})();
I tried with getElementById() and dont work. Now the view.
In the express framework the route is /public/app/views/index.html, the
route.app.js is:
(function(){
angular.module('app.routes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: 'app/views/pages/home.html',
controller: 'MapController',
controllerAs: 'main'
})
.when('/login', {
templateUrl: 'app/views/pages/login.html'
})
.when('/about', {
templateUrl: 'app/views/pages/about.html'
})
.when('/users', {
templateUrl: 'app/views/pages/users.html'
});
// get rid of the hash in the URL
});
})();
the app.js
(function(){
angular.module('myApp', [
'ngAnimate',
'app.routes',
'mainCtrl',
'userCtrl',
'mapCtrl',
'userService',
'authService'
]);
})();
in the index.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sociedad F</title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content='Team of competition' name='description' />
<meta content='FanaticCode' name='author' />
<script type="text/javascript" src="/app/controller/mainController.js"></script>
<script type="text/javascript" src="/app/controller/userController.js"></script>
<script type="text/javascript" src="/app/controller/mapController.js"></script>
<!-- services -->
<script type="text/javascript" src="/app/services/authService.js"></script>
<script type="text/javascript" src="/app/services/userService.js"></script>
<!-- main Angular app files -->
<script type="text/javascript" src="/app/app.routes.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>
<body ng-app="myApp" ng-controller="MapController as main">
<div ng-view></div>
</body>
</html>
and the home.html
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--- more html code with bootstrap -->
</div>
<div id="container" >
<div id="sidebar">
<!--- more html code with bootstrap -->
</div>
<div id="map"></div>
</div>
Well can see that nothing is happend I tried but dont work yet some can help me please.
I'm new to AngularJS and I'm trying to declare a second controller to a new view in my page. I have a logincontroller and when I succeed the login I get to the Home.html.
When opening Home.html I get the following error below..It looks like it can't recognize my ModelController/ModalService..What am I missing here?
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0-beta.1/$injector/unpr?p0=ModalServiceProvider%20%3C-%20ModalService%20%3C-%20ModalController
Index.html:
<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-cookies.min.js"></script>
<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>
</body>
</html>
Home.html:
<div class="container" ng-controller="ModalController">
<div class="col-xs-2">
<button class="btn btn-group-justified" ng-init="testfunc()">press me</button>
</div>
</div>
MyApp.js:
angular.module('MyApp', [
'Authentication',
'Modal',
'ngRoute',
'ngCookies'
])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
.when('/Home', {
controller: 'ModalController',
templateUrl: 'Home.html'
})
.otherwise({
redirectTo: '/Login'
});
}
]);
ModalController.js:
angular.module('Modal')
.controller('ModalController',
['$scope', 'ModalService',
function ($scope, ModalService) {
$scope.testfunc = function() {
alert('weeee');
}
}]);
ModalService.js:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService'
['$http',
function ($http) {
var service = {};
return service;
}
]);
You need to include app.js after including services and controllers. And controllers after services.
it should be like this:
<script src="Scripts/Services/ModalService.js"></script> <!--ModalService is being defined here -->
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script> <!-- ModalService is being injected here -->
<script src="Scripts/MyApp.js"></script> <!-- All of the things are set in place here -->
In fact, the best practice is to include all of them in the bottom of your <body>.
I found the answer..The problem was that I was missing a comma :(
ModalService.js should look like this:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService', <------ COMMA MISSING :(
['$http',
function ($http) {
var service = {};
return service;
}
]);
So on load to the base page, I'm expecting the page to redirect to: http://myurl.com/index.php#/search
Currently nothing happens...any ideas?
<!doctype html>
<html ng-app="appDep">
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
<script>
var app = angular.module('appDep', ['ngRoute']);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/search/:sig?', {
templateUrl: 'blablabla',
controller : 'notYetCreated'
}).otherwise({
redirectTo : '/search'
});
} ]);
app.controller('notYetCreated', function($scope,$log,$http,$q,$routeParams, $location) {
console.log('test')
});
</script>
</head>
<body>
HI
<script type="text/ng-template" id="blablabla">
TEST
</script>
</body>
</html>
Add <div ng-view></div>
Can I have loading some data once in angular module? I tried to use .run() but it gets called whenever page is accessed. For Example: say there are 2 html pages belonging to same module:
TestPage1.html:
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<p><a ng-href="TestPage2.html">Go to Page2</a></p>
</body>
</html>
TestPage2.html:
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<p><a ng-href="TestPage1.html">Go to Page1</a></p>
</body>
</html>
app.js:
var myApp = angular.module('myApp', []);
var cnt = 0;
myApp.run(['$rootScope', '$http', function(scope, $http) {
if(scope.loggedIn == undefined || scope.loggedIn == null) {
$http.get('rest/userData').success(function(data) {
cnt++;
alert(cnt);
scope.loggedIn = true;
});
}
}]);
When I navigate from one page to another this .run() is getting called again and again with cnt as 1. Is it possible to have it called once in life- time of module getting initialized? Or what is the other way?
It seems you are missing some basics such as a controller. The typical angular setup is having an ng-view for your app and loading the other pages via routing. Here is a simple example:
http://beta.plnkr.co/edit/RnZWeWxTJFri49Bvw50v?p=preview
app.js
var app = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'TestPage1.html', controller: Page1Ctrl});
$routeProvider.when('/view2', {templateUrl: 'TestPage2.html', controller: Page2Ctrl});
$routeProvider.otherwise({redirectTo: '/view1'});
}]).run(function () { // instance-injector
alert('only run on first page load this is where you load data or whatever ONE time'); // this only runs ONE time
})
function MainCtrl($scope) {
$scope.name = 'main';
}
function Page1Ctrl($scope) {
$scope.name = 'page 1';
}
function Page2Ctrl($scope) {
$scope.name = 'page 2';
}
HTML:
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
This is the main page. Main nav:
<a ng-href="#/view1">Go to Page1</a>
<a ng-href="#/view2">Go to Page2</a>
<div ng-view></div>
</body>
</html>
You will notice in the html there is an ng-view, when a route is encountered such as #/view the routeprovider looks it up and provides the correct template and calls the appropriate controller. I believe this is the kind of setup you are trying to achieve.