<head>
<script src=jquery.js></script>
<script src=bootstrap.js></script>
<script src=angular.js></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<link rel=stylesheet type="text/css" href=bootstrap.css />
<link rel=stylesheet type=text/css href=mystyle.css />
<style>
#panel{margin:20px;}
#addNew{margin:10px;}
#pagination{text-align:center;}
span{background:#aaa;width:60px;width:60px;}
</style>
</head>
<body ng-app="myApp">
<div ng-controller=myController>
<div id=panel class="panel panel-primary">
<div class="panel-heading">Hero Selection Bar</div>
<div class="panel-body">
Page 1
Page 2
Page 3
<ng-view > </ng-view>
</div>
</div>
</div>
<script>
var app = angular.module('myApp',['ngRoute']);
app.controller('myController', function( $scope, $routeProvider){
$scope.somedata = "THAT";
});
app.config([$routeProvider],function($routeProvider){
$routeProvider
.when('#/one', {templateUrl:"templates/one.html"})
.when('#/two', {templateUrl:"templates/two.html"})
.when('#/three', {templateUrl:"templates/three.html"})
});
</script>
</body>
I have kept the files on templates/one.html, templates/two.html, and templates/three.html in 'templates folder' but I am unable to get the pages load in current angularjs page. Can someone help me out in getting the routes load the required pages.
There are couple of things your are doing wrong:-
1)# in when not required it should be like .when('/one', {templateUrl:"templates/one.html"}) etc.
2)Array notation must be end at the end ['$routeProvider'] not correct
It should be like :-
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/one', {templateUrl:"one.html"})
.when('/two', {templateUrl:"two.html"})
.when('/three', {templateUrl:"three.html"}).otherwise({redirectTo:'/one'})
}]);
3)$routeProvider not required in controller use $route.
4) I guess use otherwise it also required (It is optional).
Plunker
You added [$routeProvider] which has ] which should be closing bracket of dependency.
Config
app.config([$routeProvider,function($routeProvider){
$routeProvider
.when('/one', {templateUrl:"templates/one.html"})
.when('/two', {templateUrl:"templates/two.html"})
.when('/three', {templateUrl:"templates/three.html"})
}]);
Inside controller you can not inject $routeProvider dependency it should $route
Related
I'm learning Angularjs and this is my first code, but i can't find the bug, ng-view doesn't show data. I don't know how to debug mi code.
Please somebody can help me to show data using ng-view?.
This is my code:
Index.html
<!DOCTYPE html>
<html ng-app="FinalApp">
<head>
<title>AngularJS</title>
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.css">
<link rel="stylesheet" type="text/css" href="css/lumx.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>-->
<script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
<!--<script src="https://code.angularjs.org/1.4.0-beta.5/angular-route.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular-parse-ext.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/lumx.js"></script>
</head>
<body>
<nav>
<div class="bgc-black-1 tc-white" flex-container="row" flex-align="center center">
<div flex-item="4">
<h1 class="fs-display-3 display-block">Posts App</h1>
</div>
<div flex-item="1">
Inicio
</div>
<div flex-item="1">
Crear Post
</div>
</div>
</nav>
<div flex-container="row" flex-aling="center">
<div ng-view flex-item="9"></div>
</div>
</body>
</html>
and the controller is
angular.module('FinalApp')
.controller('MainController',function($scope,$resource){
Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
$scope.posts = Post.query();//agrupamos los posts
});
Home.html
<lx-tabs>
<lx-tab heading='Posts'>
<div class='p+'>
<div class='card' ng-repeat='post in posts'>
<div class='p+'>
<strong class='fs-headline display-block tc-red-900'>
{{post.title}}
</strong>
<div class='paragrah fs-body-1 mt+'>
{{post.body}}
</div>
<div class='card_actions'>
<a href='#'>Leer mas</a>
</div>
</div>
</div>
</div>
</lx-tab>
<lx-tab heading='Users'>
<div class='p+'>
hello world users
</div>
</lx-tab>
</lx-tabs>
App.js
angular.module('FinalApp',['lumx','ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/',{
controller: 'MainController',
templateUrl: 'templates/home.html'
})
});
Finally i'm using LumX for make the front end of the application and the version of LumX is v1.5.31
First the working demo, you can find it in the below link!
JSFiddle Demo
I checked your code, there are only some minor corrections.
Instead of defining angular.module('FinalApp') differently in different files, try following a syntax like this.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
app.controller('MainController',function($scope, $resource){
var Post = $resource('https://jsonplaceholder.typicode.com/posts/:id',{id:'#id'});
console.log(Post.query());
$scope.posts = Post.query();//agrupamos los posts
});
So you define it only once and assign it to a variable, which can be used anywhere in the project, like shown in the above code. Thus the dependencies are always available to all the controllers!
In order to use $resource of angular, you need to include the file angular-resource.min.js and also, after including the file you need to add it to the module dependencies.
var app = angular.module('FinalApp',['ngResource','lumx','ngRoute']);
There is also one minor suggestion I would like to make. It's that the tabs don't have a label. you can define them like so.
<lx-tab heading='Users' lx-label="Users">
<div class='p+'>
hello world users
</div>
</lx-tab>
I am using templates in the script tag to create the different pages for the router, you can use the normal method itself, so you
need to ignore the changes I have made in config section, I mean the below part.
app.config(function($routeProvider){
$routeProvider.when('/',{
controller: 'MainController',
templateUrl: 'home.html'
})
});
Please let me know if it still shows errors, Happy Coding!
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
This code is virtually verbatim from egghead.io, but it is not working at all unless I remove ="app" and remove the ng-controller attribute from the <body> element. (And of course the last <script> element gets ignored in the process—the code that would normally be in app.js.) Of course removing those bits prevents anything else from working or being added.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="http://code.angularjs.org/angular-ui-router-1.0.0.min.js"></script>
<script>
angular.module('app', ['ui.router'])
.controller("FirstCtrl", function FirstCtrl() {
var first = this;
first.greeting = "First";
});
</script>
</head>
<body ng-controller="FirstCtrl as first">
<div>
<input type="text" ng-model="first.greeting" placeholder="First Name">
<hr>
<h1>{{ first.greeting }} World!</h1>
</div>
</body>
</html>
Here's similar code on JSFiddle. (It's only similar because JSFiddle imposes constraints that make it impossible to post identical code. It has the same problem, so I assume the differences are insignificant for tracking down the source of the bug.)
Where is the bug? Why is this not working?
With latest angular dependency it worked for me.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script>
angular.module('app', ['ui.router'])
.controller("FirstCtrl", function FirstCtrl() {
var first = this;
first.greeting = "First";
});
</script>
</head>
<body ng-controller="FirstCtrl as first">
<div>
<input type="text" ng-model="first.greeting" placeholder="First Name">
<hr>
<h1>{{ first.greeting }} World!</h1>
</div>
</body>
</html>
You are using angular ui-router but not using it the way you are supposed to be. Check the documentation here to get a clearer idea. Angular UI router loads its contents in a container containing ui-view attribute. As per documentation
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in Angular core, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
You need to load different states in your ui-view and also pass values in different states in the process. You need to add dependencies for $stateProvider and $urlRouterProvider in your app config for a completely functional angular ui router implementation. This being told what you need to do is like below -
And also check out the working example in PLUNKER
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html",
controller: function($scope) {
$scope.greeting = "First";
}
})
})
</script>
</body>
</html>
I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project index file is loaded in browser that is working fine but when i click on nav bar links then about and contact page is not displayed it's remains on index.html.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
<!-- start menu -->
</head>
<body>
<div header-table></div>
<div class="content" ng-controller = "myAppCtrl">
<div class="container" >
<div ng-view></div>
</div>
</div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'code/index.html',
controller : 'myAppCtrl'
})
// route for the about page
.when('/about', {
templateUrl : 'code/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'code/contact.html',
controller : 'contactController'
});
});
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myAppCtrl.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myAppCtrl.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
any guide thanks.
Like some people allready mentioned, you should deffinitly read the docs and probably watch some tutorials. I'm trying to see what you are doing, but it's not clear to me.
But I think I see where it goes wrong in your thoughts:
You have 3 'templates' index.html, about.html and contact.html. In your config You use them in your routing. By watching your files my guess is that you are expecting that, depending on the route, these html-files will be loaded. Just like when redirecting to that page.
What you should do is make a index.html with the html You use on every page. this can be the <head></head> only, but can also contain your header with navigation and footer. Then you use <ng-view></ng-view> or <div ng-view></div> where you want the templates to load in your page. These templates don't need to contain the parts you allready defined in your index.html. You have only the content in it.
So, a simple example:
index.html
<html>
<head>
//loading your scripts etc.
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Than, instead of creating a template called index.html, you make a template home.html with the content:
<div class="container">
<h1>My Home</h1>
</div>
Now the contentpart from your home.html will load in your index.html where you define de ng-view.
An other thing I noticed is the path you define in templateUrl. You define the location as code/about.html. You have to give it the path from your index.html (the main html) In your case that will just be templateUrl: 'about.html'.
I would suggest putting the different files in different folders. So, one for your templates, one for your js-files (probably a js-folder with another folder in it for your js-file with directives etc.).
I hope this will help you on your way. But deffinitly read the docs and watch some tutorials. It will help you a lot.
I am receiving the following error:
Argument 'mainController' is not a function, got undefined
Which is strange because the code worked before I started adding pages and content to the app.
HTML
<!DOCTYPE html>
<html lang="en" id="top" ng-app="myApp">
<head>
<title>Website</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/main.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-controller="mainController">
<div class="menu">
<ul>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
<div class="wrapper" ng-view></div>
</body>
</html>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/dashboard.html',
controller : 'mainController'
})
// route for the settings page
.when('/settings', {
templateUrl : 'pages/settings.html',
controller : 'settingsController'
});
});
I started my code from a template.
You're confusing referencing a controller instance in your html (which binds it) to actually creating your controller within your application.
Declare it off of your root app module.
myApp.controller('mainController', ['$scope', function ($scope) {
}]};
In addition, since you're declaring a template and a controller pair, you cannot bind your controller on the body element. You should instead bind it within it's respective template.
<div class="menu" ng-controller="mainController">
<ul>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
If you absolutely want it to be bound to the body element, remove it from your routing declaration.