I Followed that link to learn how to use: ng-include: http://www.w3schools.com/angular/angular_includes.asp
But I Have few questions and I not understand well how it works.
If I remove app1.js = the ng include will not works, why? I really not understand angular I am just trying for the first time.
app1.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
})
as well if I am not running this code in a server will not works too, why?
html code:
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<div ng-include="'includes/content.html'"></div>
<div ng-include="'includes/header.html'"></div>
</div>
<script src= "js/app1.js"></script>
</body>
</html>
you use the <body ng-app="myApp" ng-controller="userCtrl">
After you remove the app1.js there is no controller to match with the ng-controller so there will be a error saying undefined controller (check the console),
and change the ng-app="myApp" to ng-app, if you keep the ng-app="myApp" then it will search for a module called myApp as angular.module('myApp', [])
remove the ng-controller directive and check it will work.
then whole think would be
<body ng-app>...
Related
I have imported an external local html file (index2.html) into my html file's div (index.html, #container). I want to use angular to bind data values to some of the tags in the imported html file.
Here's my code so far - http://plnkr.co/edit/APXdpQzRUOfGehqSAJ9l?p=preview
index.html
<div id="container" ng-app="myApp" ng-controller="myController"></div>
<script type="text/javascript">
$(function() {
$("#container").load("index2.html");
});
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.name = "test";
});
</script>
index2.html
<div id="container2">
<p>test content:</p>
<p>{{name}}</p>
</div>
However, it just shows up as the text {{name}} - not 'test'. I've tried placing 'ng-app' and 'ng-controller' in #container2 instead but it's still the same.
Mixing AngularJS and jQuery was asking for trouble!
I found my answer - I used ng-include to import the html instead of the load function.
<div id="container" ng-include="'index2.html'" ng-app="myApp" ng-
controller="myController"></div>
I am starting to learn Angular and tried to repeat the "To do list" task they have on the homepage. However, I am stuck in the very beginning:
http://codepen.io/Deka87/pen/grGWqQ
Template
<div ng-app>
<div ng-controller="TodoCtrl">
<h2>{{totalItems}}</h2>
</div>
</div>
Javascript
function TodoCtrl($scope) {
$scope.totalItems = 4;
}
I seem to do the very same thing, however it doesn't work. What's wrong?
First you must import the angular library, then instantiate your app and finally create your controller, this way:
angular.module('app', [])
.controller('TodoCtrl', function($scope) {
$scope.totalItems = 4;
});
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="TodoCtrl">
<div>
<h2>{{totalItems}}</h2>
</div>
</body>
</html>
I recommend you to check this: What is a Module?
http://codepen.io/anon/pen/EywXXQ Here is the fork of your codepen with the code working.
You need to import the angular script
Need to create an angular app like this
Inject the app in your html using ng-app
Create a controller and inject it in your html using ng-controller
angular.module('app', []).controller('TodoCtrl',
function ($scope) {
$scope.totalItems = 4;
});
Go through these tutorials that will help you understand it better
Tutorial
Code:
<!DOCTYPE html>
<html>
<head>
<!-- angular -->
<script src="angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<p>{{ title }}</p>
</div>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Directives -->
<script src="timelineInfo.js"></script>
</body>
</html>
All my files are in the same folder because I was having a problem doing src="js/...".
I get the error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…0%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8080%2Fangular.min.js%3A20%3A42
I don't exactly understand what the website was suggesting. I'm using the angular.min.js in my index directory because linking it to the http file was giving me issues. All I'm trying to do is run a simple app so I can build from there but even that is giving me issues.
(I am running from a local machine)
Thanks!!
---------------------------------OTHER FILES----------------------
app.js:
var app = angular.module("timelineApp", []);
MainController.js:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);
The problem is that in your html you have app module referenced in ng-app. And in your app.js you have module name as timelineApp.
You need to sync them.
Either update your app.js
from
var app = angular.module("timelineApp", []);
to
var app = angular.module("app", []);
Or update your markup from
<body ng-app="app">
to
<body ng-app="timelineApp">
ng-app value in your html code should have the same as the angular module in your javascript.
For example in you case it should be following:-
<ng-app="timelineApp"> // in your html code
or following:-
var app=angular.module('app',[]); // in your javascript
Also, if you still face the error after that too, then you can one of my answers on the same here
The error you are getting refers to the fact that your application is not bootstrapped correctly. Hence Angular's compiler does not understand the directives it encounters; in this case, that would be ng-controller
It's important that you understand what's happening.
var app = angular.module("timelineApp, []")
and subsequently
<body ng-app="app">
ng-app should really be timelineApp since that is what you set the name of your angular module to.
The code above "bootstraps" your application. Once you application is bootstrapped, Angular's compiler will go through the page's markup. When it encounters ng-app directive, it will look at its value timelineApp and know that it is registered as an angular application.
This also help it understand that you have a controller registered on the app:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);
I am learning angularJS, ng-app works ng-model works, but when I try ng-controller, it does not work, the fault is on my side but I am unable to figure out what it is, I am not even trying anything fancy, just trying make the ng-controller work,
what is my mistake in the below code?
HTML :
<div ng-app="">
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>`
and JS :
function HelloWorldCtrl($scope){
$scope.helloMessage="Hello World";
}
same problem when run in jsfiddle
var myapp = angular.module('myApp', []);
myapp.controller('HelloWorldCtrl', function($scope){
$scope.helloMessage = "Hello world";
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>
so i have my index.html like following
<html>
<body ng-controller="Ctrl">
<div id="main" ng-include="body"/>
<div id="sidebar" ng-include="side"/>
</body>
</html>
app.js:
var app=angular.module("myapp",[]);
app.controller('Ctrl',['$scope',function($scope) {
$scope.gotoXXX() {
$scope.sidebar="xxx.html";
}
}]);
sidebar.html:
<script src="XXXcontroller.js"></script>
<div ng-controller="XXXcontroller">
</div>
Obviously, this is not working. It prompts for XXXcontroller not defined. So I figured the controller was not properly injected. And I need to change view partially, so routeProvider is not an option.
So I'm wondering, Is there anyway to dyanmically inject controllers?