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
Related
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.
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>
My folder structure is:
-ngTest
--Scripts(all js files)
--index.html
--main.js
--partialView.html
index.html code is as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<meta charset="utf-8" />
</head>
<body>
<p>Hello world</p>
<div ng-view></div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js is :
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
partialView.html:
<div>
<p> From view</p>
</div>
What am I missing in this code?
If you want to load partialView.html as default you have to route to "/", not to "/home".
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
"/html" will be accessed if you link to it in your html file, for example with:
<a href=#/html>Link<a>
Your code looks good but missing something:
You need an anchor that make you go to /home, you can add it in the index file as follow:
Red
Then click the home anchor to make your partial view appear.
Or
In the router configuration modify the home to make it only "/", so the code will be as the following:
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
}).controller('newCtrl', function () {
console.log('finally');});
One last thing, if you're using angular latest 1.6.0, you have to add the following code:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');}]);
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');
}
})
});
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