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?
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 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>...
I am trying to learn angular.js and incorporate some routes within my app. The problem that i am running into is that i have hit a snag with creating routes. I have two similar pages, and keep hitting 404's when i fire up the app in my local host. I feel like i am close because everything is being read, and i have no errors within the console, but i still have yet to get the entire routes to properly operate. I would be very grateful if anybody could take a quick look at my code below and see if there is anything that i need to alter to fix.
I believe that because of my circumstances i have one of two situations. I either have an issue with my code, or I have an issue with my server side routing. If it is my code, i was hoping someone could see if there is any issues with it and help me out with it. If it is a problem with my server side routing, them I honestly have no idea what to do.
Below is my app.js file. I feel like if there is anything that I have made a mistake with, it would be this one, but i'm not entirely sure.
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/index/', {
controller: 'MainController',
templateUrl: 'views/home.html'
})
.when('/test/', {
controller: 'testController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
These are the two html pages that i have within my views. They very similar i just have different controllers associated with them. The first one is called test, and the second one is called index
<div class="main" ng-controller="testController">
<div class="container">
<h1>{{ title }}</h1>
<div ng-repeat="product in products" class="col-md-6">
<product-info product="product"></product-info>
</div>
</div>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<div ng-repeat="product in products" class="col-md-6">
<product-info product="product"></product-info>
</div>
</div>
</div>
</div>
Finally, here is my general views index page:
<!doctype html>
<html>
<head>
<link href="css/main.css" rel="stylesheet" />
<script src="js/shared/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>"
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Stadiums in various leagues</h1>
</div>
</div>
<div ng-view></div>
<div class="footer">
<div class="container">
</div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/productInfo.js"></script>
</body>
</html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {templateUrl: "one.html"})
.when("/cats", {templateUrl: "two.html"})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
I am unable to get the message in paragraph 'Here are the cats' or 'Here are the dogs' on clicking the two links; these files are saved as one.html and two.html in the same folder.
I have downloaded and added the angular-route.js file in the same folder. Kindly help!
I have put controllers in routerProvider but it is not necessary, and adding it to it wont run! :(
You are forgetting to insert the controllers for your templates inside the object in when. See below:
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
templateUrl: "one.html",
controller: "cont1"
})
.when("/cats", {
templateUrl: "two.html",
controller: "cont1"
})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
If you're opening this html file directly in the browser, it won't work. This is because your template files will be loaded using AJAX. To make sure the user's data from one site cannot be fetched by a malicious other site, AJAX requests must adhere to the Same origin policy. The minute details of this policy are outside the scope of this answer, but it means that one site page can't make requests to another site. Files loaded directly from disk (loaded using the `file://' url scheme) don't have an origin so the cross origin policy check will always fail.
To solve this problem, put your files on a server, and try acessing them from there. If you're using a mac, you canuse Python's simple http server, which comes preinstalled on your mac. On windows, you can use mongoose.
When you use the minify-proof syntax for angular you pass the parameters as an array, so instead of:
config('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
});
you needed:
config(['$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
}]);
http://plnkr.co/edit/7NiWduPXCIKutSF243Hg?p=preview
I checked it out with Team. I just had to remove the controller from the top part of the code in Html file, and it would work fine.
<body ng-app="myApp" ng-controller="cont1">
should be turned to ...
<body ng-app="myApp">
Thanks buddies for helping me though!
Im playing with AngularJS for the first time, and im struggling to use ng-include for my headers and footer.
Here's my tree:
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Test</title>
<script src="/assets/js/vendor/angular.js"></script>
<script src="/assets/js/vendor/route.js"></script>
<script src="/assets/js/vendor/resource.js"></script>
<script src="/assets/js/main.js"></script>
</head>
<body>
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
</body>
</html>
main.js
var app = angular.module("app", ["ngResource", "ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
});
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
});
$routeProvider.otherwise({ redirectTo: '/home'});
});
app.controller("HomeController", function($scope) {
$scope.title = "Home";
});
home.html
<div>
<p>Welcome to the {{ title }} Page</p>
</div>
When i go on the home.html page, my header, nav and footer are not appearing.
You're doing an include of header.url instead of header.html. It looks like you want to use literals in the src attribute, so you should wrap them in quotes, as was mentioned in the comments by #DRiFTy.
Change
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
to
<div ng-include src="'partials/structure/header.html'"></div>
<div ng-include src="'partials/structure/navigation.html'"></div>
<div id="view" ng-view></div>
<div ng-include src="'partials/structure/footer.html'"></div>
If this is not working, check the browser console if there are any 404's
I had a similar problem with a simple ng-include not rendering:
<div ng-include="views/footer.html"></div>
I wrapped the file path in single quotes and it now renders:
<div ng-include="'views/footer.html'"></div>
i had a similar problem that landed me here.
ng-include was not populating the contents of my partial, but there were no console errors, nor 404's.
then i realized what i did.
fix for me: make sure you have ng-app outside of the ng-include! so obvious. the price of being an Angular noob.
I also came across this issue. And this is what worked for me.
So instead of writing this:<div ng-include="'html/form.htm'"></div>
You want to add ng-app="". So it should look like this: <div ng-app="" ng-include="'html/form.htm'"></div>
I was struggling with the same issue and have done almost all what was advised in different stacks but it didn't work for me. On Console, I was getting the Error:
"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
Later I realised, I have to use a local web server (MAMP, WAMP etc.) to make it work.
Please be careful of the above error message. Chances are you are not using a local web server to run you website.
I just figured this one out!
For me, I was using a CDN for importing my angular.min.js file that apparently wasn't working. I switched to:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
and included ng-app="" in my body tag:
<body ng-app="">
<div ng-include="'testfile.html'"></div>
and it's working fine now. Cheers!
Yes, without the '', ng would try to evaluate the contents inside the ng-include("")
This evaluation is another reason why you don't put {{}} inside these directives.
ng-include is not working in chrome as well as in explorer but works in Firefox, so this could be compatibility issues. To be sure, try generating the report in Firefox or Edge or another browser.
I Too had similar issue: Silly mistake was causing IT , I had below textArea
EG:
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" > `
Wasn't closed properly Corrected below :
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" ></textarea>
<div ng-switch="vm.frmDOA.isGenerateDebitNote">
<ng-include src="vm.showupload()"></ng-include>
</div>
Thought to post it may help any one I digged hours to solve ....
the ng-include file works for files fetched from the web server only (needs something like http://mywebsite/myinclude.html link).
It does not work if you fetch file from local folder directly (c:\myinclude.html will not work)
The ng-include directive should just work normal if you're viewing your file via some server (localhost or online) and NOT viewing your file directly under file system like (file:///yourpath/index.html).
This example from w3schools should work fine.