I am trying to create a simple views with angualrjs + ngRoute.
Why it doesn't work for me???
Please, can anyone look at my Plunker example, and explain to me what am I doing wrong?
my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Route training</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main_container">
<div class="inner" ng-app="app">
<div class="container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
</div>
</div>
<div class="inner" ng-app="views">
<h3>Views Menu</h3>
<ul>
<li>Back to HOME</li>
<li>Our Developers</li>
<li>Our Designers</li>
</ul>
<div ng-view></div>
</div>
</div>
</body>
</html>
this is app.js:
var app = angular.module('app', []);
var views = angular.module('views', ['ngRoute']);
views.config(function($routeProvider, $locationProvider){
$routeProvider.
when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
$locationProvider.html5Mode(true);
});
app.controller('MainController', function($scope) {
$scope.text = "Hello World!!!!";
});
views.controller('DevCtrl', function($scope) {
$scope.developers = [
{"name":"John", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Peter", "family":"Jones"},
{"name":"Alex", "family":"Volkov"},
{"name":"Yaniv", "family":"Smith"},
]
});
views.controller('DesignCtrl', function($scope) {
$scope.designers = [
{"name":"Inna", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Yafit", "family":"Jones"}
]
});
design.html:
<div id="designers" ng-controller="DesignCtrl">
<h3>Designers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="d in designers">
<td>{{d.name}}</td>
<td>{{d.family}}</td>
</tr>
</table>
</div>
and dev.html
<div id="developers" ng-controller="DevCtrl">
<h3>Developers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="dev in developers">
<td>{{dev.name}}</td>
<td>{{dev.family}}</td>
</tr>
</table>
</div>
thanks
The problem is incorrect usage of ng-app. Only declare ng-app once for your application, usually on the html element.
Then declare other modules as dependencies of your main module.
I put the ng-app declaration on the html tag and put your ng-routing in the app module, getting rid of the views module.
http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: '/index' });
// $locationProvider.html5Mode(true);
});
<html ng-app="app">
You can also put the view-logic in a separate module, but usually you will then also put it in a different file.
The html5mode is disabled because it triggered an error (it's a little bit tricky to make that work).
Note: it actually is possible to use multiple ng-app by manually bootstrapping them, but you really shouldn't do this unless you have a very good reason for it.
I think there is a problem way you declare the dependency within your app.js file and also console is complaining about $locationProvider.html5Mode(true);
If you want to declare the separate app you should do something like this
var app = angular.module('app', []);
var views = angular.module('views', []);
var mainApp = angular.module('mainApp', ['ngRoute','app','views']);
mainApp.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
//$locationProvider.html5Mode(true);
});
And here is the full working plunker http://plnkr.co/edit/LvPhShkkgTFQsFJ44Ggo?p=preview
Related
The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network.
The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.
When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder
**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?
Header Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
HTML
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</div>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateURL: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
Use templateUrl instead of templateURL.
In your html use #/main.
Don't use tow ng-views
JS code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
$scope.name = "world"
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
HTML code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<p>Hello {{name}}!</p>
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</body>
</html>
Here is working plunker
EDIT
Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')
So you need to add this in your config phase.
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
now it will work with angular 1.6.1 as well
.when('/main', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
or
use this url to access main page :
http://127.0.0.1/
It should work, as you have not set routing for main in config.
I've tried to get to know how to work with Angular but have no luck. I don't know what i do wrong.
Here is my index.html:
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>testAngular</title>
<link rel="stylesheet" type="text/css" href="core/css/style.css">
<script src="core/js/angular.min.js"></script>
<script src="core/js/angularRoute.min.js"></script>
<script src="Controllers/users.js"></script>
<script src="Services/router.js"></script>
</head>
<body>
<div class="container">
<p class="well">
Home
Users
Shop
</p>
<h3>Users</h3>
<hr class="vau">
<form>
<input class="form-control" type="text" ng-model="search">
</form>
<div ng-view=""></div>
</div>
</body>
</html>
Here is my router.js
'use strict';
angular.module('app', ['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'tpl/home.html'
})
.when('/users', {
templateUrl: 'tpl/users.html',
controller: 'userCtrl'
})
.when('/shop', {
templateUrl: 'tpl/shop.html'
})
.otherwise({ redirectTo: '/' });
});
Here is my users.js
'use strict';
angular.module('app', ['ngRoute'])
.controller('userCtrl', function($scope, $http){
$http.get('dataModel/users.json').then(function(res){
$scope.users = res.data;
});
});
and this is my users.html
<h3>Hello Users</h3>
<div ng-controller="userCtrl">
<table class="table table-hover">
<tr>
<th>pId</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
<th>Abteilung</th>
</tr>
<tbody>
<tr ng-repeat="user in users | filter:search">
<td>{{user.pId}}</td>
<td>{{user.fName}}</td>
<td>{{user.lName}}</td>
<td>{{user.email}}</td>
<td>{{user.abtelung}}</td>
</tr>
</tbody>
</table>
</div>
<p>hello Users</p>
I don't know why the controller is not working. thank you very much for any idea and help.
When you are doing this:
angular.module('app', ['ngRoute'])
You are creating a new module named app, and overriding any existing module with the same name.
Instead, create the module once like that, and on other files when you want to retrieve the model, do it like:
angular.module('app')
Im not sure where to place the partials folder holding the html views! I have placed it at the app root folder, in views and in public. Also tried removing the first trailing slash of the templateUrl but nothing. I also have tried(as view loading container):
<div ng-view></div>
<ng-view></ng-view>
<div data-ng-view></div>
<div ng-view=""></div>
<div ng-view="demoApp"></div>
This is just a learning example holding a module with 2 controllers and 2 views.
Here is the SPA(this page renders as rout '/' of a dancer(perl) project):
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title><% title %></title>
<link rel="stylesheet" href="/customised_bootstrap/css/bootstrap.css">
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/backbone/backbone.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/ng-tasty/ng-tasty-tpls.js"></script>
<script>
//define a module
var demoApp = angular.module('demoApp', ['ngRoute']);
//define routes for our module(each route will have its set of views and controllers)
demoApp.config =(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'simpleController1',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView1',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView1.html'
})
.when('/testAlexView2',
{
controller: 'simpleController2',
templateUrl: '/partials/testAlexView2.html'
})
.otherwise({redirectTo: '/partials/testAlexView1.html'});
});
//define a controller within our module 'demoApp'
demoApp.controller('simpleController1', function ($scope) {
$scope.customers = [
{name:'Boris', age:'18'},
{name:'Claudia', age:'28'},
{name:'Carlos', age:'39'},
{name:'Ben', age:'25'}
];
//var stuff ={};
});
demoApp.controller('simpleController2', function ($scope) {
$scope.customers = [
{name:'Alex', age:'18'},
{name:'Albert', age:'28'},
{name:'Anthony', age:'39'},
{name:'Loren', age:'25'}
];
});
</script>
</head>
<body>
<div>
<p>Main page of SPA test</p>
<div ng-view></div>
</div>
</body>
</html>
Here are the two identical views:
testAlexView1.html(testAlexView2.html is the same):
<div>
<input type="text" data-ng-model="name" /> {{ name }}
<br />
<ul>
<li data-ng-repeat="customer in customers | filter:name | orderBy:'age'">
{{customer.name}} - {{customer.age}}
</li>
</ul>
</div>
In the browser inspector, within the div where the view should load, all that appears is(both at root or root#/view.html):
<!-- ngView: -->
Batarang dosn't detect scopes nor modules neither. Thanks for any help!
There appears to be a typo in your config here:
demoApp.config =(function ($routeProvider) {
Instead try:
demoApp.config(function ($routeProvider) {
I configured a small angular app in tomcat its working fine, but when i tried to use route-Provider its not working.
I cannot route to my views.
I did not know why ?
Can any one give some small example for that.
My Code files
//this is controllers.js
var myapp = angular.module('sampleapp', []);
myapp.config('$routeProvider',function myRoute($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/admin.html',
controller: 'adminController'
})
when('/showdata', {
templateUrl: 'partials/data-view.html',
controller: 'dataController'
}).
otherwise({
redirectTo: '/'
});
});
adminController = function ($scope) {
$scope.message = "Welcome to Login Page";
}
dataController = function ($scope) {
$scope.message = "Welcome to Show Data Page";
}
myapp.controller(controllers)
my index.html
<html>
<base href="/advangularjs/" />
<head>
<link type="text/css" rel="stylesheet" href="css/default.css">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="demoweb_angular/controllers.js"></script>
</head>
<body ng-app="sampleapp" style="background-color: #E0EEE0">
Login |
Show Data
<div ng-view align="center" style="border: 1px solid red;">
</div>
</body>
</html>
admin.html
<b>{{ message }}</b>
data-view.html
<b>{{ message }}</b>
Make sure you have added angular-route.js
in your index.html file.
Also Please go through the documentation of ui router for the basic setup
var myapp = angular.module('sampleapp', ['ngRoute']);
u need to add ngRoute dependancy also. Because your sampleapp is depend on ngRoute .
<div ng-view></div>
you need to add this also. the partial are loading to this div. put this inside the body.
My code, as below, does not substitute the mg-view with the template from the route configuration.
I get {{message}} to be replaced by 'in controller', which shows the controller is alive, but nothing more happens.
View:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angularjs/angular.js"></script>
<script src="angularjs/angular-resource.js"></script>
<script src="angularjs/angular-route.js"></script>
<script src="app.js.html"></script>
</head>
<body class="appearanceOrange styleIOS">
<section ng-app="app" ng-controller="pageCtrl">
Current page '{{ message }}'
<div ng-view></div>
</section>
</body>
</html>
Controller:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/corporate', {
controller:'pageCtrl',
templateUrl:'corporate.html'
})
.otherwise({
redirectTo:'/corporate'
});
});
app.controller('pageCtrl', function ($scope) {
$scope.message = "in controller";
});
Partial:
<section
id="pageCorp"
class="page"
title="Corp France"
background="stripRoll"
style="text-align:center; display: block;">
<div style="padding:200px">
<a href="http://www.corp.fr/go/id/ceeq/" style="color: white">
<img src="rsc/corp.logo.svg" style="width:150px; margin: auto auto;background-color:white;"/><br/>
<span style="font-size:18pt;font-weight:bold">visit our Website</span>
</a>
</div>
</section>
Looks fine to me, as long as your template in corporate.html exists.
Here is a working fiddle.
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/corporate', {
controller: 'pageCtrl',
template: 'hi'
}).otherwise({
redirectTo: '/corporate'
});
});
app.controller('pageCtrl', function($scope) {
$scope.message = "in controller";
});
Edit: Here is another possibility to use the template, with $templateCache: jsfiddle
app.run(function($templateCache) {
$templateCache.put('corporate.html', 'This is the content of the template');
});
After hours of investigation, it comes that legacy javascript was breaking angularjs.
So be careful when converting (migrating) to angularjs, and try to deactivate your legacy javascript code first, prior to enter in a lengthly investigation period…
Thanks to everyone who helped me.