I am noticing before I created this controller that ng-app="myApp" broke the data binding with an input field and the template I had before.
Now i have a controller with route provider and the ng-view in the index.html doesn't work at all (blank page).
Am I missing something?
<!doctype index.html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"> </script>
<script src="js/lib/angualar.min.js"></script>
<script src="js/lib/angualar-route.min.js"></script>
<script src="js/lib/angualar-animate.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
<!doctype js/app.js>
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
var appControllers = angular.module('appControllers', []);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
<!doctype views/nav.html>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
So few inputs watching your code:
Do a CTRL+Shift+I and open console tab in your browser to view the error reported, as your code has too many logical error and needs to be debugged.
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
In app.js appControllers is used as a dependency but its never mentioned in your html as data-ng-controller="appController"
Hence remove appControllers dependency.
With context of your code
var appControllers = angular.module('appControllers', []); is redundant too and will have errors as there are no appControllers defined in html
Here is the working code of, have kept it simple:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script>
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
</script>
</head>
<body>
<header>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
what is <!doctype index.html> if it is part of your code then remove all doctype from your code. your working code on plunker
and also you have not included your views/login.html code in your app.
Related
I have index file :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/jquery-ui.js"></script>
<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.js"></script>
<script src="./Controller/homingController.js"></script>
<link rel = "stylesheet" href = "./css/angular-material.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel = "stylesheet" href = "./css/materialize.min.css">
<link href="./css/icon.css" rel="stylesheet">
<link rel ="stylesheet" href="./css/Main.css">
<title>Home Application</title>
</head>
<body ng-app="myApp">
<div class="navbar">
Home
about
</div>
<div ng-view></div>
<script>
</script>
</body>
</html>
My Controller
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/home", {
templateUrl: "home.html"
, controller: "homingController"
});
});
app.controller('homingController', function ($scope, $http) {
alert ("Hello");
var url = "workingURL"; /// changed function to a simple string message to
test
$scope.message = "Hello Liberals";
});
My View home.html
<h1>Hello</h1>
{{message}}
Neither its seems going into homingController and alerting Hello .
Nor its not loading view, infact when I debug its not going to controller. Is there anything I missing here ?
Please refer following link:
you need to just seperate js code and html code
https://jsfiddle.net/ok9he9b9/2/
I'm new to Angular but this has been a bit of an issue.
So if I visit localhost:9000 I am greeted with the index view. If I click on my navbar link to the /about link, I am taken to http://localhost:9000/about and I am greeted with the about view.
However, if I refresh that page when I'm on the /about route. It breaks and tells me: Cannot GET /about If I go back to index it begins to work again. If I refresh on the index it doesn't break.
I set $locationProvider.html5Mode(true); as well as add <base href="/"> to the head of my index.html file.
Here is the relevant information from my files. (also I'm using Chrome)
app.js
myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
$locationProvider.html5Mode(true);
}]);
myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}]);
myApp.controller('aboutController', ['$scope', function($scope) {
}]);
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
use href="#!/about/" in html because it is changed in angularjs.1.6 href="#/about" not work for it
use below HTML code
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="#!/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
While learning/reading angular docs, it warns about declaring the controller again using ng-controller.
Does this describe my code below, declaring MainMenuCtrl twice. First in the app.js and the second time in the body tag of index.html? Thanks
//---index.html-------------------------------
<!doctype html>
<html lang="en" ng-app="angApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/project_student/">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/first_page.js"></script>
<script src="js/controllers/second_page.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body ng-controller="MainMenuCtrl"> //<<------1st declare-----------------
<header>
<button class="menuLeft" type="button" ng-click="toggleList()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main class="listview" ng-hide="showListView" ng-view></main>
<footer id="footer" class="footer">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
//---app.js-------------------------------
(function () { //y010
'use strict';
angular
.module('angApp', ['ngRoute', 'MainMenuCtrl']) //<<------2nd declare-----------
.config(['$routeProvider', routeProvider]); //y024
})();
function routeProvider ($routeProvider) {
$routeProvider.when('/menuItems', {
url: "/menuItems",
templateUrl: 'views/mainMenu.html',
controller: 'MainMenuCtrl' //<<-------- called-------------
}).when('/first_page', {
url: "/first_page",
templateUrl: 'views/first_page.html',
controller: 'FirstPageController'
}).when('/second_page', {
url: "/second_page",
templateUrl: 'views/second_page.html',
controller: 'SecondPageController'
})
.otherwise({ //home page
redirectTo: '/menuItems'
});
}
No, you are declaring it only once. In the template you are just declaring that body and its contents should come in the scope of the controller.
I'm trying to run a simple CRM app, based on the MEAN stack web-book. Upon loading the page I get the following error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=userApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.7%2F%24injector%2Fmodulerr%3Fp0%3DuserCtrl%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.7%252F%2524injector%252Fnomod%253Fp0%253DuserCtrl%250AI%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A24%253A186%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A252%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A1%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A427%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A444%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Afb%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A41%253A35%250Azc%252Fd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A463%250Azc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A293%253A238%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A174%253A399%250AHf%252Fc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A35%253A212%250A%0AI%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A6%3A416%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A38%3A184%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A444%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Afb%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A41%3A35%0Azc%2Fd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463%0Azc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A293%3A238%0Aa%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A174%3A399%0AHf%2Fc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A35%3A212%0A
angular.min.js (line 6, col 416)
This is my app.js file (the main app module)
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
and my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User CRM</title>
<base href="/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="assets/cs/style.css">
<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="app/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="app/controllers/userCtrl.js"></script>
<script type="text/javascript" src="app/services/authService.js"></script>
<script type="text/javascript" src="app/services/userService.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<header>
<div class="navbar navbar-inverse" ng-if="main.loggedIn">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-fire text-danger"></span> User CRM
</div>
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-user"></span> Users</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="!main-loggedIn">Login</li>
<li ng-if="main.loggedIn" class="navbar-text">Hello {{ main.user.name }}!</li>
<li ng-if="main.loggedIn">Logout</li>
</ul>
</div>
</div>
</header>
<main class="container">
<div ng-view></div>
</main>
</body>
</html>
I have loaded the local dependencies using bower (angular, angular-route, angular-animate), and the rest of the are local .js files, so I can't really figure out what the problem is.
The whole project can be found at this Git Repo. The angular part of the code is located in the /public folder.
Any feedback/ideas appreciated.
You are trying to inject userCtrl in your app, I could not find it in the git repo you
angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);
Angular DI, is looking for a service / controller / factory any component that is names userCtrl, which it can not find.
Angular DI does not look for files, rather components with the string names of your components.
Your controller and your services have to be part of your userApp module, not separates MainCtrlor userService modules.
Change
// This declares a new module named 'mainCtrl'
angular.module('mainCtrl', [])
angular.module('userService', [])
angular.module('autService', [])
to
angular.module('userApp')
I am trying to load a login.hml to my index.html using angular-route and ng-view, but for some reason it doesnt work.
<!doctype html>
<html ng-app="Test">
<head>
<script src="public/lib/angular/angular.min.js"></script>
<script src="public/lib/angular/angular-route.min.js"></script>
<script src="public/lib/angular/angular-animate.min.js"></script>
<script src="public/modules/core/core.client.module.js"></script>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="cf" ng-include="'public/modules/navigation/views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
A very simple JS file which loads the Angular modlule and call the $routeProvider for /login url:
var myApp = angular.module('Test',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
}).otherwise({redirectTo: '/about'});
}]);
login.html:
<h1>
<p>Login</p>
</h1>