I am having issues trying to show a partial html on my index.html file (Nothing is displayed).
Please see my index.html code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/animations.css"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<li>
Show People
</li>
<div ng-view></div>
</body>
</html>
Then I try to load people.html that is on partials directory, using routing on app.js:
'use strict';
// Declare app level module which depends on filters, and services
var myApp = angular.module('myApp', ['ngRoute', 'filters', 'services', 'directives', 'controllers']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/people', {
templateUrl : 'patials/people.html',
controller : 'PeopleController'
}).otherwise({
redirectTo : '/people'
});
}]);
If I replace the ng-view part on my index.html with my template file content, everything displays fine, so I dont think I have an issue on my controller declarations.
Can you take a look and help me figuring out what's wrong?
Thanks!
You are using var myApp = angular.module('myApp', []); inside your controller. If you add an array as a second parameter in angular.module, the module is automatically created as a new one and overrides the previous one with the same name, so the config is not working anymore, because in your code it is defined on a different module.
Just change the code in the PeopleController definition from
var myApp = angular.module('myApp', []);
to
var myApp = angular.module('myApp');
and it should work
edited plunk:
http://plnkr.co/edit/bK9vHSPxKmijhlLPS5C5?p=preview
Related
I am learning and experimenting with multiple views and routing. For this reason, I have written three files test.html, controllers.js, and app.js. When I run the application, ideally the view1 should display the message and view2 should display date time. But it is just displaying two tabs as view 1 and view 2 and the message and dates are not being displayed. I am trying to figure out what I am doing wrong.
My test.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Routing</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
my app.js
'use strict';
angular.module('myApp',['myApp.controllers','ngRoute']);
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/view1',{
controller: 'Controller1',
templateUrl: 'partials/view1.html'
}).when('/view2',{
controller: 'Controller2',
templateUrl: 'partials/view2.html'
});
});
my controllers.js
'use strict';
angular.module('myApp.controllers',[]).
controller('Controller1',function($scope){
$scope.message="Hello, world";
}).controller('Controller2',function($scope){
$scope.now=new Date();
});
Kindly let me know where I am doing wrong.
Load your controller.js ahead of app.js since the module myApp is dependent on the myApp.controllers
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
DEMO
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
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>
I am trying to learn AngularJS. I have a navigation setup as a view and I cannot get it to display. When I look in the inspector i see <!-- ngInclude: views/nav.html -->.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>The ToDo List</title>
<script type="text/javascript" src="assets/js/lib/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/controllers/activetaskscontoller.js"></script>
</head>
<body>
<div class="navigation" ng-include="views/nav.html"></div>
Here is my app.js
var myApp = angular.module('myApp',
['ngRoute', 'firebase', 'appControllers']);
var appControllers = angular.module('appControllers', ['firebase']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/active-tasks', {
templareUrl: 'views/active-tasks.html',
controller: 'ActiveTasksController',
}).
when('/completed-tasks', {
templareUrl: 'views/completed-tasks.html',
controller: 'CompletedTasksController',
}).
otherwise({
redirectTo: '/active-tasks'
});
}]);
ng-include is expecting a string and not a path.
Try changing to this:
<div class="navigation" ng-include="'views/nav.html'"></div>
You can read more about the subject here: AngularJS ng-include does not include view unless passed in $scope
I am just starting study Angular and trying example from book, but my simple routing doesn't work.
I have updated code as was recommended in the answers
Here is index.html:
<html ng-app="airline">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div ng-view></div>
</div>
</body>
</html>
Here is app.js:
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};
When I refresh the page I don't have 'test' in the browser and don't have alert message. Why ? What I am missing ?
Update
Here is a full code example: https://github.com/demas/ang_test
Latest angular library use external router so you need to inject ngRoute and pass it as:
angular.module('airline', ['ngRoute'])
You are missing ngRoute directive. Download ng-route.js file and reference it in your HTML like;
<script type="text/javascript" src="js/lib/angular-route.js"></script>
And change your app.js like
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};