i try to write an angular app using best code practice and i got to this:
index.html file contain :
<!DOCTYPE html>
<html ng-app='hrsApp'>
<head>
<title>Hrs app</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-controller="homeCtrl">
<div class='container'>
<div ng-view></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script>
<script src='app.js'></script>
<script src='js/controllers/homeCtrl.js'></script>
<script src='js/controllers/avCtrl.js'></script>
</body>
</html>
Main file: app.js:
angular.module('home', []);
angular.module('av', []);
// Declare app level module which depends on filters, and services
angular.module('hrsApp', [
'hrsApp.controllers',
'hrsApp.services',
'hrsApp.directives',
'hrsApp.filters',
// AngularJS
'ngRoute',
// All modules are being loaded here but EMPTY - they will be filled with controllers and functionality
'home',
'av'
]);
// configure our routes
angular.module('hrsApp').config([
'$routeProvider',
function ($routeProvider) {
'use strict';
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
// route for the about page
.when('/av', {
templateUrl: 'views/av.html',
controller: 'avCtrl'
})
// route for the contact page
.otherwise({
redirectTo: '/'
});
}
]);
Then i added the home controller:
/*global angular*/
angular.module('home').controller('homeCtrl', [
'$scope',
function ($scope) {
'use strict';
$scope._init = function () {
$scope.message = "welcome to Home Ctrl";
};
// DESTRUCTOR
$scope.$on('$destroy', function () {
});
// Run constructor
$scope._init();
$scope.log('info', '[HomeCtrl] initialized');
}
]);
and home template that for the moment contain only a binding to the message variable:
<div>{{message}}</div>
When i try to run the application i got : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=hrsApp&p1=Error%3A%…googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.0%2Fangular.min.js%3A18%3A3) angular.js:38
Any idea what i do wrong?
From your code I can see that you have injected modules that you did not declared.
in order todo so you must add the following lines to your code:
angular.module('hrsApp.controllers',[]);
angular.module('hrsApp.services',[]);
angular.module('hrsApp.directives',[]);
angular.module('hrsApp.filters',[]);
Related
I'm working on my first app. When I open it in the webbrowser I get this error: Uncaught ReferenceError: controller is not defined
at app.js:3
at app.js:15
I got this error after I created the app.js file and tried to link my controller.js to it. Also the routeProvider doesn't seem to work yet. And my placeholders stopt working, which did work before.
I simplified my code to keep it readable. I've got more html files and use bootstrap in combination with JQuery and CSS. Does someone know what's going wrong here?
app.js
(function(){
var myApp = angular.module('myApp', ['ngRoute']).controller('controller', controller)
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: '../main.html',
controller: 'controller'
})
.otherwise({redirectTo: '../main'});
});
})();
controller.js
(function() {
angular.module('controller', ['ngRoute'])
.controller('controller', ['$scope', function ($scope) {
}]);
})();
index.html
<!DOCTYPE html>
<html data-ng-app = "myApp">
<head>
<meta charset="utf-8"/>
<title> Who Brings What </title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
/*more code here */
</nav>
</div>
<div data-ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular- route.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular- route.js"> </script>-->
<script src = "../controller.js"></script>
<script src = "../app.js"></script>
</body>
</html>
main.html
<div>
Main Body
</div>
There are few issues with your code,
(i)Since you have defined controller separately in a single file, you can safely remove it from the initial module.
function(){
var myApp = angular.module('myApp',['ngRoute'])
myApp.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: './main.html',
controller: 'controller'
})
.otherwise({redirectTo: '/main'});
});
})();
(ii) You do not need to have ngRoute injected twice, You can just use the globally declared module
(function() {
app.controller('controller', ['$scope', function ($scope) {
}]);
})();
DEMO
I try to show a view with angular paths. the console does not throw any error or warning.
But equally the view is not displayed.
What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head></head>
<body>
<ng-view></ng-view>
<!-- build:js bower/vendor -->
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<script src="./routes.js"></script>
<!-- build:app scripts/js || CUSTOMER -->
<script src="./components/customer/customerService.js"></script>
<script src="./components/customer/customerController.js"></script>
<!-- endbuild-->
</body>
</html>
routes.js
var _templateBase = './components';
angular.module('app', [
'ngRoute'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/customer/customer.html' ,
controller: 'customerController',
controllerAs: '_ctrl'
})
.otherwise({
redirectTo: '/'
});
}
]);
costomerService.js
angular.module('app', [])
.factory('customerService', function() {
});
costomerController.js
angular.module('app',[])
.controller('customerController', ['$scope', function($scope, customerService) {
//
}]);
It's wrong? Because the view is not displayed? I'm using obsolete mertodos, guide me lleguar many tutorials there.
Thanks so they can help.
This creates your app because you have included the second parameter (an array of dependencies to inject):
angular.module('app', [
'ngRoute'
])
Remove the second parameter on your other angular.module() definitions because that is causing a new app to be created each time.
angular.module('app') <-- no second parameter tells it to use the existing 'app' module
.factory('customerService', function() {
});
angular.module('app') <-- no second parameter tells it to use the existing 'app' module
.controller('customerController', ['$scope', 'customerService', function($scope, customerService) {
//
}]);
I added customerService to your injection array on your controller definition because the array elements have to match up exactly to your function parameters.
Also, if you are using controllerAs syntax as you have done on your route definition then you may not want to inject $scope into your controller.
I'm using ui router and angular js so when I test the app, I just get a blank screen with an injector:module error. This is the link to the error:
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350
Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
// Creating fireref instance
app.factory('FireRef', function($firebase){
var ref = new Firebase('https://dablog.firebaseio.com/');
return ref;
});
// Creating fireauth instance
app.factory('FireAuth', function($firebaseAuth){
var ref = new Firebase('https://dablog.firebaseio.com/');
return $firebaseAuth(ref);
});
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/site/home');
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
// controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
// controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
// controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
})
Here is my blog.js file where it says "app is not defined":
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
You have declared 'use strict', so the app variable is undefined. You need to add
var app = angular.module('myApp');
to the top of BlogCtrl.js
Also, move <script src="js/app.js"></script> so that it's before the controller scripts in index.html. Because you load app.js after BlogCtrl.js, the module defined in app.js is not available in BlogCtrl.js.
I don't have enough reputation to comment, but I do want to add information: do not add var app = angular.module('myApp', []) in blog.js, because the brackets initialize a new app, so Angular will think you're creating a new app and will throw an error, since 'myApp' already exists. Be sure to use var app = angular.module('myApp') instead. Also be sure to link the the .js file in your index file after Angular has been loaded.
I think you need to include this line at the top of blog.js:
var app = angular.module('myApp');
Edited to remove the second parameter: , [].
I'm trying to make an AngularJS application but I don't understand why it doesn't route correctly, I followed some guides but haven´t made it work yet.
Here is the code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div ng-view></div>
<!-- Vendor libraries -->
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<!-- Application Files -->
<script src="app/app.js"></script>
<script src="app/home/controllers/HomeController.js"></script>
</body>
</html>
app.js
(function() {
'use strict';
var app = angular
.module('App', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/views/index.html',
controller: 'HomeController',
controllerAs: 'home'
})
.otherwise({
redirectTo: '/'
});
});
})();
HomeController.js
(function() {
'use strict';
angular
.module('App')
.controller('HomeController', HomeController);
function HomeController(){
var home = this;
}
})();
home's index.html
<div>
Example text
</div>
Thanks in advance
Are you seeing errors in the console? You're probably getting an error relating to the controller not being found, as 'home/controllers/HomeController' is not a proper way to reference HomeController. It should instead read: 'HomeController'. Angular will do the work to traverse your controllers and find one that matches that string.
Here's an updated app.js:
(function() {
'use strict';
var app = angular
.module('App', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/views/index.html',
controller: 'HomeController',
controllerAs: 'home'
})
.otherwise({
redirectTo: '/'
});
});
})();
Additionally, in HomeController.js, you are re-instantiating the module 'App' by including the brackets after the name. Instead, modify it to more succinctly read:
(function() {
'use strict';
angular
.module('App')
.controller('HomeController', HomeController);
function HomeController(){
var home = this;
}
})();
I am trying to implement a navigation into a webpage using angularJS. The problem is that the route does not work at all. The browser console does not give any errors and the ng-view just does not show the templatesUrls.
route.js
var routeApp = angular.module('myApp', ['ngRoute']);
routeApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/task.html',
controller: 'TraineesController'
})
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
})
.otherwise({redirectTo:"/technology"});
});
Index.html
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/taskman.css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script type="text/javascript" src="app/route.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<a href="#/technology" class="btn btn-sm btn-danger nav-button-margin">
<i class="glyphicon glyphicon-user"></i> Account panel
</a>
<div class="col-sm-12">
<div ng-view></div>
</div><!-- Closing col-sm-12-->
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('TraineesController', function($scope, $http, $log) {
getTrainee(); // Load all available tasks
function getTrainee(){
$http.post("ajax/getTrainee.php").success(function(data){
$scope.trainees = data;
});
};
});
task.html
<div class="widget-box" id="recent-box" ng-controller="TraineesController">
Random text tables
</div>
remove the ; from here:
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
}) // <-----here you have a ; remove it and it will work.
.otherwise({redirectTo:"/technology"});
; broke the chaining and caused a syntax error there.
update:
you can remove this controller:
<body ng-controller="TraineesController">
and instead you can place the controller in the respective templates.
checkout this plunkr demo.
I've made two different plunkers, the first one is a plain app just to do an example of routes magic with angular...
First example, basic routes
var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope) {
$scope.technology = 'this is the tech page';
$scope.task = 'this is the task';
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/technology', {
templateUrl: 'technology.html',
controller: 'MainCtrl'
})
.when('/task', {
templateUrl: 'task.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/technology'
});
}
]);
The second example is an myApp example based on your application, it's basicaly your application but slightly different...
Second example, your app
// I like to keep the app.js file "clean", what means that this file will only
// load the app modules and declare the DI of the app...
var app = angular.module('myApp', [
'ngRoute', // ngRoutes directive from angularjs
'myAppControllers', // controllers module, u can add how controllers wtv u need
'myAppRoutes', // routes module, you can keep the routes configs separated or in the same file
]);
// start the modules, other way to do this is to put this lines in every
// single controllers or route file, what is ugly
angular.module('myAppRoutes',[]);
angular.module('myAppControllers',[]);