newbie to AngularJS here.
I created one AngularJS application using Yeoman, grunt and bower.
The index page contains some style and ng-app and ng-view.
index.html
<html>
<head>
<!-- CSS Imports -->
</head>
<body ng-app="MyApp1">
<div>
//Some divs here to have some styles
<div ng-view></div>
</div>
</body>
<!--importing AgularJS, app.js, controller JS files -->
</html>
app.js
'use strict';
angular.module('MyApp1', [])
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
redirectTo: '/main'
})
.when('/invoice', {
templateUrl: 'views/invoice.html',
controller: 'UploadController'
})
.when('/main', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
})
.otherwise({
redirectTo: '/main'
});
// $locationProvider.html5Mode(true);
});
angular.module('LoginApp', [])
.config(function ($routeProvider,$locationProvider) {
});
The index page has ng-view that will display invoice.html or main.html. Default is main.html.
main.html
<div class="hero-unit">
<a ng-href="views/login.html" target="_self">Login</a>
<br>
<a ng-href="#invoice">New Document</a>
</div>
Ok. In this main.html, I have two links. Second is a link to invoice. That anyway will display inside index.html ng-view. The controller UploadController belongs to MyApp1 module. And it has separate JS file. It is working fine.
The first link is to another HTML page. Its login.html. It has another ng-app called LoginApp. Both the modules are independent and in diferent pages.
When I click on the first link, it goes to login.html. But in the URL it shows like http://localhost:9000/views/login.html. But I want it to be shown like http://localhost:9000/login, just like for other main.html (http://localhost:9000/#/main). When I edited the link like <a ng-href="#login">Login</a> it is not working.
And also $locationProvider.html5Mode(true); is not working for me.
Put the login.html to same folder like index.html.
I think it's not possible to route to another module. However this route rule for login.html will not working for (external) page.
Related
Having an issue where angular doesn't seem to be working at all in my app.
Trying to run a message on index page with mainController, and won't even run this.
JSFiddle: https://jsfiddle.net/cj5pe43k/1/.
HTML:
<body ng-app="app" ng-controller="mainController">
<div id="test" style="position:absolute;top:0;left:0;background:#000;width:100vw;height:100vh;color:#fff;display:flex;align-items:center;justify-content:center;"><p>{{message}}</p></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
JS:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'mainController'
})
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
})
app.controller('mainController', function($scope) {
$scope.message = 'Main Controller Active';
})
After checking your jsFiddle, it seems that you are including angular-ui-router, despite typing code for ngRoute. The error returned by the fiddle is a little bit hidden but clear: It can't find ngRoute module. And your attached files are having angular-ui-router included.
Are you following these steps? https://docs.angularjs.org/api/ngRoute
If you want to include ui router, please have a look here instead: https://ui-router.github.io/ng1/docs/latest/index.html#/api/ui.router
Two possible reasons:
Angular is not there in the <head>.
There's an error. Check the console for errors like "module 'app' is not available". This applies to both ngRoute and the main app(you'll need angular-route.js for the ngRoute module). If you use ui-router, you'll need angular-ui-router.js.
you have loaded the ui-router URL .Try working with angular route cdn
otherwise use ui-routing
I'm trying to add relative url's to my single-page angular app without the hashes by using locationProvider to enable html5, but I'm having issues with the base tag.
When I add it like this:
<base href="/" />
the site comes up unstyled.
-
When I change it to this:
<base href="./" />
the styles load, but all angular code stops working, so the views don't appear, and clicking on links does nothing.
-
My file structure is like this:
'dashboard' folder
app.js
index.html
'pages' folder
home.html
page2.html
etc...
'js' folder
angular.js
'css' folder
style.css
-
app.config code:
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController as main'
})
.when('/home', {
templateUrl: 'pages/home.html',
controller: 'mainController as main'
})
.when('/newPayroll', {
templateUrl: 'pages/page2.html',
controller: 'page2Controller as page2'
})
.when('/employeesList', {
templateUrl: 'pages/page3.html',
controller: 'page3Controller as page3'
})
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
})
-
href links are like this:
<a href="/home">
If I'm navigating through the links, I'm able to open the respective views but if I copy paste the entire url, view is not loading & no errors in console.
Here is my config of main app module,
.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider
.when('/welcome', {
templateUrl: 'src/app/welcome/welcome.html'
})
.when('/terminology', {
controller: 'TermsController',
controllerAs: 'vm',
templateUrl: 'src/app/terminology/term-table.html'
})
.when('/', {
redirectTo: '/welcome'
})
.otherwise({
redirectTo: '/welcome'
});
$locationProvider.html5Mode(false);
}]);;
Eg:
1. If I click on home link, welcome view is loading in ng-view and the URL becomes (URL1) "http://localhost:8081/web/#/welcome"
If I click on terms link, terminology view is loading in ng-view & the URL becomes (URL2) "http://localhost:8081/web/#/terminology"
but If I copy paste the entire URL in a new tab, the view becomes blank. There is no error in the console. I'm using Angular1.3
ADDED:
Moreover, for the first time also default view is not loading...
Thanks in advance
I found the solution for this.
My actual index.html file is like this
<html class="no-js" lang="en" ng-app="app">
<head>
<!-- my css files -->
</head>
<body>
<!-- this shell page contains "ng-view" directive which is causing the whole problem -->
<div ng-include="'src/app/igl-layout/shell.html'"></div>
<!-- my js files -->
</body>
now I replaced the content of shell.html to the above ng-include directive(line), then everything works fine.
Can anyone tell me why this is happening?
If ng-view is inside shell page, its not working as expected but if it is in index.html page its working fine.
I'm using angularJS to build a website and use angular-route library for view of different pages of website. my website is working well but there is a hash tag in url when i move on different views. for removal of hash tag I'm using
$locationProvider.html5Mode(true);
but this is not working on page refresh. My code is given below:-
Index.html
<body data-ng-app="myapp" data-ng-controller="myctrl">
<div data-ng-include=" 'pages/menu.html'"></div>
<div ng-view class="view-animate"></div>
<div data-ng-include=" 'pages/footer.php' "></div>
<body>
app.js
'use-strict'
var tc = angular.module('myapp', ['ngRoute']);
tc.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/home', {
templateUrl: 'pages/home.html',
})
.when('/about', {
templateUrl: 'pages/about.html',
})
.otherwise({
redirectTo: '/home'
})
}]);
Use:-
<base href="/" />
And put this in your head tag :-)
I suggest you to use $stateProvider , $routeProvider not suggest by many Angularjs expert. And $stateProvider have more control over route then $routeprovider.
see
Using $routeProvider with $stateProvider
Make sure you have <!doctype html> at the top of your index.html
I created a basic angular app with ui-router. I am serving partial template from index.html with a script tag but I get this error
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:1337/home.html
Here is my code.
var app = angular.module('smApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
}])
.controller('homeCtrl', ['$scope', function ($scope) {
$scope.home = 1;
}]);
index.html
<script type="text/script" id="home.html">
<div>Home Page {{home}}</div>
</script>
<body>
<div ui-view></div>
</body>
You need to change type attribute of your script tag that contains template code. For Angular, in order to recognize the template, you need to change type attribute to 'text/ng-template' from 'text/script'
Your index.html should be
<script type="text/ng-template" id="home.html">
<div>Home Page {{home}}</div>
</script>
<div ui-view></div>