I am new to AngularJs and very new to ui-router.
I seem to be having problems creating several routes. This is how I proceed, inspiring myself from a tutorial but failing to reproduce the result.
Here are my different files:
1/index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="js/lib/angular.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
Home
About
Contact
<ui-view></ui-view>
</div>
<script src="js/app.js"></script>
<script src="js/components/about/about.js"></script>
<script src="js/components/about/about.component.js"></script>
<script src="js/components/home/home.js"></script>
<script src="js/components/home/home.component.js"></script>
<script src="js/components/contact/contact.js"></script>
<script src="js/components/contact/contact.component.js"></script>
</body>
</html>
2/app.js
angular
.module('app', []);
3/about.js
angular
.module('about', ['ui.router']);
4/about.component.js
const about = {
template: '<div class="about">About</div>'
};
angular
.module('about', ['ui.router'])
.component('about', about)
.config(function ($stateProvider) {
$stateProvider.state({
name: 'about',
url: '/about',
component: 'about',
// template: "<div>About</div>"
})
});
There are 2 similar files for home and another 2 for contact.
There is obviously something wrong as we are only calling the app module and not the contact, home, about modules, but this is the way the tutorial was done.
It's not working (the different templates of each routed module are not showing) and I can't figure it out.
To ensure all the modules get bootstrapped accordingly, just simply set them all as the deps for app module:
angular
.module('app', ['home', ...])
One more thing is about setting the directive attribute ui-sref for <a ui-sref="home" /> to work best with ui-router module instead of #/home which works with ngRoute
Related
my html page:
enter code here
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="daily">
<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="">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<!-- define angular controller -->
<body>
<div style="background-color:black" class = "page-header">
Daily
</body>
my login.html
<html>
<body>
<p>
Hello
</p>
<body>
<html>
enter code here
my script.js:
var app=angular.module('daily',[]);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Home', {
url: '/Home',
templateUrl: 'templates/login.html'
});
$urlRouterProvider.otherwise('/Home');
});
Im getting Module 'daily' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument error. Not understanding the mistake i have done
since you are trying to use ui-router it is dependency to our module so include it.
var app = angular.module('daily', ['ui.router']);
Note: ui-router will not work you should use ui.router.
You have to declare all your dependencies in my script.js:
var app=angular.module('daily',[
'ui.router',
]);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Home', {
url: '/Home',
templateUrl: 'templates/login.html'
});
$urlRouterProvider.otherwise('/Home');
});
And in your index you didn't include the ui-router js : https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js
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.
Heres My code for my index page, I added ui-view and my app file is called "route-app.js" and have used bower angular ui-router.
<!DOCTYPE html>
<html lang="en" ng-app="router">
<head>
<!-- JS dependencies -->
<!-- AngularJS library -->
<script src="route-app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- AngularJS UI-Router -->
<!-- Our application -->
<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 -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1></h1>
<div ui-view></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
UI router Js file
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
}]);
Every time I click on the links not pops up. What have I done wrong here.
$StateProvider should be $stateProvider (the first letter is lowercase)
Refer to the documentation here for reference: https://github.com/angular-ui/ui-router.
Also open up your development console, there may be some console errors that might assist you in figuring out what the problem is
angular.module('router', ['ui.router'])
.config(['urlRouterProvider', '$stateProvider', function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
The thing is that, you have used array notation for dependency injection but you actually did not inject anything.
Ok so you have a couple errors.
The first, and the most important, is that you define your custom scripts prior to including angular itself. So if you look at the console you will see a 'Reference Error: angular is not defined' error.
Second and third, as Alex and Vishal noted, the injection is wrong.
Here are the updated HTML (I removed all the unecessary comments from your code to make it clear where I changed anything. You can of course keep them in your page):
<!DOCTYPE html>
<html lang="en" ng-app="router">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- JS dependencies: MUST COME AFTER THE ANGULAR DEPENDENCIES -->
<script src="route-app.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1></h1>
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
and the script:
angular.module('router', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
As an advice, make use of the browser console (by pressing F12). It will give you the errors occuring in your scripts.
Note: It is possible to include the custom scripts prior to the angular library, but it's pointless and needs extra code to make it work, so don't do it.
In the script file , change the value oftemplateUrl attribute from 'home.html' to './home.html'. You have to give root directory.Just giving the file name will not work.
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: './home.html'
})
}]);
First of all, you should use the ui-sref attribute and not a plain href attribute to make ui-router work properly. Second, your link should not contain a hashtag. In this case, it has to be "/", not "#/".
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 am developing a SPA (Single page application) using ember.js served from pyramid. The problem is that the routing is not working properly.
In pyramid, I have the following routes defined:
# Route to index.html, i.e. the SPA
config.add_route('index', '/')
# Route to css & js resources
config.add_static_view('', 'myapp:static')
And the index view is:
#view_config(route_name='index')
def index_view(request):
with open('myapp/templates/index.html', 'rt', encoding='utf-8') as fh:
html = fh.read()
return Response(html, content_type='text/html')
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script type="text/x-handlebars" data-template-name="wfw">
<section id="wfw">
<p>here is a page</p>
</section>
</script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="https://raw.github.com/less/less.js/master/dist/less-1.6.0.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
js/application.js:
window.Wfw = Ember.Application.create();
js/router.js:
Wfw.Router.map(function () {
this.resource('wfw', { path: '/t' });
});
When I go to localhost:6543/ I get "Hello, world!", but I don't see "here is a page". If I change the path in js/router.js to '/test' and go to localhost:6543/test, I get a 404. What am I doing wrong? Do I need to somehow disable part of pyramid's routing, or am I doing something wrong with ember?
A few things:
I think you need to move your Ember.js script tags above your application specific tags.
The path you have configured is /t so I don't think it would pick it up /test.
By default, ember doesn't use the html5 history api, so your url would need to be like: localhost:6543/#/t