I'd like to understand how to load a view from a controller ?
Example, hypothetical:
myFile.html
<p>{{foo}}</p>
.controller("myCtrl", function(){
$scope.html = loadFileHere("My foo", "myFile.html");
console.log($scope.html);
});
I'd expect the output:
<p>My foo</p>
Is this possible to do ?
Thanks!
I am guessing you are talking about loading partials? You wouldn't really load a view with a controller, although MAYBE you could...I would use your routes to load a view. Your controller would return your scoped data to your partial view and then you would load it into an ng-view div or whatever. So for example...
in your app.js (or whatever you call it) assuming your myFile.html is in the same directory:
angular.
module('app', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/myFile', { templateUrl: 'myFile.html', controller: MyCtrl }).
otherwise({ redirectTo: '/' });
}]);
Then maybe in a controllers.js file:
function MyCtrl($scope) {
$scope.foo = "My foo";
}
And then in your myFile.html partial :
<p>{{foo}}</p>
And then your index.html file may look something like:
<!doctype html>
<html ng-app="app">
<head>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<div class="container">
<div ng-view></div>
</div> <!-- /container -->
</div>
</body>
</html>
Related
Here, I am unable to route, i have files in the same folder as 'consumpt.html'
'fulfillment.html'
<html>
<head>
<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="assets/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-3.3.7/js/bootstrap-3.3.7.min.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
Fulfill
Consumpt
<div class='col-xs-12 rmpm' style='height:auto;' ng-controller="viewForNavigation">
<div ng-view></div>
</div>
<script>
angular.module('myapp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/consumpt', {
controller: 'viewForNavigation',
templateUrl: 'consumpt.html'
});
$routeProvider.when('/', {
controller: 'viewForNavigation',
templateUrl: 'fulfillment.html'
})
});
</script>
</body>
</html>
I don't see any script tags which would load your controllers (they all look like 3rd-party dependencies). It looks like you still have to register your controllers with Angular:
angular.module('myapp').controller("viewForNavigation", ["dep1", "dep2", function(dep1, dep2) {
// Your controller code
}])
Also, you shouldn't need ng-controller in the view if you are putting it in the controller property of a route.
I'm trying to create a single page app with angularjs to which I'm very new. I've pieced together this code based on a number of tutorials, but it doesn't work and I'm not quite sure why. I'm not getting any errors that I can see. The intention is to have the home.html file load on the initial load. Then based on the routes, load in different templates.
script.js
angular.module("myApp", ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.when("/view", {
templateUrl: "/view.html",
controller: "ViewCtrl"
})
.otherwise({
templateUrl: "/home.html",
controller: "HomeCtrl"
});
}]);
angular.module("myApp").controller("ViewCtrl", ['$scope', function($scope){
$scope.message = "In the view";
}]);
angular.module("myApp").controller("HomeCtrl", ['$scope', function($scope){
$scope.message = "At home";
}]);
angular.element(document).ready(function(){
angular.bootstrap(document, ['myApp']);
})
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script data-require="angular-route#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="content" ng-app="myApp"></div>
</body>
</html>
home.html
<div ng-controller="HomeCtrl">
{{message}}
</div>
view.html
<div ng-controller="ViewCtrl">
{{message}}
</div>
http://plnkr.co/edit/eLZQueX3OyPCXo2tQGWS
Couple of mistakes in your code. Please look the below changes
1) Add ng-view directive for loading partial content
<div id="content" ng-app="myApp"></div>
should be
<div id="content" ng-app="myApp" ng-view></div>
2) Template url not starts with slash (/)
templateUrl: "/view.html",
templateUrl: "/home.html",
Should be
templateUrl: "view.html",
templateUrl: "home.html",
3) No need to bootstrap the app manually, ng-app automatically do this.
4) No need to mention the controller in router level if you mentioned in template (vice versa)
Working Demo: http://plnkr.co/edit/n19eCFwRc9WQUt6SskPU?p=preview
I have 4 files:
index.html
logic.js
controller.js
homepage.html
index.html
<html ng-app="sample">
<head>
<script src="angular.js"></script>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="controller.js"></script>
<script src="logic.js"></script>
</body>
</html>
logic.js
var myapp = angular.module('sample',[]);
myapp.config(function($routeProvider)
{
$routeProvider
.when('/',
{
controller:homepageCtrl,
templateUrl:'homepage.html'
});
});
controller.js
function homepageCtrl($scope){
$scope.name = "ROHIT";}
homepage.html
{{name}}
homepage.html is loading and being displayed correctly by the route but the controller is not being called here when homepage.html is loaded into index.html.
Kindly help me out with this.
Thanks
You didn't defined controller in HTML.
Add this line
<div ng-controller = "homepageCtrl">
Suppose it should be in homepage.html:
<div ng-controller = "homepageCtrl">
{{name}}
</div>
In addition, wrap your controller name with ' logic.js
[EDIT]
Add $inject to routeProvider:
myapp.config(["$routeProvider",
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: 'homepage.html',
controller: 'homepageCtrl'
});
}
]);
Controller name must be pass to $routeProvider as a string :
$routeProvider
.when('/',
{
controller:'homepageCtrl',
templateUrl:'homepage.html'
});
I am new to AngularJs.
In app.js I have the following
angular.module('module1', ['module2'])
.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'Controller1',
templateUrl: '/app/module/module1/partials/module1.html'
});
});
My module1 controller
angular.module('module1').controller('Controller1', function($scope) {
$scope.module1Name = "Module1";
});
In module2 folder I have Index.js
angular.module('module2', []).config(function($routeProvider) {
$routeProvider
.when('/test',
{
controller: 'Controller1',
templateUrl: '/app/module/module2/view/test.html'
});
});;
Module2 controller
angular.module('module2').controller('Controller1', function ($scope) {
$scope.module2Name = "Module2";
});
Here is my index.html
<html data-ng-app="module1">
<head>
<meta name="viewport" content="width=device-width" />
<title>Angular</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/App/app.js"></script>
<script src="~/App/module/module2/index.js"></script>
<script src="~/App/module/module2/controller/Controller1.js"></script>
<script src="~/App/module/module1/controller/Controller1.js"></script>
</head>
<body>
<div data-ng-view=""></div>
</body>
</html>
and module1.html
<div>
f4b view {{module1Name}}
<br/>
<a data-ng-href="#/test">Test page</a>
</div>
and test.html
<div>
Test view {{module2Name}} <br/>
<a data-ng-href="#/">f4b page</a>
</div>
when I start the application the module1 name is displayed but when I click the link all I see is "Test view" without module2
{{module2Name}} is not displayed...
Can someone tell me what am I doing wrong?
Thank you
Angular's $injector can't disambiguate between controllers that use the same name. One workaround is to manually namespace them:
angular.module('module1').controller('mod1.Controller1',
...
angular.module('module2').controller('mod2.Controller1',
jsfiddle
See also https://groups.google.com/d/topic/angular/SZMFAKfx1Q8/discussion
I am attempting to include multiple partial templates to be included in an ng-view, but the routeProvider directives are always trying to fetch the file from the server (not the embedded ng-template).
I have the following defined in my HTML:
<script type="text/ng-template" id="groupList.html">
<!-- contents -->
</script>
<script type="text/ng-template" id="participantList.html">
<!-- contents -->
</script>
<script src="js/app.js"></script> <!-- AngularJS app file -->
In my app.js file I have the following:
var myApp = angular.module('myApp', ['ngResource', '$strap.directives']);
// Update interpolateProvider for Django server
myApp.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
myApp.config(function ($routeProvider)
{
$routeProvider.when('/', {
templateUrl: '../static/views/home.html'
});
$routeProvider.when('/group', {
controller: 'GroupCheckInCtrl',
templateUrl: 'groupList.html'
});
$routeProvider.when('/group/:groupId', {
controller: 'GroupCheckInCtrl',
templateUrl: 'participantList.html'
});
$routeProvider.otherwise({
redirectTo: '/'
});
});
When ever I load the page, I get an error in my browser console:
GET http://127.0.0.1:8000/visitorLog/group/groupList.html 404 (NOT FOUND)
The AngularJS app section of my page looks like this:
<div ng-app="myApp" ng-controller="GroupCheckInCtrl">
<!-- other content -->
<ng-view>Loading...</ng-view>
</div>
What am I missing that is not allowing AngularJS to load my ng-template script directive?
make sure that the inline script tags are children of the element that has the ng-app="myApp" attribute. If the script tags are outside this element, it will not work. The easiest way to fix this is to add the "ng-app='myApp'" to the tag. Here is an example of what I mean:
<body ng-app="plunker" ng-controller="MainCtrl">
<script type="text/ng-template" id="groupList.html">
Group list html
</script>
<script type="text/ng-template" id="participantList.html">
Participants list html
</script>
<ul>
<li>group</li>
<li>participant</li>
</ul>
<div ng-view>
Loading...
</div>
</body>
Here is the relevant plunker: http://plnkr.co/edit/K1gMiLenRk0oPkzlGNjv