I have two files in my code folder: app.js, and index.html.
// MODULE
var angularApp = angular.module('angularApp', []);
// CONTROLLERS
// Create the controller function and register it with the module
angularApp.controller('mainController', ['$scope', function($scope) {
$scope.name = 'ABC';
}]);
<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>Introduction to AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html,
body {
font-size: 1.1em;
}
</style>
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
</div>
</body>
</html>
I am getting the following error in app.js file
ERROR: 'angular' is not defined.[no-undef]
for the line:
var angularApp = angular.module('angularApp', []);
But the web page runs fine in Chrome and displays everything properly.
But I am not understanding why this error comes for angular object although angular.min.js is included in index.html.
Related
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 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.
So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.
HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
Home
</li>
<li>
Settings
</li>
<li>
Contacts
</li>
</ul>
</div>
AngularJS:
(function () {
var ngApp = angular.module("MyApp", ["kendo.directives"]);
ngApp.controller('HomeController', ['$scope', function ($scope) {
$scope.foo = 'something';
alert("HOME CONTROLLER");
}]);
}());
Part View HTML:
<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>
What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.
Any ideas?
Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.
The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial
How can we avoid including all .js and .css files in the index.html like in this example :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<base href="/">
<meta charset="utf-8">
<title>ShowTrackr</title>
<link href="favicon.png" rel="icon" type="image/png">
<link href='http://fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="//cdn.jsdelivr.net/ionicons/1.4.1/css/ionicons.min.css" rel="stylesheet">
<link href="stylesheets/animate.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
<div class="navbar-header">
<a class="navbar-brand" href="/">
<span>Show<strong>Trackr</strong></span>
</a>
</div>
<ul class="nav navbar-nav">
<li data-match-route="/$">Home</li>
<li data-match-route="/add">Add</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="!currentUser">
<li data-match-route="/login">Login</li>
<li data-match-route="/signup">Sign up</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="currentUser">
<li class="navbar-text" ng-bind="currentUser.email"></li>
<li>Logout</li>
</ul>
</div>
<div ng-view class="{{pageClass}}"></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-strap.js"></script>
<script src="vendor/angular-strap.tpl.js"></script>
<script src="vendor/angular-messages.js"></script>
<script src="vendor/angular-resource.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="vendor/moment.min.js"></script>
<script src="app.js"></script>
<script src="filters/fromNow.js"></script>
<script src="directives/uniqueEmail.js"></script>
<script src="directives/passwordStrength.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/add.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/signup.js"></script>
<script src="services/auth.js"></script>
<script src="services/show.js"></script>
<script src="services/subscription.js"></script>
<!--<script src="app.min.js"></script>-->
<!--<script src="templates.js"></script>-->
</body>
</html>
This code comes from this github : https://github.com/sahat/tvshow-tracker
The code is used for a tutorial : http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/
I'd like to do something like :
angular.module("MyApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller: "homeCtrl"
/*
Here say to include in the same time specific .js
(for example the one who contain the 'homeCtrl' controller) and .css
*/
});
}]);
Because with the html code above, there are going to be a lot of server requests and possibly useless (If the user don't use the whole application). I cannot imagine Google didn't think of it.
You can inline the CSS and JS code in the view. If the view is cacheable it is not a big issue.
You may want to take a look at http://webcomponents.org
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
I am trying to make a PhoneGap webapp using angular. I have these three files.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li>Home</li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
It works fine on the browser. The Alert is triggered just fine in the controller. But when I compiled it on Phonegap, the AngularJS is not initialized.
I've read that you need to execute the code after the 'deviceready' in order to work. I looked into this quetions here:
Angular ng-view/routing not working in PhoneGap
and try to use it. But it appears that it doesn't do anything. I can't understand why, or I might be missing something to do this, as well as my ng-app has a specific name and is attached to the app variable as seen.
Kindly help.
You should not use ng-app when manually bootstrapping Angular. See https://docs.angularjs.org/guide/bootstrap.