The issue is that I have an index page, whith a(some) partial(s) view(s) that we can call "A.html" with a controller "ACtrl" assigned by $routeProvider, but inside that partial view, I would like to use a different controller for some divs using ng-controller to include a "A1Ctrl".
Is this possible?
Not focus on any code, but in the concept if this is barely possible and how?
I tried to include in the partial view something like this with no success:
A.html
... //Other stuff for this partial view
<div ng-controller="A1Ctrl">
{{message}}
</div>
... //More stuff for this partial view
I have included the .js where the A1Ctrl is defined to the index page with same result. Any tip?
UPDATE:
I have create in plnkr a sample code to show what I want to do: http://plnkr.co/edit/hdpLMK3DbzNdz2KeHPEB?p=preview
I have partial view generated after clicking "Say hi" which has its own template ("first.html") and controller, injected by the $routeProvider. But in that partial view in first.html I want to add a which has its own controller for only that section of code. But I can't make it work, any suggestion?
I also tried to use Dependency Injection to include the module "multilinguage" into router.js with no success because it seems to generate an error.
index.html
<html ng-app="plunker">
<head>
... //Other imports
<script src="app.js"></script>
<script src="router.js"></script>
<script src="multilanguage.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
Say hi |
Say bye
<br/>
<div ng-view=""></div>
</body>
</html>
first.html
{{message}}
<div ng-controller="MultiLang">
{{message}}
</div>
router.js
var app = angular.module('router', ['ngRoute', 'multilanguage']).
config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when("/first", {
templateUrl: "first.html",
controller: "EngLang"
}).
when("/second", {
template: "Bye man!"
});
});
app.controller('EngLang', function($scope) {
$scope.message = 'Hi guys';
});
multilanguage.js
angular.module('multilanguage', []).
controller('MultiLang', function($scope){
$scope.message = "Hallo, Hola, Ciao, Ni Hao"
});
Thanks in advance.
Yes, also you can use nested controllers, for example:
<div ng-controller="A1Ctrl">
{{ message }}
<div ng-controller="subCtrl">
{{ message }}
</div>
</div>
Related
I am new to AngularJS so any tips will be welcome as I'm still trying to wrap my head around how everything works.
The following controller houses other controllers inside of it, however I've shortened the code to replicate my problem without the inner segments (I'll have more bugs once I add that in).
This is my html section:
<div ng-app="app">
<div class="ng-cloak" ng-controller="mainController">
<a ng-class="{active: ('sectionHome' | routeSegmentStartsWith)}" href="#{{'sectionHome' | routeSegmentUrl}}">Home</a>
<div id="content" style="">
<div app-view-segment="0"></div>
</div>
<div id=loading class=alert ng-show="loader.show">Loading...</div>
</div>
</div>
And the javascript:
var app = angular.module('app', ['ngRoute', 'ngAnimate', 'route-segment', 'view-segment']);
app.config(function($routeSegmentProvider, $routeProvider) {
$routeSegmentProvider.options.autoLoadTemplates = true;
$routeSegmentProvider
.when('/Home', 'sectionHome')
.segment('sectionHome', {
'default': true,
templateUrl: '../templates/sHome.html',
controller: 'mainController'})
$routeProvider.otherwise({redirectTo: '/Home'});
}) ;
app.value('loader', {show: false});
app.controller('mainController', function($scope, $routeSegment, loader) {
$scope.$routeSegment = $routeSegment;
$scope.loader = loader;
$scope.$on('routeSegmentChange', function() {
loader.show = false;
})
});
I'm either missing something conceptual or some other big thing, since when I inspect the link it appears that the scope bindings are not set in the html document and I remain with "ng-class="{active: ('sectionHome' | routeSegment...".
I've tried editing the code in jsFiddle (http://jsfiddle.net/3boccdu6/) however there I'm receiving an error
"..[$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it.."
This would make sense but I'm really not sure what I'm doing wrong, I've been following this working example:
http://angular-route-segment.com/src/example/#/section3
Adding the following to your html will resolve the issue.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-resource.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.4.0/angular-route-segment.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js">
</script>
<script src="app.js"></script>
I am using angularJS in my grails application. Before that, i tried a sample from internet. I tried to use angularJS $routeProvider for the partial views in my main view. My workflows are as follows:
my main view is index.gsp:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="routeApplication">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add </li>
<li> Show </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
My partial views are: add_order.gsp and show_orders.gsp to show a sample message for each view.
my app.js is as follows:
var sampleApp = angular.module('routeApplication', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
var base = '${request.contextPath}';
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.gsp',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
Note: i created a templates folder and placed my parital views on that.
This problem is that, whenever i click to load my partial views it shows
`http://localhost/angularJSrouting/templates/show_orders.gsp`
404 Not Found
Am i missing something or is there any problem of placing the partial views?
I don't think this will work. Since your templateUrl is templates/show_orders.gsp angularjs will try to find that file inside templates folder in your webapp.
You have to redirect to
http://localhost/#/angularJSrouting/templates/show_orders.gsp url
can you use '/' instead of '#' in those html line
<li> Add </li>
<li> Show </li>
Everything worked fine until I tried to add routing. I read that Angularjs version 1.2+ requires 'ngRoute' as an dependency (I am using version 1.2.16). I added it but it still doesn't work. Below are my codes.
test.html (Main Page)
<html ng-app="demoApp">
<head>
<title></title>
</head>
<body>
<p>Front Page</p>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="testjs.js"></script>
</body>
</html>
testjs.js
demoApp = angular.module('demoApp',['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider.when('/', {
controller: 'SimpleController',
templateUrl: '/partials/first.html'
});
});
var controllers = {};
controllers.SimpleController = function ($scope){
$scope.first = "Info";
$scope.customers=[
{name:'jerry',city:'chicago'},
{name:'tom',city:'houston'},
{name:'enslo',city:'taipei'}
];
};
demoApp.controller(controllers);
first.html
<div>
<input type="text" ng-model="name"/>
</br>
{{first}}
</br>
<ul>
<li ng-repeat="cust in customers | filter:name">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
Here is the most basic setup possble, I'll try to make another one with your code:
http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview
EDIT updated with the sample code. Everything seems to be working?
EDIT 2 the problem is OP wasn't running a webserver. Ng-Route needs a webserver to function properly.
My routing wasn't working because there was an exclamation point inserted in the url when I tried to navigate to my routes. I added $locationProvider like this
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
to remove the exclamation point and my template views started appearing when I navigated to them. I found the answer here Exclamation mark after hash (#!) in angularjs app
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>
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