├── .gitignore ├── LICENSE ├── README.md ├── analysis_options.yaml ├── lib └── app_component.dart ├── pubspec.yaml ├── test └── app_test.dart └── web ├── favicon.png ├── index.html ├── main.dart └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Files and directories created by pub 2 | .dart_tool 3 | .packages 4 | .pub/ 5 | build/ 6 | # Remove the following pattern if you wish to check in your lock file 7 | pubspec.lock 8 | # Directory created by dartdoc 9 | doc/api/ 10 | # See https://github.com/dart-lang/site-webdev/issues/1351 11 | test/**/*.g.dart 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014-2018 Google, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Setup for Development 2 | 3 | Welcome to the example app used in the 4 | [Setup for Development](https://webdev.dartlang.org/angular/guide/setup) page 5 | of [Dart for the web](https://webdev.dartlang.org). 6 | 7 | You can run a [hosted copy](https://webdev.dartlang.org/examples/quickstart) of this 8 | sample. Or run your own copy: 9 | 10 | 1. Create a local copy of this repo (use the "Clone or download" button above). 11 | 2. Get the dependencies: `pub get` 12 | 3. Get the webdev tool: `pub global activate webdev` 13 | 4. Launch a development server: `webdev serve` 14 | 5. In a browser, open [http://localhost:8080](http://localhost:8080) 15 | 16 | --- 17 | 18 | *Note:* The content of this repository is generated from the 19 | [Angular docs repository][docs repo] by running the 20 | [dart-doc-syncer](//github.com/dart-lang/dart-doc-syncer) tool. 21 | If you find a problem with this sample's code, please open an [issue][]. 22 | 23 | [docs repo]: //github.com/dart-lang/site-webdev/tree/master/examples/ng/doc/quickstart 24 | [issue]: //github.com/dart-lang/site-webdev/issues/new?title=[master]%20examples/ng/doc/quickstart 25 | -------------------------------------------------------------------------------- /analysis_options.yaml: -------------------------------------------------------------------------------- 1 | analyzer: 2 | exclude: [build/**] 3 | errors: 4 | uri_has_not_been_generated: ignore 5 | plugins: 6 | - angular 7 | 8 | # Lint rules and documentation, see http://dart-lang.github.io/linter/lints 9 | linter: 10 | rules: 11 | - cancel_subscriptions 12 | - hash_and_equals 13 | - iterable_contains_unrelated_type 14 | - list_remove_unrelated_type 15 | - test_types_in_equals 16 | - unnecessary_const 17 | - unnecessary_new 18 | - unrelated_type_equality_checks 19 | - valid_regexps 20 | -------------------------------------------------------------------------------- /lib/app_component.dart: -------------------------------------------------------------------------------- 1 | import 'package:angular/angular.dart'; 2 | 3 | @Component( 4 | selector: 'my-app', 5 | template: '

Hello {{name}}

', 6 | ) 7 | class AppComponent { 8 | var name = 'Angular'; 9 | } 10 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: angular_app 2 | description: A web app that uses AngularDart 3 | version: 0.0.1 4 | 5 | environment: 6 | sdk: '>=2.2.0 <3.0.0' 7 | 8 | dependencies: 9 | angular: ^6.0.0-alpha 10 | 11 | dev_dependencies: 12 | angular_test: ^2.3.1 13 | build_runner: ^1.5.1 14 | build_test: ^0.10.8 15 | build_web_compilers: ^2.1.0 16 | test: ^1.6.4 17 | -------------------------------------------------------------------------------- /test/app_test.dart: -------------------------------------------------------------------------------- 1 | @TestOn('browser') 2 | 3 | import 'package:angular_app/app_component.dart'; 4 | import 'package:angular_app/app_component.template.dart' as ng; 5 | import 'package:angular_test/angular_test.dart'; 6 | import 'package:test/test.dart'; 7 | 8 | void main() { 9 | final testBed = 10 | NgTestBed.forComponent(ng.AppComponentNgFactory); 11 | NgTestFixture fixture; 12 | 13 | setUp(() async { 14 | fixture = await testBed.create(); 15 | }); 16 | 17 | tearDown(disposeAnyRunningTest); 18 | 19 | test('Default greeting', () { 20 | expect(fixture.text, 'Hello Angular'); 21 | }); 22 | 23 | test('Greet world', () async { 24 | await fixture.update((c) => c.name = 'World'); 25 | expect(fixture.text, 'Hello World'); 26 | }); 27 | 28 | test('Greet world HTML', () { 29 | final html = fixture.rootElement.innerHtml; 30 | expect(html, '

Hello Angular

'); 31 | }); 32 | } 33 | -------------------------------------------------------------------------------- /web/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlearchive/quickstart/d9e768b947f2787cc45eedbfb0d97530e6b5dd07/web/favicon.png -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 | Hello Angular 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Loading... 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /web/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:angular/angular.dart'; 2 | import 'package:angular_app/app_component.template.dart' as ng; 3 | 4 | void main() { 5 | runApp(ng.AppComponentNgFactory); 6 | } 7 | -------------------------------------------------------------------------------- /web/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto); 2 | @import url(https://fonts.googleapis.com/css?family=Material+Icons); 3 | 4 | /* Master Styles */ 5 | h1 { 6 | color: #369; 7 | font-family: Arial, Helvetica, sans-serif; 8 | font-size: 250%; 9 | } 10 | h2, h3 { 11 | color: #444; 12 | font-family: Arial, Helvetica, sans-serif; 13 | font-weight: lighter; 14 | } 15 | body { 16 | margin: 2em; 17 | } 18 | body, input[text], button { 19 | color: #888; 20 | font-family: Cambria, Georgia; 21 | } 22 | a { 23 | cursor: pointer; 24 | cursor: hand; 25 | } 26 | button { 27 | font-family: Arial; 28 | background-color: #eee; 29 | border: none; 30 | padding: 5px 10px; 31 | border-radius: 4px; 32 | cursor: pointer; 33 | cursor: hand; 34 | } 35 | button:hover { 36 | background-color: #cfd8dc; 37 | } 38 | button:disabled { 39 | background-color: #eee; 40 | color: #aaa; 41 | cursor: auto; 42 | } 43 | label { 44 | padding-right: 0.5em; 45 | } 46 | /* Navigation link styles */ 47 | nav a { 48 | padding: 5px 10px; 49 | text-decoration: none; 50 | margin-right: 10px; 51 | margin-top: 10px; 52 | display: inline-block; 53 | background-color: #eee; 54 | border-radius: 4px; 55 | } 56 | nav a:visited, a:link { 57 | color: #607D8B; 58 | } 59 | nav a:hover { 60 | color: #039be5; 61 | background-color: #CFD8DC; 62 | } 63 | nav a.active { 64 | color: #039be5; 65 | } 66 | 67 | /* items class */ 68 | .items { 69 | margin: 0 0 2em 0; 70 | list-style-type: none; 71 | padding: 0; 72 | width: 24em; 73 | } 74 | .items li { 75 | cursor: pointer; 76 | position: relative; 77 | left: 0; 78 | background-color: #EEE; 79 | margin: .5em; 80 | padding: .3em 0; 81 | height: 1.6em; 82 | border-radius: 4px; 83 | } 84 | .items li:hover { 85 | color: #607D8B; 86 | background-color: #DDD; 87 | left: .1em; 88 | } 89 | .items li.selected { 90 | background-color: #CFD8DC; 91 | color: white; 92 | } 93 | .items li.selected:hover { 94 | background-color: #BBD8DC; 95 | } 96 | .items .text { 97 | position: relative; 98 | top: -3px; 99 | } 100 | .items .badge { 101 | display: inline-block; 102 | font-size: small; 103 | color: white; 104 | padding: 0.8em 0.7em 0 0.7em; 105 | background-color: #607D8B; 106 | line-height: 1em; 107 | position: relative; 108 | left: -1px; 109 | top: -4px; 110 | height: 1.8em; 111 | margin-right: .8em; 112 | border-radius: 4px 0 0 4px; 113 | } 114 | /* everywhere else */ 115 | * { 116 | font-family: Arial, Helvetica, sans-serif; 117 | } 118 | --------------------------------------------------------------------------------