unable to see ng-model - angularjs

i am trying to use angular js with django server
here is the index.html
{% load staticfiles %}
<html ng-app="blog">
<head>
<script type="text/javascript" src="{% static 'js/libs/angular.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.config.js' %}"></script>
</head>
<body>
<input type="text" ng-model="name">
<p>hi , {{name}}</p>
</body>
</html>
here is app.module.js
'use strict'
angular.module('blog' , []);
here is app.config.js
'use strict'
angular.module('blog').config(function(){});
the ng-model variable name doesnt show up at all.No error occurs and nothing comes up on typing anything in the input box
What can be the case and how can i recover from it ?


Try this
html
<html>
<head>
<script type="text/javascript" src="{% static 'js/libs/angular.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.config.js' %}"></script>
</head>
<body ng-app="myBlog">
<input type="text" ng-model="name">
<p>hi , {{name}}</p>
</body>
</html>
js
'use strict';
var myBlog = angular.module('myBlog');
myBlog.config(function() {
// anything u want
});


angular module has a module registery, so you don't have to save your module somewhere. Actually you can even use IIFE pattern (Immediate Invocation Function Expression) to wrap your module definition !
My suggestion is to check weither it comes from the server itself. I mean check if your files are properly loaded !
Then wrap your logic inside a controller :
// -- my-blog.controller.js --
angular.module('blog', ['$scope', MyBlogCtrl($scope) {
}]);
in your index.html:
<html>
<head>
<script type="text/javascript" src="{% static 'js/libs/angular.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/modules/app.config.js' %}"></script>
</head>
<body ng-app="myBlog">
<div ng-controller="MyBlogCtrl">
<input type="text" ng-model="name">
<p>hi , {{name}}</p>
</div>
</body>
</html>

Related

still getting angular not defined

this is html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
this is js file
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.message = "Welcome to BlogIt!";
})

Edit with this :
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{message}}
</body>

getting data from the controller

i've got 'app.js' with
var myApp = angular.module('myModule', []);
myApp.controller("myController",function($scope){
$scope.message = 'message';
});
and html
<html ng-app="myModule">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/app.js"></script>
</html>
And i've got no idea why data from the scope object does not show. All files are included properly

could you add all these cdn and your js files, inside to head / body tag !!

You should all your script inside head/body.
Check this working sample:
<html ng-app="myModule">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
https://plnkr.co/edit/jLH0mVhX8shBWvI90b2i?p=preview

angularjs django integration

I can load the page with items if I include the angularjs declaration inside script tag in index.html. Otherwise, not working.
app/templates/app/index.html
{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static "components/bootstrap/dist/css/bootstrap.css" %}">
<script type="text/javascript" src="{% static "javascript/app.js"%}"></script>
<script type="text/javascript" src="{% static "components/angular/angular.min.js"%}"></script>
<script type="text/javascript" src="{% static "components/angular-route/angular-route.js"%}"></script>
</head>
<body ng-app="store">
<div ng-controller="ItemController">
{% verbatim %}
<div class="panel" ng-repeat="item in items">
<p>{{ item.id }}</p>
</div>
{% endverbatim %}
</div>
</body>
</html>
app/static/javascript/app.js
angular.module('store', ['ngRoute'])
.controller('ItemController', function($scope, $http) {
$http.get('/api/items').success(function(data){
$scope.items = data;
});
});

After installing the angular plugin on chrome, when I load the page, it shows me this error. "Module was created but never loaded". After playing for a while, I figure it is because I load my app.js before I load angular.js.

AngularJS Uncaught Error: $injector:modulerr

I know there are a million of these questions, and I've been coding with AngularJS for a while, but this one is unusual.
2 weeks ago I deployed a website for a client and everything was working beautifully. Then the client decided he wants a small change, so before making the changes I ran the website on a local server just to make sure everything is ok.
Then this error pops up... I have no clue what it means, and I haven't made any changes to the code. It's the same as the deployed site which runs perfectly. Would anyone know what this error means by any chance?
Failed to instantiate module crsportal due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=c...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:134
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:391
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:39:222)
at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:246)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:20:359
I can give you the code, because perhaps I changed something without realizing it.
crsportal.js
(function () {
'use strict';
angular
.module('crsportal', [
'crs.authentication',
'crs.config',
'crs.routes',
'crs.profiles.controllers',
'profile.services',
'route.controller'
]);
angular
.module('crs.config', []);
angular
.module('crs.profiles.controllers', []);
angular
.module('crs.routes', ['ngRoute']);
angular
.module('profile.services', []);
angular
.module('route.controller', []);
angular
.module('crsportal')
.run(run);
run.$inject = ['$http'];
/**
* #name run
* #desc Update xsrf $http headers to align with Django's defaults
*/
function run($http) {
$http.defaults.xsrfHeaderName = 'X-CSRFToken';
$http.defaults.xsrfCookieName = 'csrftoken';
}
})();
index.html
<!DOCTYPE html>
<html>
<head>
<title>CRS Client Portal</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The HTML5 Shim is required for older browsers, mainly older versions IE -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" />
</div>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-84093208-1', 'auto');
ga('send', 'pageview');
</script>
{% include 'stylesheets.html' %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-app="crsportal" class="loginpage">
<div class="container-fluid" ng-controller="LoginController as vm">
{% include 'login.html' %}
</div>
{% include 'javascripts.html' %}
</body>
</html>
Edit: Added Info
authentication.module.js
(function () {
'use strict';
angular
.module('crs.authentication', [
'authentication.controllers',
'authentication.services'
]);
angular
.module('authentication.controllers', []);
angular
.module('authentication.services', ['ngCookies']);
})();
javascripts.html
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/material.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/ripples.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/underscore/underscore.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-cookies.js"></script>
<script type="text/javascript" src="{% static 'bower_components/ngDialog/js/ngDialog.js' %}"></script>
<script type="text/javascript" src="{% static 'lib/snackbarjs/snackbar.min.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/crsportal.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/config.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/routes.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/authentication.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/services/authentication.services.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/login.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/logout.controller.js' %}"></script>

Make sure there is a definition for crs.authentication:
//i added this
angular.module('crs.authentication', []);
angular
.module('crs.config', []);
angular
.module('crs.profiles.controllers', []);
//make sure no other module references ngRoute or this could be a problem as well. if it does add it as a depenency
angular
.module('crs.routes', ['ngRoute']);
angular
.module('profile.services', []);
angular
.module('route.controller', []);
//i moved this to last
angular
.module('crsportal', [
'crs.authentication',
'crs.config',
'crs.routes',
'crs.profiles.controllers',
'profile.services',
'route.controller'
]);
Fiddle that shows this works: http://jsfiddle.net/ncapito/ku3c33bj/

You are missing the "crs.authentication" module it has not been instantiated by the time you run
angular
.module('crsportal', [
'crs.authentication',
'crs.config',
'crs.routes',
'crs.profiles.controllers',
'profile.services',
'route.controller'
]);
See AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

Error using module in angularJS

I am new to angular.js and have a problem. Please help me resolve it.
I have created a simple screen using a controller and a module in my example.
But it doesnt work. I have presented the example as follows :
My html file is :-
<!doctype html>
<html ng-app="ayan">
<head>
<script type="text/javascript" src="hotel_listing_angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="contact in htlList">
{{ contact.name }}
</li>
</ul>
</div>
</body>
</html>
and my js file is as follows :-
var ayan=angular.module('ayan',[]);
ayan.controller('myController',function ($scope) {
$scope.htlList = [
{name:"Picard", description:"Captain"},
{name:"Santosh", description:"Programmer"},
{name:"Amit", description:"Manager"}
];
});
Please tell me what am I doing wrong.

You need to include
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before
<script type="text/javascript" src="hotel_listing_angular.js"></script>

Try calling
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before calling
<script type="text/javascript" src="hotel_listing_angular.js"></script>

Resources