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>
Related
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
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'
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 trying to understand what's going on here. The warning is self explanatory, and I realize that in the app, with the code and structure I have below, it runs the ng-view twice ('test' will be logged twice in the console, so of course angular is loaded twice!)....but why?
I've read every post I could find about it, and it seems to boil down to jQuery being loaded before angular.
If I leave out jQuery or if I load jQuery after angualr (which isn't good practice from what I understand), no problem. I'd like to have jQuery to support some functionality (specifically ui-sortable). And, although it doesn't seem to be actually causing any problems, I'd like to not have it running my ng-view twice.
Am I doing something structurally wrong, or am I missing an obvious way to fix this?
Update: Plunker of the issue (check the console)
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site Title</title>
</head>
<body ng-view>
<script type="text/javascript">
console.log('test')
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script type="text/javascript" src="app_simple.js"></script>
</body>
</html>
app_simple.js:
'use strict';
/**
* Configure client module
*/
var myApp = angular.module('myApp',
[
'ngRoute'
]);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/simple', {
templateUrl: 'components/simple/simple.html',
controller: 'SimpleCtrl'
})
.otherwise({
redirectTo: '/x'
})
});
myApp.controller('SimpleCtrl', ['$scope', '$log', '$http', function($scope, $log, $http){
}]);
simple.html:
My simple content
Ok, to summarize the help from the comments:
If jQuery is included, any <script> tags included WITHIN an ng-view will be evaluated twice. (Thanks #lossleader!).
My incorrect assumption in testing was that it was processing the entire template content twice when I tried moving the ng-view off the body onto a <div> because I saw the log message twice. It wasn't!
<body>
<div ng-view>
<script>console.log('duplicated if jQuery');</script>
</div>
</body>
So #Tom and #Wawy both had correct solutions. Either move the ng-view into a <div> or move the <script> tags into the <head> (outside of the ng-view).
i have same issue, and i fix it by loading JQuery before i load AngularJS
hope that works for you
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.