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-').
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 really new to Angular (and plan to spend the whole week on it), and I'm following a tutorial on youtube and I think the guy who created it must have took a trip to another galaxy so there's no support anymore (but an awesome tut). I can't seem to get my home..html page to render to the browser and I'm at a total lost.
When I enter this URL manually:
https://chore-master-j-s-thomas-1.c9users.io/home
The error I get is: Cannot GET /home
So I'm thinking it has to be my routing.
this is my app.js page
var myApp = angular.module('myApp', [
'ngRoute']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/home', {templateUrl: '/partials/home.html', controller: 'homeController.js'});
$routeProvider.otherwise({redirectTo: '/home'});
$locationProvider.html5Mode({enabled: true, requireBase: false}); }])
And here is my index.ejs:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="lib/bootstrap/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home </li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<h3 class="text-muted">Chore Master</h3>
</div>
<p class='container' style="margin-left: 50" align="left" >text</p >
<!-- Main Container -->
<div class="container">
<div ng-view></div>
</div>
</div> <!-- /container -->
<!-- scripts to import for angularjs goes here -->
<scripts type="text/javascript" src="libs/angular/angular.js"> </scripts>
<scripts type="text/javascript" src="libs/angular-route/angular- route.js"></scripts>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"> </script>
</body>
</html>
and then my home controller:
myApp.controller('homeController', ['$scope', function($scope){
}]);
I'm really not sure what else will help besides my github but can anyone tell me what I have wrong and what angular parts do I need to study?
Here's my github repo:
https://github.com/J-S-Thomas/Chore_Master.git
You have some small typos when importing angular files:
<scripts type="text/javascript" src="libs/angular/angular.js"></scripts>
<scripts type="text/javascript" src="libs/angular-route/angular-route.js"</scripts>
should be:
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.js"></script>
Notice the html tag is script, not scripts. And the folder where you placed them is lib not libs.
There might be something wrong with your hosting. When I browse to https://chore-master-j-s-thomas-1.c9users.io/ your index page works ok. But when I attempt to access https://chore-master-j-s-thomas-1.c9users.io/libs/angular/angular.js I get the "cannot GET" error. Your site isn't loading any of your js libs so Angular isn't even launching.
Update: your Bootstrap css is under "lib", remove the "s" from the js libs script tags. Also note you have a typo in those tags where you also added an s.
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'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>