firstpage_server_side_load.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to myapp</title>
<base href="/temp/angular/" />
<script src="/temp/angular/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/temp/angular/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/temp/angular/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/temp/angular/node_modules/systemjs/dist/system.src.js"></script>
<script src="/temp/angular/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/temp/angular/node_modules/angular2/bundles/router.dev.js"></script>
</head>
<body>
<nav class="nav set-navigation-tab-nav navigation">
<ul class="set-navigation-tab-nav">
<li class="set-navigation-tab-container">
<a [routerLink]="['home/home']">Home</a>
</li>
<li class="set-navigation-tab-container">
<a [routerLink]="['user/register']">register</a>
</li>
</ul>
</nav>
<script>
System.config({
baseURL: '/temp/angular/',
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
});
System.import('app/main')
.then(null, console.error.bind(console));
document.write('<base href="' + document.location + '" />');
</script>
</body>
</html>
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {Utils} from './util/Utils';
import 'rxjs/Rx';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ROUTER_PROVIDERS } from 'angular2/router';
import {myappComponent} from './myapp.component';
bootstrap(myappComponent,[HTTP_PROVIDERS,Utils,ROUTER_PROVIDERS]);
myapp.component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Home} from './home/component.home';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {RegisterPageComponent} from './register-page/component.register.page';
#Component({
selector: 'my-app',
templateUrl: './app/template/common/my.body.html',
directives:[ROUTER_DIRECTIVES]
})
#RouteConfig([
{
path:"/home/home",component:Home ,name:'Home',useAsDefault:true
},
{
path:"user/register",component:RegisterPageComponent ,name:'User'
},
])
export class myappComponent{ }
Home.Component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'home',
templateUrl:'./app/template/home/home.html',
host:{
'(submit)':'onSubmit()'},
directives:[ROUTER_DIRECTIVES],
})
export class Home{}
RegisterPageComponent.Component.ts
import {Directive,Component,ElementRef,Renderer} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'register',
templateUrl:'./app/template/user/register.html',
directives:[ROUTER_DIRECTIVES],
})
export class RegisterPageComponent{}
my.body.html
<my-app>
<router-outlet></router-outlet>
<home>
</home>
<register>
</register>
</my-app>
Explanation I am using XAMPP server, which load firstpage_server_side_load.html page on URL: http://localhost/home/home, Once page get loaded properly typescript get executed in script tag of html. All the required file loaded by this configuration.
main.ts execute configure web page for my applicatioon. All the steps working fine but once everything loaded then url of page get changed to http://localhost/temp/angular/home/home.
Problem: Now if I try to click on Either Register link or Home link both are not working. Even I don't find anything in console as well regarding these link like any error or message.
Please tell me how to make it work.
thanks
Related
I have downgrade a component written in Angular2 + Typescript. Now I want to use it in simple angular 1 app, But the js file compiled from Typescript is using 'import' and I get from browser it is not supported. What I have missed?
This is a simple angular 2 componenet:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'hello-world',
template: `
<p>
hello from angular 2!
</p>
`,
styles: []
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import * as angular from 'angular';
import { downgradeComponent } from '#angular/upgrade/static';
angular.module('dannyApp', [])
.directive(
'helloWorld',
downgradeComponent({component: HelloWorldComponent}) as angular.IDirectiveFactory
);
This is the simple angular1 app tring to use this angular 2 component above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="dist\out-tsc\app\hello-world\hello-world.component.js"></script>
<script>
angular.module('app', [])
.controller('FrameController', ['$injector', function($injector) {
var vm = this;
vm.message = 'Hello from angular 1';
}]);
</script>
<title>Title</title>
</head>
<body ng-app="app">
<div id="body">
<div ng-controller="FrameController as vm">
{{vm.message}}
</div>
<!-- the angular 2 componenet -->
<hello-world></hello-world>
</div>
</body>
</html>
The browser error:
Uncaught SyntaxError: Unexpected token import
on the line:
import { Component } from '#angular/core';
Make sure you have compiled your Typescript component to ES5.
Your code looks like ES6/Typescript.
Check your tsconfig.json and make sure target: "es5".
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'm making an angular 1 application with typescript and components. But my views arn't loaded.
and I can't seem to figure out why, the ui-router is working and my components are loading as wel if I include them in my index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular typescript webpack</title>
</head>
<body ng-cloak>
<a ui-sref="app.home" ui-sref-active="active">Hello</a>
<a ui-sref="app.about" ui-sref-active="active">About</a>
<messages-application></messages-application>
</body>
</html>
app.ts
import './modules/_application/index';
import './modules/about/index';
import 'angular';
angular.module('app', [ 'app.application', 'app.about']);
angular.bootstrap(document, ['app'], {
strictDi: true
});
modules/_application/index.ts
import 'angular';
import 'angular-ui-router';
import {config as routesConfig} from './configs/routes';
import {MessagesApplicationComponent} from './components/messagesApplication/MessagesApplicationComponent';
angular.module('app.application', ['ui.router'])
.component('messagesApplication', new MessagesApplicationComponent())
.config(routesConfig);
modules/_application/configs/routes.ts
config.$inject = ['$stateProvider'];
export function config($stateProvider: ng.ui.IStateProvider): void {
let abstractState: ng.ui.IState = {
abstract: true,
name: 'app',
component: 'messages-application'
};
$stateProvider.state(abstractState);
}
modules/_application/components/messagesApplication/messagesApplicationComponent.ts
export class MessagesApplicationComponent implements ng.IComponentOptions {
template: string = `
<h1>Messages application</h1>
<div ui-view></div>
<h3>test</h3>`;
}
and then i have a route for my about
modules/about/index.ts
import 'angular';
import 'angular-ui-router';
import {PageAboutComponent} from './components/pageAbout/PageAboutComponent';
import {config as routesConfig} from './configs/routes';
angular.module('app.about', ['ui.router'])
.component('pageAbout', new PageAboutComponent())
.config(routesConfig);
modules/about/configs/routes.ts
config.$inject = ['$stateProvider'];
export function config($stateProvider: ng.ui.IStateProvider): void {
let aboutState: ng.ui.IState = {
name: 'app.about',
url: '/about',
component: 'page-about',
parent: 'app'
};
$stateProvider.state(aboutState);
}
modules/about/components/pageAbout/pageAboutComponent.ts
export class PageAboutComponent implements ng.IComponentOptions {
public template: string = `
<div>
<ul>
<li>Typescript</li>
<li>Webpack</li>
<li>Angular 1.4</li>
<li>Karma</li>
<li>Jasmine</li>
<li>Istanbul coverage</li>
</ul>
</div>`;
}
anybody knows what I might be forgetting or doing wrong?
Can someone please tell me why this won't work?
I'm currently taking a course on angular and the instructor has left us in the dirt with regard to updates since the course was made... I'm on the topic of observables and this is the code that isn't working.
import {Component, ElementRef} from 'angular2/core'
import {Observable} from 'rxjs/Rx'
import 'rxjs/add/operator/map'
#Component({
selector: 'my-app',
template: `
<input id="search" type="text" class="form-control" placeholder="Search" />
`
})
export class AppComponent {
constructor(private _elementRef: ElementRef) {
var elem = document.querySelector('#search');
var keyups = Observable.fromEvent(elem, "keyup")
.map(e => e.target.value)
.filter(text => text.length >= 3);
keyups.subscribe(data => console.log(data));
}
}
This will not output anything into console and does not provide any errors whatsoever.
What am I doing wrong here?
****Edit****
After pulling my instructors code and re-running everything I'm convinced it is a versions issue with rxjs. In this version I no longer have to include:
import 'rxjs/add/operator/map'
And when I write the following code, it works and outputs to the console as expected.
/// <reference path="../typings/tsd.d.ts" />
import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx'
#Component({
selector: 'my-app',
template: `
<input id="search" type="text" class="form-control">
`
})
export class AppComponent {
constructor(){
var keyups = Observable.fromEvent($("#search"), "keyup")
.map(e => e.target.value)
.filter(text => text.length > 3);
keyups.subscribe(data => console.log(data));
}
}
When I pause the app in the debugger and look at keyups it indeed does have the element.
Also for curiosity sake, here is the html that both myself and the instructor are using.
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"></style>
<link rel="stylesheet" href="app/styles.css">
<style>
body { padding: 30px; }
</style>
<!-- 1. Load libraries -->
<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://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
In your code elem will equal null.
I think you should move your code to ngAfterViewInit hook. It as 'on load' for component.
See also
Lifecycle Hooks
Plunker
I'm trying to setup routing inside my application, but am getting following error in the console:
angular2-polyfills.js:138 Error: XHR error (404 Not Found) loading http://localhost:9000/angular2/router.js(…)
here is my boot.ts
// -- Typescript typings -------------------------------------------------------
/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/jqueryui.d.ts" />
//Imports ----------------------------------------------------------------------
import {Component, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
Router,
RouteConfig,
} from 'angular2/router';
// -- Application Imports ------------------------------------------------------
import {NavbarComponent} from './components/navbar.component';
import {HomePage} from './pages/home.page';
// -- Enable production module -------------------------------------------------
enableProdMode();
// -- Component ----------------------------------------------------------------
#Component({
selector: 'main-app',
directives: [ ROUTER_DIRECTIVES, NavbarComponent ],
template: `
<app-navbar></app-navbar>
<router-outlet></router-outlet>
`
})
// -- Routing ------------------------------------------------------------------
#RouteConfig([
{ path: '/', name: 'root', redirectTo: ['/Home'] },
{ path: '/home', name: 'Home', component: HomePage }
])
// -- Class --------------------------------------------------------------------
export class MainApp {
constructor(public router: Router) {}
}
// -- Bootstrap for application ------------------------------------------------
bootstrap(MainApp, [
ROUTER_PROVIDERS
]);
and index.html -----
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Angular2 starter</title>
<!-- Application css -->
<link href="dist/libraries/bundle.css" rel="stylesheet"></link>
<link href="dist/styles/main.css" rel="stylesheet"></link>
</head>
<body>
<main-app>Loading...</main-app>
<!-- Application js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="dist/libraries/bundle.js"></script>
</body>
<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({defaultJSExtensions: true});
</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script>
//bootstrap the Angular2 application
System.import('dist/app/boot').catch(console.log.bind(console));
</script>
</html>
You are missing a script router.dev.js which is not shown very clearly in a lot of places and examples.
<script src="/node_modules/angular2/bundles/router.dev.js"></script>