My code:
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="js/components/appComponent.js"></script>
</head>
<body>
<foo callback="$ctrl.myCallback()"></foo>
</body>
</html>
appComponent.js
(function(){
'use strict';
var app = angular.module('myApp',[]);
app.component('foo', {
bindings: {
callback: '&'
},
templateUrl: '/js/components/appComponent.html',
controller: function () {
this.callback=function(){
console.log('Hello!');
}
}
});
})();
appComponent.html
<div ng-click="$ctrl.myCallback()">
Press me!
</div>
Why ng-click does not trigger $ctrl.callback()? Moreover, what callback="$ctrl.myCallback()" is supposed to do? I am afraid I have misunderstood its concept.
Related
has someone an idea, why :message always throws "undefined"? i call the page with "MyDomain.com/#AMessage"
ctrl.js:
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
templateUrl: "index.html",
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
index.html:
<!DOCTYPE html>
<head></head>
<body ng-app="AutApp" ng-controller="ctrl">
<div id = "test"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="ctrl.js"></script>
</body>
</html>
Thank you for your help!
You are not using ng-route properly. You must define a view. The template for the view cannot be index.html, as that page is the root of your application. Your controller should be associated with the route. More info on ng-route
<!DOCTYPE html>
<body ng-app="AutApp">
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
template: '<div id = "test"></div>',
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
</script>
Here is my very simple code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body>
<t-component test="test">
<div >
{{test}} John
</div>
</t-component>
<script>
angular.module('myApp', []).
component('tComponent', {
bindings: {
test: '='
},
controller: function() {
var self = this;
self.test='Hello';
}
});
</script>
</body>
</html>
I am getting Hello John only when using Angular 1.5.8. What do I have to do as to make the above to work with Angular 1.6.1? What am I missing?
I have this code working like that:
<t-component test="'test'"></t-component>
<script>
angular.module('myApp', []).
component('tComponent', {
template:'{{vm.test}} John',
bindings: {
test: '<'
},
controller: function() {
var self = this;
self.$onInit = function(){
// self.test ='hello'; //if you don`t want to use binding
}
},
controllerAs: 'vm'
});
</script>
<body>
<t-component test="'Hello'"></t-component>
<script>
angular.module('myApp', []).
component('tComponent', {
template: `
{{$ctrl.test}} John
`,
bindings: {
test: '='
},
controller: function() {
}
});
</script>
</body>
Then in controller you can change value of binding.
self.$onInit = function(){
self.test ='I am changed';
}
How to use window.onload function inside a controller.
window.onload= function() {
console.log("Hi Page loaded")
};
The controller is not applicable for the full page.
I want to execute a function after my controller loads at-least.
You can use ng-init and invoke your necessary function using the same directive
var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {
$scope.load = function() {
alert("Window is loaded");
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="DemoApp" ng-controller="akuaController">
<div ng-init="load()">
</div>
</body>
</html>
Changing the example from Angular $window
Your Controller
angular.module('windowExample', [])
.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
// This would be a starting point
$window.onload(greeting);
};
}]);
Your markup
<div ng-controller="ExampleController" ng-init="ExampleController.doGreeting()">
</div>
//inside your controller
$scope.$on('$viewContentLoaded', function() {
// write here
// either methods or variables
});
simple angular ui example not working. There are no errors in console.
Here is the example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<script>
window.onload = function ()
{
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('MainCtrl', function ($scope) {
});
myApp.config(function ($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/first");
// ui router states
$stateProvider
.state('first', {
url: "/first",
views: {
header: {
template: '<h1>First header</h1>',
controller: function ($scope) {
}
},
content: {
template: '<p>First content</>',
controller: function ($scope) {
}
},
footer: {
template: '<div>First footer</div>',
controller: function ($scope) {
}
}
}
});
});
}
</script>
<body ng-controller="MainCtrl">
<ul>
<li>First</li>
<li>Second</li>
</ul>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- Bootstrap core JavaScript + Angular Js
================================================== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
</body>
</html>
I have included all the resources using external cdn. The template content written in angular is not displayed. I am I doing it correctly?
Here is the plunker: Plunker
You have not mentioned app name anywhere in the view.
<html lang="en" ng-app="myApp">
Here is the working Plunker
Remove window.onload. Make sure the angular and ui-router scripts are loaded before your script. And add the missing ng-app="myApp" to the html element.
Plunkr: http://plnkr.co/edit/XaR3KD2hJ1jOVZ2mWi5H?p=preview
I have a quick question on loading external page with route. I am quite new to AngularJS.
var app = angular.module('app', []);
$routeProvider.when('/list', {
templateUrl: '/list.html'
})
Load up the page, but within the list.html there is controller defined.
list.html:
<script>
app.controller('test', function(){
console.log('test');
});
</script>
<div ng-controller="test">
</div>
The above code will throw me an error as test is undefined function, unless if i place the app.controller('test') to the parent page.
So i can't place controller on external .html files?
Updated link below:
http://plnkr.co/edit/YC6P9W1VfzX8XOyrynCP?p=preview
You have to create a separate script.js and should load in main html page during execution of main page or during click of the link
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="testscript.js"></script>
</head>
<body ng-controller="home">
<h1>Hello Plunker! {{change}}</h1>
Test
<ng-view></ng-view>
</body>
</html>
testscript.js
function test2($scope){
console.log('succeed');
};
script.js
// Code goes here
var app = angular.module('app', ['ngRoute']);
app.controller('home', function($scope){
$scope.change = "change";
$scope.test = function(){
console.log('clicked');
}
});
app.config(function($routeProvider){
$routeProvider.when('/test', {
templateUrl: 'test.html',
controller: function(){
console.log('here');
}
})
});