17 |
17 |
18 |
19 | ---
20 |
21 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0-rc.2.
22 |
23 | ## Development server
24 |
25 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
26 |
27 | ## Code scaffolding
28 |
29 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
30 |
31 | ## Build
32 |
33 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
34 |
35 | ## Running unit tests
36 |
37 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
38 |
39 | ## Running end-to-end tests
40 |
41 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
42 |
43 | ## Further help
44 |
45 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
46 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "signals-demo": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:application": {
10 | "strict": true
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular-devkit/build-angular:browser",
19 | "options": {
20 | "outputPath": "dist/signals-demo",
21 | "index": "src/index.html",
22 | "main": "src/main.ts",
23 | "polyfills": "src/polyfills.ts",
24 | "tsConfig": "tsconfig.app.json",
25 | "assets": [
26 | "src/favicon.ico",
27 | "src/assets"
28 | ],
29 | "styles": [
30 | "@angular/material/prebuilt-themes/pink-bluegrey.css",
31 | "src/styles.css"
32 | ],
33 | "scripts": []
34 | },
35 | "configurations": {
36 | "production": {
37 | "budgets": [
38 | {
39 | "type": "initial",
40 | "maximumWarning": "500kb",
41 | "maximumError": "1mb"
42 | },
43 | {
44 | "type": "anyComponentStyle",
45 | "maximumWarning": "2kb",
46 | "maximumError": "4kb"
47 | }
48 | ],
49 | "fileReplacements": [
50 | {
51 | "replace": "src/environments/environment.ts",
52 | "with": "src/environments/environment.prod.ts"
53 | }
54 | ],
55 | "outputHashing": "all"
56 | },
57 | "development": {
58 | "buildOptimizer": false,
59 | "optimization": false,
60 | "vendorChunk": true,
61 | "extractLicenses": false,
62 | "sourceMap": true,
63 | "namedChunks": true
64 | }
65 | },
66 | "defaultConfiguration": "production"
67 | },
68 | "serve": {
69 | "builder": "@angular-devkit/build-angular:dev-server",
70 | "configurations": {
71 | "production": {
72 | "browserTarget": "signals-demo:build:production"
73 | },
74 | "development": {
75 | "browserTarget": "signals-demo:build:development"
76 | }
77 | },
78 | "defaultConfiguration": "development"
79 | },
80 | "extract-i18n": {
81 | "builder": "@angular-devkit/build-angular:extract-i18n",
82 | "options": {
83 | "browserTarget": "signals-demo:build"
84 | }
85 | },
86 | "test": {
87 | "builder": "@angular-devkit/build-angular:karma",
88 | "options": {
89 | "main": "src/test.ts",
90 | "polyfills": "src/polyfills.ts",
91 | "tsConfig": "tsconfig.spec.json",
92 | "karmaConfig": "karma.conf.js",
93 | "assets": [
94 | "src/favicon.ico",
95 | "src/assets"
96 | ],
97 | "styles": [
98 | "@angular/material/prebuilt-themes/pink-bluegrey.css",
99 | "src/styles.css"
100 | ],
101 | "scripts": []
102 | }
103 | }
104 | }
105 | }
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/signals-demo'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "signals-demo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^15.1.5",
14 | "@angular/cdk": "^15.1.5",
15 | "@angular/common": "^15.1.5",
16 | "@angular/compiler": "^15.1.5",
17 | "@angular/core": "^15.1.5",
18 | "@angular/forms": "^15.1.5",
19 | "@angular/material": "^15.1.5",
20 | "@angular/platform-browser": "^15.1.5",
21 | "@angular/platform-browser-dynamic": "^15.1.5",
22 | "@angular/router": "^15.1.5",
23 | "gsap": "^3.11.4",
24 | "rxjs": "~7.5.0",
25 | "tslib": "^2.3.0",
26 | "zone.js": "~0.11.4"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "^15.1.6",
30 | "@angular/cli": "~15.1.6",
31 | "@angular/compiler-cli": "^15.1.5",
32 | "@types/jasmine": "~4.0.0",
33 | "jasmine-core": "~4.1.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.2.0",
37 | "karma-jasmine": "~5.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "typescript": "~4.9.5"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: grid;
3 | grid-template-columns: 1fr 3fr;
4 | grid-template-rows: 100px 1fr;
5 | grid-column-gap: 100px;
6 | grid-row-gap: 0px;
7 | max-width: 1100px;
8 | margin: 20px auto;
9 | }
10 |
11 | .header-area { grid-area: 1 / 1 / 2 / 3; text-align: center;}
12 | .screen-area { grid-area: 2 / 1 / 3 / 2; }
13 | .explain-area { grid-area: 2 / 2 / 3 / 3; }
14 |
15 | @media (max-width: 1100px) {
16 | .container {
17 | grid-template-columns: 1fr;
18 | grid-template-rows: 60px repeat(2, 1fr);
19 | grid-column-gap: 0px;
20 | grid-row-gap: 20px;
21 | }
22 |
23 | .header-area { grid-area: 1 / 1 / 2 / 2; }
24 | .screen-area { grid-area: 2 / 1 / 3 / 2; margin-left: -200px; height: 300px; }
25 | .explain-area { grid-area: 3 / 1 / 4 / 2; }
26 |
27 | .container h1 {
28 | font-size: 30px;
29 | }
30 | }
31 |
32 | @media (max-width: 600px) {
33 | .explain-area { margin-top: -100px; }
34 | }
35 |
36 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | 
3 |
153 | Let's say you have an app like this one.
6 |We want to set up any data we might like to track with a signal. A signal is a value which is "reactive", meaning it can notify interested consumers when it changes.
7 |(() => T)
8 |Signal are zero-argument functions. When executed, they return the current value of the signal.
9 |In this particular app, we might want to track the users, listed here at the top.
10 |users = signal(159845);
11 |Let's say you want to update our users, we know that as of our last update, we now have 160000. We can set that amount.
17 |users = signal(159845);
18 |
19 | users.set(160000);
We can also update the users as new users come on to the platform.
21 |users.update(user => user + 1);
22 |We do this via SettableSignal. In addition to being a getter function, we can also change the value of the signal, and notify any dependents of the change. The API includes .set for replacement, .update for deriving a new value, and .mutate for performing internal mutation of the value.
There are a few amounts on this page derived from our users. In the key at the bottom, you can see the change between this month and last month.
29 |We don't necessarily want a whole new value to update manually. Computed values allow us to show a derived value, a new view from our data in our signal.
30 |// Automatically updates when `users` changes:
31 | const thisMonth = computed(() => users() - lastMonth);
Computed values are cached based on their dependencies and will only update when necessary.
33 |Any signals read by that calculation will be tracked as dependencies, and the value recalculated when any of these dependencies change.
34 |There are times when we might want something to occur when a signal has a new value.
40 |With effect(), we can schedule and run a side-effectful function inside a reactive context.
Let's say we want to redraw the connecting lines when a user amount changes, in case the lines are adjusting.
42 |
43 | users.set(180000);
44 | effect(() => redrawLines());
45 |
This is just the beginning! 🎉
52 |Angular Signals also has:
53 |Head over to the RFC for further updates and discussion! >
59 |