I'm new to AngularJS. I've following egghead.io I've set up a controller and model to retrieve message from input component and display it. I'm using ui-router.
Here's my index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title> </title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
Here's my app.js
angular.module('app',["ui.router"])
.config([function($stateProvider) {
$stateProvider
.state('index', {
url:"",
templateUrl:"templates/first.html",
controller:"FirstCtr as first"
});
});
.controller("FirstCtr", function FirstCtr() {
var first = this;
first.greeting = "First";
});
Here's my templates/first.html
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{"World"}}
</div>
After I go to http://localhost:8080, it was blank and throw this error
Please give me some suggestions.
Your state definition should be be declared controller alias in controllerAs option of state, with it you need to remove the semicolon from config block end.
Also you need to inject $stateProvider dependency properly to avoid error.
Code
angular.module('app', ["ui.router"])
//missed `'$stateProvider'` dependency here
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('index', {
url: "",
templateUrl: "templates/first.html",
controller: "FirstCtr",
controllerAs: "first"
});
}]) //remove semicolon from here as you are appending app in chain
.controller("FirstCtr", function FirstCtr() {
var first = this;
first.greeting = "First";
});
Working Plunkr
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 am trying to make a single page application while using components since my company will be moving to using components in the future and I am trying to follow the angular-phonecat tutorial. The problem I'm having is that for some reason in my app.config.js file, the template for the home page is not being recognized (the home-page portion) and I can't figure out why. If I replace that with a simple string of 'hello', it displays just fine, so it has to be somewhere in my components but I can't track down why it's not recognizing it.
Relevant code:
app.config.js:
angular.
module('newSpa').
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider){
$locationProvider.hashPrefix('!');
$routeProvider.
when('/home',{
template: '<home-page></home-page>'
}).
when('/contacts', {
template:'<contacts></contacts>'
}).
otherwise('/home');
}]);
app.module.js:
angular.module('newSpa', [
'ngRoute',
'homePage',
'contacts'
]);
home-page.template.html:
<div>
<p>{{message}}</p>
</div>
home-page.module.js:
angular.module('homePage', []);
home-page.component.js:
angular.module('homePage').component('homePage', {
templateUrl: 'home-page/home-page.template.html',
controller: 'homeCtrl'
});
controllers.js:
angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="newSpa">
<head>
<meta charset="UTF-8">
<title>SPA Contacts</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="home-page/home.module.js"></script>
<script src="home-page/home.component.js"></script>
<script src="contacts/contacts.module.js"></script>
<script src="contacts/contacts.component.js"></script>
<script src="controllers/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
My app.config.js file is in the root "app" directory, and my home files are all in the "/app/home-page" directory. Link to angular-phonecat: https://docs.angularjs.org/tutorial/step_03
So my previous solution was still incorrect. The real solution is that my controller was redefining the 'home' module because I had square brackets. Here is the old controller:
angular.module('homePage', []).controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
So as you can see, when I have square brackets in the module definition, I am redefining the module, thereby overwriting all previous definitions of the module. When I removed those brackets:
angular.module('homePage').controller('homeCtrl', ['$scope', function($scope){
$scope.message = 'hello';
}]);
Everything displays properly. So the issue was I was making a new module with just the controller, so it didn't have the template to push to the view to update.
You seem to have named your component 'home' but are using 'home-page' in your template.
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 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',[]);
I'm trying to put together a basic angularjs web page through django (but not really using django for this example). I tried to copy an example exactly, but it's not working. The partial and the controller are not loading. The url is updated, so I know the app is loading. But I don't see it hitting my web server at all for the partial or the data. Help would be appreciated.
Here is the simplest code I could put together.
test.html:
<!doctype html>
<html ng-app="ciqApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
TEST
<div ng-view>
</div>
</body>
</html>
js/app.js
var ciqApp = angular.module('ciqApp', [
'ngRoute',
'ciqControllers'
]);
ciqApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/questions', {
templateURL: '/static/partials/question-list.html',
controller: 'QuestionListCtrl'
}).
otherwise({
redirectTo: '/questions'
});
}]);
js/controllers.js
var ciqControllers = angular.module('ciqControllers', []);
ciqControllers.controller('QuestionListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/get_questions').success(function(data) {
$scope.questions = data;
});
}]);
TemplateURL should be TemplateUrl. Also, you can try to remove the first slash from your templateUrl path and see if that makes a difference: So:
templateURL: '/static/partials/question-list.html',
becomes:
templateUrl: 'static/partials/question-list.html',