So I started out with AngularJS and I think it is amazing if you finally will master it, but for now I am really frustrated. I am trying to use routing. Everything works fine and there are no errors in the console, but Angular does not inject any content in my HTML :(. I am testing this on a localhost and the only thing angular does is adding a hash, like this: myAngularfolder/#/
Here is my code:
HTML
<!doctype html>
<html ng-app="app">
<head>
<title>AngularJS</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav>
<ul>
<li>Home
</li>
<li>Verhaals
</li>
<li>Info
</li>
</ul>
</nav>
<div id="container" ng-view="">
</div>
</body>
</html>
JS
angular.module("app", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateURL: '/partials/products.html'
})
});
Any ideas?
Change
templateURL: '/partials/products.html'
to
templateUrl: '/partials/products.html'
Related
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
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 am trying to start an angularjs project, however for some reason I can't seem to get it started correctly. It probably is some kind of mistake that I am to blind for to see. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebUX</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body ng-app="webux">
<section class="sidebar">
<nav class="page-nav">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</section>
<section class="content">
<div class="slide" ng-view></div>
</section>
<script type="application/javascript" src="js/lib/angular.min.js"></script>
<script type="application/javascript" src="js/lib/angular-route.js"></script>
<script type="application/javascript" src="js/main.js"></script>
</body>
</html>
And the javascript:
var app = angular.module('webux', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
}]);
app.controller('HomeCtrl', function($scope) {
console.log($scope);
});
Also the console log in the HomeCtrl does not get fired.
Update
Just to add some info:
Console is empty
All script files are correctly referenced
Ok, thank you all a lot for helping me out, however I found the solution. As you can see in my code example, I use <div class="slide" ng-view></div> to specify where the views should be rendered. After I inspected the element for a few times, I found that chrome stripped that empty property.
<div class="slide" data-ng-view does work (notice the 'data-').
I'm working on an app that uses the ionic framework. This in-turn uses the ui-router. Currently, I have a pretty basic two-page app. However, it will expand to be much larger. At this time, I get an error when I transition from my first view to my second view. The error says:
TypeError: Cannot read property '1' of null
at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:14235:28
at updateView (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37839:30)
at eventHook (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37786:17)
at Scope.$broadcast (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19725:28)
at $state.transition.resolved.then.$state.transition (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:31686:22)
at wrappedCallback (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18429:81)
at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18515:26
at Scope.$eval (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19441:28)
at Scope.$digest (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19267:31)
at Scope.$apply (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19547:24)
I am using 1.0.0 beta 3 of the Ionic Framework. My app.js file looks like this:
"use strict";
var myApp = angular.module('myApp', ['ionic', 'ngRoute']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', { url: '/', templateUrl: 'app/account/welcome.html', controller: 'WelcomeController' })
.state('login', { url: '/account/login', templateUrl: 'app/account/login.html', controller: 'LoginController '})
;
$urlRouterProvider.otherwise("/");
});
function WelcomeController($scope) {
}
function LoginController($scope) {
}
My index.html looks like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>MyApp</title>
<link rel="stylesheet" href="/vendor/ionic/release/js/ionic.bundle.min.js" />
<link rel="stylesheet" href="/css/app.css" />
<script type="text/javascript" src="/vendor/ionic/release/js/ionic.bundle.js"></script>
<script type="text/javascript" src="/vendor/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/app/controllers.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<h1 class="title">MyApp</h1>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</body>
</html>
welcome.html looks like this:
<ion-view>
<br /><br />
<h1>Welcome</h1>
<a class="button" href="/#/account/login">Login</a>
</ion-view>
login.html looks like this:
<ion-view>
<br /><br />
<h1>Login</h1>
</ion-view>
The view transitions just fine. However, the error I showed above concerns me. I'm afraid its going to bite me in the ass later. Does anyone know what would be causing this? Does anyone know how I can fix this?
Thank you!
If your using the bundle ionic.js file, you don't need to include ui-router, it already is included. You also don't need to include ng-router too.
Heres the codepen
ngRoute refers to the normal default router angular uses.
While you put that as your dependency, you cannot use the UI-router method, i.e stateProviders and the states.
In your case you have to remove ngRoute from your dependencies, or [ ]
var myApp = angular.module('myApp', ['ionic', 'ngRoute']); to
var myApp = angular.module('myApp', ['ionic']);
and then troubleshoot further since its a null value, something else is broken.
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>