angularjs routing,am being mixed up with the real path - javascript

am new to angularJS routing. am folowing a simple tutorial on routing but no +ve results
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>angularJS routing</title>
<link type="text/css" rel="stylesheet" href="js/foundation.min.css">
</head>
<body>
<div ng-app="viewApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ng-view.js"></script>
</body>
</html>
ng-view.js
var app = angular.module('viewApp', []);
app.config(function($routeProvider) {
$routeProvider.when('http://localhost/eclipse_PHP_Workspace/AngularJS/', {
templateUrl : "ng-view-template.html",
controller : "viewCtrl"
});
});
app.controller('viewCtrl', function($scope) {
$scope.model = {
message : "Helo ng-view !"
}
})
in the ng-view file above($routeProvider.when('http://localhost/eclipse_PHP_Workspace/AngularJS/',), what does the path here realy mean .is it the application root folder or the server route folder coz all the tutorials am seeing even for john linquist he is using the server root folder.and is my path correct coz my angularJS app is in http://localhost/eclipse_PHP_Workspace/AngularJS/

$routeProvider.when paths refer to the client-side route only. So this:
$routeProvider.when('/', ...
would be equal to:
http://localhost/eclipse_PHP_Workspace/AngularJS/#/
Anything after the # will be the angular app's "route". Anything before the # is where the app lives on the server, which should never change in a single-page app.
This gets trickier if using html5mode, but this is the basic idea.

Related

Cannot get ng-controller to work in angular app

I've just started learning web development on my own, and I've run into an issue where either my entire app or just a controller just won't cooperate.
In prototype.js, I declare the app:
var cds = angular.module('cds', ['ngRoute']);
cds.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'appCtrl',
templateUrl: 'partials/login.html'
})
.otherwise({
redirectTo: '/'
});
});
cds.controller('appCtrl', ['$scope', function($scope) {
$scope.pageClass = 'page-login';
$scope.list = [
{name: 'One', description: 'I'},
{name: 'Two', description: 'II'},
{name: 'Three', description: 'III'},
{name: 'One More', description: 'Extra'}
];
}]);
In my HTML file:
<!DOCTYPE html>
<html ng-app='cds'>
<head>
<title>References</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/prototype.js"></script>
<style type="text/css">
#import url("styles.css");
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
</head>
<body ng-controller='appCtrl' onload="align()" onresize="align()">
{{ pageClass }}
<div ng-view></div>
<div id="dropdown">
<button class="drop-btn">Options</button>
<div class="dropdown-content">
<img src="img/header.menu.png">
</div>
</div>
</body>
</html>
For some reason, {{ pageClass }} won't even display the value I assigned to it in the controller, let alone ng-view elements. Before, I had followed a very old routing tutorial where the app was declared using just angular.module('myApp', ...), and all controllers made as individual functions independent from the angular app, and everything worked fine for me. However, after jumping from angular 1.0.7 to 1.5.8 (it's a long story, and a newbie mistake), I tried updating the style and cleaning my code up, and this is what happened. I feel like I'm missing something very basic here.
Edit:
Turns out I forgot to include ng-route. Derp. Now everything's working perfectly. Thanks all!
Looks like you're missing the ngRoute module. You can link to it through the CDN:
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js
Here's a fiddle with the added dependency.
hey be sure to include ngRoute, and maybe put the script includes at the bottom of body... got your fiddle to work by doing so

Structuring templates in an AngularJS SPA - are there performance issues when using ng-include a lot?

I was wondering what the best way to structure templates in an AngularJS SPA. So far I have kind of a rails approach, but I'm not sure if this is a good idea.
What I mean is that I for example have a /js/app/views/partials folder where I have snippets of html that are used in different places. This could be a form or a preview of content, basically everything that is used all over the app. I like this structure because let's say you have a comment form that appears in 5 different places and you want to add a field: Changing one file rather than 5 is much better.
I then for example have a /js/app/views/home.html template, that is referenced by my ui-router and loaded in ui-view in /index.html which only serves as layout.
/js/app/routes.js
myModule.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/js/app/views/home.html',
controller: 'MainCtrl',
resolve: {
// resolve code
}
});
}
]);
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<title><%= title %></title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='/css/style.css' />
<script src="/js/angularjs-1.3.16.min.js"></script>
<script src="/js/angular-ui-router-0.2.15.js"></script>
<script src="/js/app/app.js"></script>
<script src="/js/app/routes/routes.js"></script>
<script src="/js/app/services/services.js"></script>
<script src="/js/app/controllers/controllers.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
/js/app/views/home.html
<div class="page-header">
<h1>v2</h1>
</div>
<div ng-include src="'/js/app/views/partials/post-form.html'"></div>
<div ng-repeat="post in posts">
<div ng-include src="'/js/app/views/partials/post-preview.html'"></div>
</div>
So the ui-router is called with the home state and injects the /js/app/views/home.html in /index.html (at ui-view). home.html itself includes two partials /js/app/views/partials/post-form.html and /js/app/views/partials/post-preview.html.
The result are a lot of XHR requests for a single page load. That cannot be good for performance.
Is there a better way to do that? Or can I just not structure my views with so many partials and have to use fewer files and repetitive code?
My backend / server is NodeJS with Express. So maybe it would also be an option to do that server-side, using express partials.

ngRoute- direct url not displaying template

I'm newer to angular so I'm sorry if this is really obvious! I'm making a super basic app and right now all I want is when a user directly goes to a page it should always display the layout and the content. I am using angular's ng-route.
As of right now, if I go to localhost:8080/ it displays the layout(index.html) and content(view/home.html). If I click on the 'About' link, it goes to localhost:8080/about and displays the layout(index.html) and the correct content(view/about.html). Now if I type localhost:8080/about in my address bar, hit enter, I get a 404 error from my server's log. I'm not sure what I'm missing. Any input appreciated!
app.js
angular
.module('TestProject', ['ngRoute']);
routes.js
angular.module('TestProject')
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/contact', {
templateUrl: 'views/contact.html'
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
index.html
<!DOCTYPE html>
<html lang="en" ng-app="TestProject">
<head>
<meta charset="utf-8">
<title>Test!</title>
<base href="/">
<link rel="stylesheet" href="assets/styles/app.css">
</head>
<body>
<header><h1>Logo</h1></header>
<nav>
<ul class="main">
<li>
<div class="navBorder">
About
</div>
</li>
<li>
<div class="navBorder">
Contact
</div>
</li>
</ul>
</nav>
<div ng-view></div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="routes.js"></script>
</body>
</html>
I know I don't have any controllers yet, I just started this project and there's nothing there yet.
Here are how my files are organized:
My file structure is below:
/index.html
/app.js
/routes.js
/views/home.html
/views/about.html
/views/contact.html
If using AngularJS 1.3+, you need to include a notion of a <base href="" />. You can do this in your <head> tag as such
<head>
<base href="/">
...
From the docs
Before Angular 1.3 we didn't have this hard requirement and it was
easy to write apps that worked when deployed in the root context but
were broken when moved to a sub-context because in the sub-context all
absolute urls would resolve to the root context of the app. To prevent
this, use relative URLs throughout your app:
Additionally, without this <base /> tag, you can declare .html5Mode() as such... You'll need to take one of these two approaches.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Ahhh I figured it out, it was a problem with my server. I had not set up mod_rewrite for it to work properly. For the time being I turned off html5Mode() and everything works fine.

Failed to instantiate module myApp due to: Error: [$injector:nomod] http://errors.angularjs.org/1.2.26/$injector/nomod?p0=myApp

I'm trying to learn Angular and attempting to write my first controller outside of a web-based tutorial. I keep getting the error in the title in the JS console and can't figure out what's going on. The link takes me to a page referencing the need to include ngRoute, which I've done according to the API. Surely I'm missing something but I can't see what it is. Any help would be greatly appreciated, thanks!
index.html
<DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Angular Project</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="FirstController">
Did the controller load?
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})
Your issue is that you forgot to invoke the iife which registers module and controller.
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})();//<-- here
Link (in the error) talks about ngRoute as a hint only for one of the reasons your module might not have been available/instantiated when angular ng-app directive tried to bootstrap it. But in your case it does not even exists due to your failure to invoke the anonymous function as IIFE.

A simple angular js program to render different views is not working

Hi i am trying to write a simple Angular JS program but its not working
This is my html file:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title>SPA APP</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div data-ng-view=""></div>
<script src="my-module.js"></script>
<script src="my-controller.js"></script>
</body>
</html>
This is my-module.js file
var myApp=angular.module('myApp',[]);
myApp.config(function($routeProvider){
$routeProvider
.when('/',
{
controller:'myController',
templateUrl:'view1.html'
})
.when('/view2',
{
controller:'myController',
templateUrl:'view2.html'
})
.otherwise({redirectTo:'/'});
});
And this is my-controller.js file
myApp.controller('myController',function($scope){
$scope.name="varun";
});
Any help will be appericiated.
In order to use Angular router, you need to include ngRoute module, which is not shipped by default with angular.js file.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
And then you need to declare dependency:
var myApp = angular.module('myApp', ['ngRoute']);
Having done this, you can use $route service in controllers, directives, etc. and $routeProvider in config section to set up routes.

Categories

Resources