Using Angular2 in ClojureScript

综合编程 2016-04-11

Getting ClojureScript to run Angular2 is not very difficult. Here is a sample project demonstrating a working Angular2 site using Figwheel for hot-reloading on GitHub

1. Install Luminus +cljs

First, setup a basic ClojureScript site using Luminus starter template from here

lein new luminus cljs-angular2 +cljs

This builds a great basic starter project with ClojureScript and figwheel already running. The template uses Reagent and React, which are excellent, but we want Angular2!

2. Replace Figwheel Site Loader

Open the env/dev/cljs/dev.cljs file, which starts the site when running from development.

Replace the call to start a figwheel watcher with this:

(defn reload []
  (core/init!)
  ((.. js/ng -platform -browser -bootstrap)
   (.-AppComponent (.-app js/window))))

(figwheel/watch-and-reload :websocket-url "ws://localhost:3449/figwheel-ws"
                           :on-jsload reload)

(core/init!)
(defonce only-attach-listener-once
  (.addEventListener js/document "DOMContentLoaded"
                     (fn []
                       ((.. js/ng -platform -browser -bootstrap)
                        (.-AppComponent (core/get-app))))))

The defonce will make sure I accidentally don’t attach the same event listener twice when re-evaluating files at the repl.

3. Make Angular2 Component

Replace the src-cljs/cljs-angular2/core.cljs file with this:

(ns cljs-angular2.core
  (:require-macros [hiccups.core :as hiccups :refer [html]]))

(defn get-app []
   (or (.-app js/window)
       (set! (.-app js/window) #js {})))

(defn init! []
  (let [app (get-app)
        c (.Component (.-core js/ng)
                      #js {:selector "my-app"
                           :template (html [:div
                                            [:h1 "My first Angular 2 app"]
                                            [:div [:h2 "test"]]
                                            [:div [:h3 "test2"]]])})
        c (.Class c #js {:constructor (fn [])})]
    (set! (.-AppComponent app) c)))

4. Add Angular2 Dependencies

Add a package.json file into resources/public/ and fill it with this:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

Now run npm install
from inside the resources/public directory.

5. Add Hiccups

Modify the project.clj in the root directory to include the hiccups
dependency so we don’t have to write nasty html strings:

:dependencies [[hiccups "0.3.0"]
               ...

6. Add Dependencies To Home HTML

Add the following to resources/templates/home.html before the line including {% script "/js/app.js" %}

Loading...





7. Start Site!

Start the site with three tabs open running:

lein run
lein cljsbuild auto
lein figwheel

The lein run
command should emit a line showing the port number like:

[2016-04-10 16:16:51,326][INFO][cljs-angular2.core] server started on port: 3000

Just open your browser to localhost:3000
where 3000 is the port number from the lein run
command. Try to modify the core.cljs file to have a new template, and the site should automatically refresh with the new changes! If that doesn’t work, make sure you are running both the cljsbuild on auto and figwheel processes.

Easy as that!

If you get stuck, I checked in a working version on GitHub

责编内容by:Deliberate Software (源链)。感谢您的支持!

您可能感兴趣的

Recipe for getting started with Spring Boot and An... Recipe for getting started with Spring Boot and Angular 2 – – I am primaril...
我们为什么以及是如何从 Angular.js 迁移到 Vue.js?... 在我写这篇文章的时候,我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码,结束了一个为期4个月的非侵入性工作,将我们的应用程序从A...
Pay What You Want for this Learn to Code 2018 Bund... Today's highlighted offer comes via ourOnline Courses section of theNeowin Deal...
如何在 Angular CLI 建立的專案加入 Angular Universal 伺服器渲染功能... 自 Angular 4.0 開始 Angular Universal 就已經正式併入 Angular 核心功能,本篇文章將示範如何將一個由 Angula...
Closing Secondary Router-Outlet Views From Within ... One of the cool features of the Router in Angular 4.4.4 is that it allows you to...