i want to make route with angularjs. but when i run my app, ng-view doesnt show anything. i'm new in angularjs.
index :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD</title>
</head>
<body ng-App="myAPP">
<a href='#/'/>List</a>
<a href='#/addData'/>Add Data</a>
<div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="controller/controller.js"></script>
</body>
</html>
app.js :
var app=angular.module('myAPP',['ngRoute']);
route.js :
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{
templateURL : 'crud/pages/list.html',
controller : 'controller'
})
.when('/addData',{
templateURL : 'crud/pages/coba.html',
controller : 'controller'
})
.otherwise({
redirectTo : '/'
})
}])
You have not closed the js/angular-route.js tag
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
DEMO
You have written templateURL instead of written templateUrl. Other than that everything is fine.
And Please close the brackets <script></script>
templateURL --> templateUrl
You should probably add all your script tag inside your head tag that would make it work and close the script tag too.
check here for source code, cool to understand
https://github.com/umakantmane/single-page-app
Related
i use angularjs module ngAnimate but this does'nt work why i use the same reference for angularjs.org
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-animate.js"></script>
<link rel="style" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="content" ng-controller="PrintCtrl">
<h4>{{title}}</h4>
<p>it's sample content welcome admin in your website</p>
</div>
</body>
var app = angular.module('app', ['ngAnimate']);
app.controller('PrintCtrl',['$scope',function($scope){
$scope.title = "The title";
}]);
I noticed your css tag is linked with rel="style". It should be stylesheet instead of style. If your css is working fine, I think the animate should work
I'm using ng-include to include a navbar. In combination with ng-app="" it works fine.But when I use a name (e.g. ng-app="myApp") then it doesn't work anymore. See example.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<div ng-app="">
<div ng-include="'pages/navbar.html'"></div>
<script src="app.js"</script>
</div>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
});
This above works fine, but when I insert the name "myApp" it stops including the navbar.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<div ng-app="myApp">
<div ng-include="'pages/navbar.html'"></div>
<script src="app.js"</script>
</div>
</body>
</html>
Why?
You have a typo here
<script src="app.js"</script>
It should be
<script src="app.js"></script>
As long as this loads after angular.js then your application should be able to find the declaration of the myApp module (which you've asked it to by using ng-app="myApp"
Check in the browser console for any errors - if the script isn't loaded you will see an error like cannot find module
I believe you have missed including your app.js file in a proper style.
are you getting any error in console?
Edited
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<div ng-app="myApp">
<div ng-include="'pages/navbar.html'"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Sorry I have searched high and low for HOURS!!!
It is very hard to explain but basically my $scope from introController is appearing in the partial that it is connected to by route, but not appearing in the index.html file which has ng-route. I want to add a header to my index.html containing the name which is stored in $scope.name but I am really having trouble, it's probably something simple but I am absolutely stuck, I think I need somebody else to stare at the code, I've done it all day :(
(function(){
var app = angular.module('appMod', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'introController',
templateUrl: 'app/partials/intro.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('introController', function($scope) {
$scope.name = "";
$scope.formHide = "";
});
})();
<!DOCTYPE html>
<html ng-app="appMod">
<head>
<link rel="stylesheet" type="text/css" href="content/css/normalize.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/style.css">
<link rel="stylesheet" type="text/css" href="content/css/animation.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-timer.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<img src="content/images/sitelogo.png" class="logo">
<h2 class="welcomeMessage fade" ng-show="formHide == 'True'">Welcome <span class="fade" ng-show="!name == ''">{{name}}</span><span class="inline fade" ng-hide="name !== ''">Friend</span> <small>(We like to get personal!)</small></h2>
</div>
</div>
<div ng-view></div>
</body>
</html>
The controller specified with your route is only scoped to the content located in the ng-view. You can read about this in the Experiments section of this tutorial.
You could create a new controller for your header, say headerController and add this controller to your header with ng-controller="headerController".
On a side note, I suggest to use the controller as syntax. It will allow you to manage different controllers and remember what's where easily. It also enable you to avoid most, if not all, prototypal inheritance masking primitives issues.
Your introController is only bounded to <div ng-view></div> for app/partials/intro.html so anything bind to $scope is only visible inside the ng-view.
Now instead of binding name with $scope bind it with $rootScope like
$rootScope.name="yourname" it is available for complete application.
Plunker http://plnkr.co/edit/xgQ5R4N9ayV9XMCRT0GP?p=preview
i have this files under my project and i'm encountring some trouble loading them with ajax and applying angular , here is the plunk :
http://plnkr.co/MxXzlenAuGcDy8iljKYX
the problem is that the content of sidebar.html get loaded and the controller gets executed correctly but for products.html the content only gets loaded and the controller doesn't get executed.
i am using this under chrome and i don't get any errors in my localhost console
I put together a modified version of your plnkr to show how I would approach this in general with Angular and dropped out jQuery since it wasn't necessary here:
http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="category.js"></script>
<script type="text/javascript" src="products.js"></script>
</head>
<body ng-app="myApp">
<div ng-include="'sidebar.html'"></div>
<div ng-view></div>
</body>
</html>
JS
// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/products/:prodId",{templateUrl:"products.html"})
.when("/products",{templateUrl:"products.html"})
.when("/", {templateUrl:"home.html"})
.otherwise({redirectTo:"/"});
})
I'm learning Angularjs and I'm doing the tutorial from http://angularjs.org/, but I'm unable to get what I want. I have a simple page, index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Home</title>
</head>
<body>
<ul>
<li>Hello World</li>
<li>Tasks</li>
<li>Projects</li>
</ul>
</body>
</html>
I want that when I click on projecst.html my url shows something like http://localhost:8080/Application/projects or http://localhost:8080/Application/#/projects or http://localhost:8080/Application/#!/projects or whatever, but I don't want that it shows http://localhost:8080/Application/projects.html
I've been testing with $routeProvider, $locationProvider and $location, but I don't undestand very well how they work, Can anybody explain it to me? Can anybody help me with this issue?
More information:
projects.html:
<!DOCTYPE html>
<html ng-app="project">
<head>
<title>AngularJS | Projects</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
<script type="text/javascript" src="http://firebase.github.io/angularFire/angularFire.js"></script>
<script type="text/javascript" src="js/projects.js"></script>
</head>
<body>
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>
project.js:
angular.module('project', ['firebase']).
value('fbURL', 'https://angularjs-projects.firebaseio.com/').
factory('Projects', function(angularFireCollection, fbURL) {
return angularFireCollection(fbURL);
}).
config(function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'list.html', controller:ListController}).
when('/edit/:projectId', {templateUrl:'edit.html', controller:EditController}).
when('/new', {templateUrl:'edit.html', controller:NewController}).
otherwise({redirectTo:'/'});
});
Thanks in advance!
Greetings.
You should define the URL using the $routeProvider http://docs.angularjs.org/tutorial/step_07 . don't point your href to *html. point them to the urls you defined.
then you can also configure the $routeProvider to be either in HTML5 mode or in hashbang (default) mode-
You can fix this using "index.html" as your host page and deploy on a real webserver.
You could also configure your webserver to accept "projects.html" as an index file or welcome file.
You then setup routing in your angular application like so:
var app = angular.module('app', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/projects', {
templateUrl: 'partials/project-list.html',
controller: 'MyCtrl'
});
}]);
Make sure to link to that in a correct way, so your html should be
<li>Projects</li>