springboot-angular2-tutorial / angular2-app Goto Github PK

View Code? Open in Web Editor NEW

142.0 19.0 51.0 4.33 MB

This repository is an example application for angular2 tutorial

License: MIT License

JavaScript 6.18% TypeScript 77.39% HTML 8.41% Shell 8.03%

angular tutorial angular2-tutorial

angular2-app's Introduction

Angular2 Tutorial

This repository is an example application for angular2 tutorial.

Demo

Ahead-of-time compilation
Lazy Loading
Preloading
CSS in JS by using Aphrodite
Hot module reload

Getting Started

Prepare backend app.

git clone https://github.com/springboot-angular2-tutorial/boot-app.git
cd boot-app
mvn spring-boot:run

Serve frontend app by webpack-dev-server.

npm install -g yarn
yarn install
yarn start
open http://localhost:4200

Testing.

yarn test

Production build.

yarn run build
yarn run server:prod
open http://localhost:4200

Tutorial

Under construction...

Related Projects

Credits

License

MIT

angular2-app's People

Contributors

Stargazers

Watchers

Forkers

windwang quizviews mvenin ishara okolorevanchik gtostock mauricio1990silva niggusch rechads mrmodise madhumc85 mrshinobi hb1234567 cipengxu realforce1024 tiagocassio talbhoggs jvedikunnel-fa elfinxx zaxrok onluiz markikito alu0100463910 mercuriete viniciusoyama awsp vrdate rohanb22 hidetarou2013 prodigue memento ssushma14 zhaojunjie163 juricajaman webon100 jancarlo123 abrahamgit 30s uejb asterism612 toyindipo vincentlouis huwenjian smaymen cuongcl yasirmcs nhchon shivlondon mshd3techs

angular2-app's Issues

Not working in IE 11

The frontend does not work in IE11 (only shows blank page). Any idea how to fix that? Thanks!

will you try to use angular2-cli?

Hi,akirasosa

I have build a angular2-app and spring boot app, refer to your work.

now , I find angular2-cli is concise maybe， will you plan to try?

I want to try ,but do not know how to set the "outDir","Proxy To Backend"

e.g

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

and in spring boot , how to set index.html.

<body>
<mpt-app />
<script th:src="|//${assetHost}/${manifest.get('polyfills.js')}|"></script>
<script th:src="|//${assetHost}/${manifest.get('vendor.js')}|"></script>
<script th:src="|//${assetHost}/${manifest.get('main.js')}|"></script>

can this apply stomp over websocket?

HI,

I try use this to apply websocket, but not work , can help me?

front -

import * as SockJS from 'sockjs-client';
public stompClient: any;
const Stomp = require('stompjs/lib/stomp').Stomp;

ngOnInit() {
    this.connect();
  }

connect() {

    const socket=new SockJS(sockUrl);
    this.stompClient=Stomp.over(socket);
    this.stompClient.connect({},e=>{
      this.connected=true;
      console.log('Connected: ' + e);
      this.stompClient.subscribe(this.subUrl,v=>{
        console.log(JSON.parse(v.body).content);
        this.mm.next(JSON.parse(v.body).content);
      })
    })
  }

public send() {
    this.stompClient.send(this.sendUrl,{},JSON.stringify({ 'name': value }));
  }

and back java --

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketBrokerConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {

        // client  链接的  socket url
        registry.addEndpoint("/socket")
                .setAllowedOrigins("http://localhost:8080")
                .withSockJS()
        ;
    }


    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }


}

rest:--

@MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting g(HelloMessage message) throws InterruptedException {

        log.info("stock web is start ! from is : " + message);

        TimeUnit.SECONDS.sleep(1); // simulated delay

        return new Greeting("Hello, " + message.getName() + "!");
    }

the socket can opening .

but when send message from front , back code --

" log.info("stock web is start ! from is : " + message);" is not working ..

Is the " front 3000 port redirect to back 8080 port issue"?

Direct access to https://micropost.hana053.com/help does not show content.

Once go to https://micropost.hana053.com/ and click Help on navigation. It is OK. But if I directly access help page, the content can not be shown.

It looks that HelpComponent#ngOnInit is called.

Improve AoT with scss

Currently, scss files are generated under src directly. It does not harm anything, but not so good.

Where is index.html

Sorry for dummy question, but where is entry point ?
Where <app></app> is located to run app ?

Give page paraeter to /users. It's required for history back.

Move to /users
Move to next page of /users
Show user detail
History back

Now, it's always back to first page. But it's expected to be back to page 2.

en external problem about how set angular2 host as “localhost or a fixed ip

hello,

I would like to ask a question ， if i build a spring-boot angular2 in docker .

I can set the host in spring-boot server , as "localhost /192.168.1.110",

How set it in angular2 ， that can be easily tested locally or 192.168.1.110 env?

Introduce angular universal to achieve SSR at first access.

alpha47

This is just a remind for myself.

Here is a quote from CHANGELOG.

http: return Response headers (4332ccf), closes #5237

This workaround won't be necessary anymore.
https://github.com/springboot-angular2-tutorial/angular2-app/blob/master/src/app/http/xhr_backend.ts#L96

previously http would only error on network errors to match the fetch specification. Now status codes less than 200 and greater than 299 will cause Http's Observable to error.

Handling http error might be changed.

windows and linux problem with fsevents

npm install doesn't work on a windows and also not on linux. It seems that fsevents is a dependency of webpack and fsevents only fits to Mac architecture.

this is a part of npm install --verbose

...
npm info lifecycle [email protected]~prepublish: [email protected]
[email protected] c:\dev_playground\angular2springboot\angular2-app
`-- [email protected] extraneous

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]
npm verb exit [ 0, true ]
npm info ok

Is ist possible to correct that so that the app also runs on windows or linux?

Move angular related code from main to vendor.

-rw-r--r--  1 akira  staff   850673 Oct  9 00:55 main.2761a809ca3f1249d16d.js
-rw-r--r--  1 akira  staff    91243 Oct  9 00:55 polyfills.a1140c36d616d48b4a02.js
-rw-r--r--  1 akira  staff   260722 Oct  9 00:55 vendor.bb4da91788461244986c.js

Currently, main includes @angular.

introduce bootstrap-loader instead of bootstrap-webpack

https://github.com/shakacode/bootstrap-loader