I'm pretty new to Angular 2 and am trying to get some simple sign-in buttons to work inside one of my child-components.
This is the order of the scripts rendered:
<html>
<head>
<title>Title</title>
<meta name="google-signin-client_id" content="xxxxxxx.apps.googleusercontent.com">
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If I place it inside my main-component like so, it is not rendering at all:
import {Component} from 'angular2/core';
#Component({
selector: 'my-app',
template: '<div class="g-signin2" data-onsuccess="onSignIn"></div>'
})
export class AppComponent { }
If I instead place the button directly in the body of index.html, the button rendered from the js-library is displayed correctly.
The div is there when I inspect the element, but it seems that the button is trying to render before the script is loaded, since it is not displaying.
Any idea as to why this is happening and how I can fix it?
Thanks for any input!
Related
We had created a component named contact using angularjs#1.6 and angular-ui-router#1.0.0-rc.1.The problem lies on click of a button,nothing is displayed in the home page.It would be great if someone could help us to figure out the error.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Component based routing</title>
<!--Styles-->
<!--Libs-->
<script src="../libs/angular.js"></script>
<script src="../libs/angular-ui-router.js"></script>
<!--Components-->
<script src="app.js"></script>
<script src="contact/contact.js"></script>
<script src="contact/contact.component.js"></script>
</head>
<body>
<h1>Component based routing</h1>
<div ng-app="app">
<ul>
<li>
Contact
</li>
</ul>
<h4>Test</h4>
<ui-view></ui-view>
</div>
</body>
</html>
app.js
angular.module('app',[]);
contact.js
angular
.module('contactApp', ['ui-router']);
contact.component.js
angular
.module('contactApp')
.config(['$stateProvider',function ($stateProvider) {
$stateProvider.state('contact', {
url: '/contact',
component: 'contact'
})
}])
.component('contact',{
template: `<h1>Contact</h1>`
})
You app module, where component is registered, is contactApp. You need to change html to that app module:
<div ng-app="contactApp">
EDIT
If we assume that app is the main app module and there are other modules declared, then all the other have to be registered under that main app like this:
angular.module('app', ['contactApp']);
and then in html you use app, as you already do:
<div ng-app="app">
*You can also have multiple apps in the same html but it is not the recommented way
I am trying to learn Angularjs2 and make my first app but its not working fine and also not showing any error. I have made "my-app" component with some html "Angular 2 First App Here is my component", this one is working fine but when I have made new component named "my-component" with text "Hi, I am {{name}}" its not showing in the browser.
Also when I am trying to remove text form "my-app" like:
Text is: "Angular 2" so it shows my previous text which is "Angular 2 First App"
Please check what I am doing wrong in the below code:
index.html:
<!doctype>
<html>
<head>
<base href="/angular2_project/">
<title>Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
boot.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
app.component.ts:
import {Component} from 'angular2/core';
import {MyComponentComponent} from './my-component.component';
#Component({
selector: 'my-app',
template: `
<h1>Angular 2 First App</h1>
<h2>Here is my component</h2>
<my-component></my-component>
`,
directives: [MyComponentComponent],
})
export class AppComponent {
}
my-component.component.ts:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: `
Hi, I am {{name}}
`,
})
export class MyComponentComponent {
name = 'Ovais';
}
I read ngbook2. And I try to create hello-world application on angular2.
But I get error 404:
GET /node_modules/angular2/bundles/angular2.dev.js 404 5.460 ms - 58
app.ts:
import { bootstrap } from "#angular/platform-browser-dynamic";
import { Component } from "#angular/core";
#Component({
selector: 'hello-world',
template: `
<div>
Hello world
</div>
`
})
class HelloWorld {
}
bootstrap(HelloWorld);
index.html:
<!doctype html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<script src="resources/systemjs.config.js"></script>
<script>
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<hello-world></hello-world>
</body>
</html>
Look like the problem is in line
But I newbie in angular and have not idea about how can I correct this line.
How can I fix this app?
I have read documentation
And I see I must change libraries URLs in index.html to these:
<!-- Libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
I am trying to learn how to use AngularJS and AngularJS Material using following codes:
<!doctype html>
<html lang="en">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
<!-- default themes and core styles -->
<link rel="stylesheet"
href="bower_components/angular-material/angular-material.css">
</head>
<body ng-app="F1FeederApp">
<md-content>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<ng-view></ng-view>
</md-content>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
However, the Material is not displayed. What could be wrong with my code?
Console in Browser doesn't give me any error.
Just tried your code and it works fine on Chrome, FireFox, and Safari.
By the way, you have an extra ; before your closing script tag
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
I recommend you to check your angular and angular material versions,
or check if there is a problem in your .js files.
I am trying to build a Phonegap application using Angular.js
I am trying to this: When a user logs in, a heading will be displayed to the user.
I have directive in directive.js :
angular.module('myApp')
.directive('ngHeaderline', ['Auth', function(Auth) {
return {
templateUrl: '/views/partials/header.html',
replace: true,
scope: true,
link: function($scope) {
$scope.isAuthenticated = Auth.isLoggedIn;
$scope.logout = Auth.logout();
}
}
}]);
And let's presume all the elements are there. Auth factory and the template (everything is displaying fine when I test it on Chrome browser)
And then in my index.html I have:
<body>
<div ng-headerline></div>
<div class="main-content">
<div ng-errorline></div>
<div ng-loadingline></div>
<div ng-view=""></div>
</div>
<!-- Foundation JS dependencies -->
<script src="bower_components/foundation/js/vendor/custom.modernizr.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="scripts/vendor/cordova.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery.formatDateTime/jquery.formatDateTime.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
And my header.html partial looks like this:
<div class="app">
<div ng-show="isAuthenticated()">
My Header
</div>
</div>
To repeat, everything is showing correctly when I est it on browser, but when I compile with Phonegap and deploy to the Android device, header is not showing.
What could be the problem?
I had this same exact problem actually. Your problem is here:
templateUrl: '/views/partials/header.html',
You need to remove that initial slash and use a relative path. In my case I had '/scripts/directives/templates/bottom-menu.html' and my template did not work. I removed the first slash and it worked perfectly.
The reason is that when it's deployed to android these files are no longer in the root directory, so that first slash breaks the path.