Skip to content

Commit 7b71ff5

Browse files
committed
docs(readme): update and enhance examples
- update example links - add example of `$inject` Annotation for run/config functions - improve grammar, remove passive voice - fix typos - update Copyright
1 parent 862bedf commit 7b71ff5

File tree

2 files changed

+21
-15
lines changed

2 files changed

+21
-15
lines changed

LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 DevIntent
3+
Copyright (c) 2020 DevIntent LLC
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

README.md

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# AngularJS/Angular Material Hybrid Demo
22

33
This was started on [StackBlitz](https://stackblitz.com/edit/angularjs-material-ngupgradelite-demo),
4-
based on a demo by [George Kalpakas](https://github.com/gkalpak), but using ngUpgrade can be done
5-
in a way that is either compatible with StackBlitz or the Angular CLI, not both. This repo uses the
6-
Angular CLI along with the `downgradeModule()`.
4+
based on a demo by [George Kalpakas](https://github.com/gkalpak), but using Angular Upgrade can be
5+
done in a way that is either compatible with StackBlitz or the Angular CLI, not both. This repo uses
6+
the Angular CLI along with the `downgradeModule()`.
77

88
Find out more in the [Upgrading for Performance Guide](https://angular.io/guide/upgrade-performance).
99

@@ -12,30 +12,36 @@ Find out more in the [Upgrading for Performance Guide](https://angular.io/guide/
1212
We recently published a [comprehensive guide](https://material.angularjs.org/latest/migration)
1313
for upgrading AngularJS Material apps to Angular. It includes guidance for migrating to
1414
Angular Material, the Angular Component Dev Kit (CDK), and the Angular Flex Layout library.
15-
Additionally, we provide guidance on using pure CSS Grid and Flexbox for layout, migration of
16-
theming features, services, typography, and more.
15+
Additionally, we provide guidance on using pure CSS Grid and Flexbox for application layout,
16+
migration of theming features, services, typography, and more.
1717

1818
Learn more in the [AngularJS Material Migration Guide](https://material.angularjs.org/latest/migration).
1919

2020
## Caveats found so far
2121

2222
- Different `selector` formatting and conversions between AngularJS and Angular. It depends on which
23-
is referring to the component, not which the component is build for.
23+
framework refers to the component, not which framework compiled the component.
2424
- AngularJS referring to any component: `appComponent`
25+
- I.e. to use `<app-angularjs>` in `index.html`, it's defined as [`selector: appAngularjs`](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/862bedffaae3e7a856b3c8e547dc9cc2d5551e4f/src/app/angularjs/app-angularjs.component.ts#L2)
2526
- Angular referring to any component: `app-component`
27+
- I.e. to use `<ng1-tabs>` in `app.component.html`, it's defined as [`selector: 'ng1-tabs'`](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/862bedffaae3e7a856b3c8e547dc9cc2d5551e4f/src/app/angularjs/tabs.component.ts#L5)
2628
- ngUpgrade projects that work on StackBlitz, don’t work in the CLI and vice versa.
2729

2830
### Minification-friendly AngularJS Code
2931

3032
- Enable `strictDi` to help you catch issues early:
31-
- `angular.bootstrap(rootElement, [angularjsModule.name], {strictDi: true});`
32-
- [Example](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/a77f0567b1795529c1859f1b70fafc5ab5e998be/src/main.ts#L13)
33-
- For injections into `.run()`, `.config()`, etc. use standard dependency annotation:
34-
- `.run(['$templateCache', '$templateRequest', ($templateCache, $templateRequest) => {`
35-
- [Example](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/a77f0567b1795529c1859f1b70fafc5ab5e998be/src/angularjs/app-angularjs.module.ts#L22-L26)
36-
- For TypeScript classes use `$inject`:
33+
- `angular.bootstrap(rootElement, [appAngularjsModule.name], { strictDi: true });`
34+
- [Example](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/862bedffaae3e7a856b3c8e547dc9cc2d5551e4f/src/main.ts#L13)
35+
- For injections into `.run()`, `.config()`, etc. You can use either of:
36+
- Inline Function Annotation:
37+
- `.run([ '$templateCache', ($templateCache) => {`
38+
- [Example](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/862bedffaae3e7a856b3c8e547dc9cc2d5551e4f/src/app/angularjs/templates/templates.js#L1-L3)
39+
- `$inject` Annotation
40+
- `configFunction.$inject = ['$mdThemingProvider', '$mdGestureProvider'];`
41+
- [Example](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/862bedffaae3e7a856b3c8e547dc9cc2d5551e4f/src/app/angularjs/app-angularjs.module.ts#L24)
42+
- For TypeScript classes use `$inject` Annotation:
3743
- `static $inject = ['$scope'];`
38-
- [Example](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/a77f0567b1795529c1859f1b70fafc5ab5e998be/src/angularjs/tabs.component.ts#L7-L11)
44+
- [Example](https://github.com/Splaktar/angularjs-angular-material-hybrid-demo/blob/862bedffaae3e7a856b3c8e547dc9cc2d5551e4f/src/app/angularjs/tabs.component.ts#L8)
3945

4046
### AngularJS Components w/ templateUrl
4147

@@ -48,7 +54,7 @@ The following steps will configure a module that loads `$templateCache` at build
4854
- The [src/app/angularjs/templates/index.js](src/app/angularjs/templates/index.js) file sets up a module.
4955
- Then we import the module and use the `'templates'` string in our AngularJS module creation.
5056

51-
If you are working on AngularJS Templates (`.html` files referenced via `templateUrl`) and you want
57+
If you are working on AngularJS Templates (`.html` files referenced via `templateUrl`), and you want
5258
to enable the Angular CLI to auto-reload on changes, run:
5359

5460
```sh

0 commit comments

Comments
 (0)