My scripts are :
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My Application</title>
</head>
<body>
<div ng-view></div>
<script src="/assets/vendor/angular/angular-1.2.16.min.js"></script>
<script src="/assets/vendor/angular/extras/angular-route.js"></script>
<script src="/assets/myapp/myApp.js"></script>
</body>
</html>
myApp.js
(function () {
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: '<h1>Home</h1>',
controller: function () {
console.log('Home');
}
}).
when('/books', {
template: '<h1>Books</h1>',
controller: function () {
console.log('Books');
}
});
$locationProvider.html5Mode(true);
console.log('routes configured');
}]);
})();
I've wasted a lot of time trying to figure out what the problem might be with no luck. Am I missing something silly? thanks in advance for the help.
Are you hosting your application in the root of your server? If not, then you will need to use the tag below in your head tag.
<base href="PATH_HERE" />
In addition, can you comment out the $locationProvider.html5Mode(true) line and get your app working in hash routing mode first?
Just a question, but it is possible to add a function in the controller -> controller:function()? Because normally i would do it like this. controller:'mainController' and put the function in the mainController.
Related
Because the UI-Route cannot work with directive (it has the unbreakable isolated scope) and cannot fit my scenario, I'm testing to remove the UI-Route and go for ngRoute. I spent a day on the ngRoute and it still did not work. I think there must be some subtle mistake in my code but I just cannot figure it out. The simplified test code is as bellow:
<html lang="en" ng-app="Hello" ng-strict-di>
<head>
<title>Hello</title>
<script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
<script>
'use strict';
angular.module('Hello', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'hello.html',
controller: 'Ctrl1'
}).otherwise({
redirectTo: "/"
});
}])
.controller('Ctrl1', ['$scope', function ($scope) {
$scope.content = 'Hello World!';
}]);
</script>
</head>
<body>
<div>
<h1>Demo</h1>
click me
</div>
<ng-view></ng-view>
<script type="text/ng-template" id="hello.html">
<p>{{content}}</p>
</script>
</body>
</html>
Really appreciate if you may help me out.
You have to use click me since you are using angular 1.6.x. You have to append an exclamation mark ! to your href.
For more reference: Angular All slashes in URL changed to %2F
My folder structure is:
-ngTest
--Scripts(all js files)
--index.html
--main.js
--partialView.html
index.html code is as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<meta charset="utf-8" />
</head>
<body>
<p>Hello world</p>
<div ng-view></div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js is :
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
partialView.html:
<div>
<p> From view</p>
</div>
What am I missing in this code?
If you want to load partialView.html as default you have to route to "/", not to "/home".
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
})
}).controller('newCtrl', function () {
console.log('finally');
});
"/html" will be accessed if you link to it in your html file, for example with:
<a href=#/html>Link<a>
Your code looks good but missing something:
You need an anchor that make you go to /home, you can add it in the index file as follow:
Red
Then click the home anchor to make your partial view appear.
Or
In the router configuration modify the home to make it only "/", so the code will be as the following:
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partialView.html',
controller: 'newCtrl'
}).controller('newCtrl', function () {
console.log('finally');});
One last thing, if you're using angular latest 1.6.0, you have to add the following code:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');}]);
I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).
I believe that I'm missing something trivial here. Please help me figure it out.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
<div ng-app="navbar">
<nav-bar></nav-bar>
</div>
<div ng-app="kscapp">
<ul>
<li> Home </li>
<li> Contact </li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
kscapp.js
//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);
//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}).
when('/Contact', {
templateUrl: 'templates/contact.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
sampleApp.controller('HomeCtrl', function($scope) {
console.log('inside Hc');
});
sampleApp.controller('ContactCtrl', function($scope) {
console.log('inside Cc');
});
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.
You don't inject the ng route module.It should be
var sampleApp = angular.module('kscapp',['ngRoute']);
You are using different versions for Angular.min.js and Angular-route.min.js.
update your angular-route from 1.2.9 to 1.3.8
Also inject 'ngRoute' to kscapp module.
You can only use 'ng-app' once in your application.
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
For more on ngApp, read ngApp API.
I have
<!DOCTYPE html>
<html lang="en" data-ng-app="myCustomApp">
<body>
<div id="body">
<div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="/Js/app.js"></script>
<script src="/Js/controllers/controllers.js"></script>
</body>
</html>
With the following
app.controller('SearchController', function ($scope) {
init();
function init() {
alert("called");
}
});
and the app declared like below:
var app = angular.module('myCustomApp', []);
app.config(function($routeProvider) {
$routeProvider
.when('/search',
{
controller: 'SearchController',
templateUrl: '/js/partials/Search.html'
})
.otherwise({ redirectTo: '/search' });
});
The problem is that the page when browsing to the following it keeps refreshing the page like it's in a loop. Any ideas?
/#/search
var app = angular.module('myCustomApp', ['ngRoute']);
Routing is not native in angular you need to add it in as a module.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js
This is the CDN for the script for it. I'd really suggest having a look at ui-router works very similarly but uses state or states to manage either the view or sections of the view.
https://github.com/angular-ui/ui-router
The documentation is really good and there are some great examples around.
I have recently started learning angularJS and ran into an issue with ng-view directive. Apologies if this question is too naive.
This is my index.html file. As you can see, I am using ng-view directive to abstract out some html code from index.html file.
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>My first app!</title>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"> </script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
This is my app.js file. I am using the same partial template for all the urls.
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/searchbox.html', controller: PhoneListCtrl}).
otherwise({templateUrl: 'partials/searchbox.html', controller: PhoneListCtrl});
}]);
and this is my searchbox.html
<div id="container">
<input type="text" name="s" id="s" float-up="{perspective: '100px', x: '150%'}"/>
</div>
and finally this is my directives.js file:
'use strict';
var myAppModule = angular.module('phonecat', []);
myAppModule.directive('floatUp', function() {
return {
// Restrict it to be an attribute in this case
restrict: 'A',
// responsible for registering DOM listeners as well as updating the DOM
link: function($scope, element, attrs) {
console.log("test successful");
}
};
});
When I run this in the browser, the link function of my floatUp directive is never invoked.
When I see the rendered html of my index.html page, I get this (Note that ng-view didn't substitute the searchbox html):
<!DOCTYPE html>
<html class="ng-scope" lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>My first app!</title>
<script src="lib/angular/angular.js">
<style type="text/css">
<script src="js/app.js">
<script src="js/directives.js">
</head>
<body>
<div ng-view=""></div>
</body>
</html>
Other observations:
When I remove the directives.js from the index.html file ng-view works perfect and searchbox shows up fine.
When I copy paste the searchbox.html content to the index.html file, the link function is invoked properly.
Is this a known issue? Do custom directives mess up with ng-view and make it futile. I assure you I did extensive googling before posting my question here but couldn't find any appropriate answer.
Move this line from the directives.js
var myAppModule = angular.module('phonecat', []);
to the top of app.js
That way you're always working with the same angular module instance instead of creating new instances of it.
All your controllers, directives, and configs will then be myApModule.controller (or .config, or .directive)
Also in the app.js the references to controller in the routes should be strings controller: 'PhoneListCtrl' as PhoneListCtrl is not defined yet.
Your controllers.js wasn't provided but could look something like this:
myAppModule.controller('PhoneListCtrl', ['$scope', function($scope) {
//Controller code here
}]);
apps.js would now look like this:
myAppModule.
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/searchbox.html', controller: 'PhoneListCtrl'}).
otherwise({templateUrl: 'partials/searchbox.html', controller: 'PhoneListCtrl'});
}]);