Coder Social home page Coder Social logo
sample-app-angular

ui-router / sample-app-angular Goto Github PK

View Code? Open in 1sVSCode Editor NEW
79.0 5.0 40.0 13.32 MB

UI-Router for Angular - Sample Application (angular-cli)

Home Page: http://ui-router.github.io/sample-app-angular/#/mymessages/inbox/5648b50cc586cac4aed6836f

TypeScript 78.97% JavaScript 14.21% Shell 0.61% HTML 0.83% CSS 5.39%
ui-router router angular angular-cli sample

sample-app-angular's Introduction

UI-Router for Angular - Sample Application

Travis badge Greenkeeper badge

This project was generated with angular-cli version 1.0.0-beta.30.

Live demo: http://ui-router.github.io/sample-app-angular/#/mymessages/inbox/5648b50cc586cac4aed6836f

Edit this project in your browser: https://stackblitz.com/github/ui-router/sample-app-angular

This sample app is intended to demonstrate a non-trivial ui-router application.

  • Multiple sub-modules
  • Managed state lifecycle
  • Application data lifecycle
  • Authentication (simulated)
  • Authenticated and unauthenticated states
  • REST data retrieval (simulated)
  • Lazy loaded Angular modules (contacts/mymessages/prefs submodules)

Visualizer

We're using the State and Transition Visualizer to visually represent the current state tree, as well as the transitions between states. Explore how transitions work by hovering over them, and clicking to expand details (params and resolves).

Note how states are entered when they were previously not active, exited and re-entered when parameters change, and how parent states whose parameters did not change are retained. Each of these (exited, entered, retained) correspond to a Transition Hook.

Structure

There are many ways to structure a ui-router app. We aren't super opinionated on application structure. Use what works for you. We organized ours in the following way:

  • Feature modules
    • Each feature gets its own directory and Angular Module (@NgModule)
    • Features contain states and components
    • Specific types of helper code (directives, services, etc) used only within a feature may live in a subdirectory named after its type
  • Leveraging ES6 modules
    • States for a module are defined in separate file
    • Each component is defined in its own file
    • Components are referenced in states where they are composed into the state definition
    • States export themselves
    • Each feature @NgModule imports and declares all the states for the feature

UI-Router Patterns

  • Defining custom, app-specific global behaviors
    • Add metadata to a state, or state tree (such as authRequired)
    • Check for metadata in transition hooks
    • Example: routerhooks/authRequired.js
      • If a transition to a state with a truthy data.authRequired: true property is started and the user is not currently authenticated
  • Defining a default substate for a top-level state
    • Example: declaring redirectTo: 'welcome' in app.states.ts
  • Defining a default parameter for a state
    • Example: folderId parameter defaults to 'inbox' in mymessages.states.ts (folder state)
  • Application data lifecycle
    • Data loading is managed by the state declaration, via the resolve: block
    • Data is fetched before the state is entered
    • Data is fetched according to state parameters
    • The state is entered when the data is ready
    • The resolved data is injected into the components
    • The resolve data remains loaded until the state is exited
  • Lazy Loaded states
    • The main submodules (and all their states and components) are lazy loaded
    • The future state includes a loadChildren property which is used to lazy load the module

sample-app-angular's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar christopherthielen avatar greenkeeper[bot] avatar greenkeeperio-bot avatar dependencies-bot avatar angular-cli avatar uirouterbot avatar

Stargazers

Roman avatar Shawon avatar John Borges avatar June Kim avatar Front-end developer avatar  avatar Julian Franco avatar Andrew avatar Rahiyan Safin avatar Leonardo Michilena Valencia avatar Giang Nguyen Duc avatar Balqis Mughny Sasando avatar Sang Nguyen avatar Ojasvi Naik avatar Lhar Gil avatar Brian Liotti avatar Sathit Seethaphon avatar Pratik Chaudhari avatar Andre Mesquita avatar Muhammad Rizki avatar  avatar Adil Faiz avatar YinChang avatar Jiten (Jits) Bhagat avatar Omkar Shelar avatar  avatar  avatar Mikhail Kolesnikov avatar Bhadresh Arya avatar MOHAMMAD OMAR avatar x0rzkov avatar Jonas Thuvesson Winberg avatar Daniel Díaz avatar Dillon Regimbal avatar  avatar  avatar  avatar David Hollifield avatar Alexey Danylov avatar The Nameless One avatar Aellivon Kyle Sun avatar xuyi0130 avatar  avatar Morgan Erlich avatar Austin Brunkhorst avatar Oguz Ozgen avatar  avatar head fan avatar  avatar Jianyi Liu avatar timelyxyz avatar Brijesh Pal avatar Melroy van den Berg avatar Ralph L avatar  avatar Kevin Kalis avatar  avatar Brian Kelley avatar  avatar Matt Jhou avatar Md. Alamin (Miraje) avatar Abhishek Gahlot avatar Simon Hübner avatar Diego Gutierrez avatar Endy Tjahjono avatar  avatar CE Prunty avatar  avatar Jody Smith avatar  avatar Rob Ferguson avatar  avatar  avatar Pampa avatar Derek Burgman avatar Gurpreet Singh avatar Zurie avatar Xiaomin Yu avatar Denis Sedchenko avatar

Watchers

James Cloos avatar Wesley Cho avatar Alexey Danylov avatar Chris Thielen avatar sandrak avatar

sample-app-angular's Issues

cloned and ng build, it shows the following error:

ERROR in G:/ag2/gitTry/sample-app-angular/src/app/app.module.ts (23,28): Argument of type '{ states: ({ name: string; redirectTo: string; component: typeof AppComponent; } | { parent: stri...' is not
assignable to parameter of type 'RootModule'.
  Types of property 'config' are incompatible.
    Type '(router: UIRouter) => void' is not assignable to type '(uiRouterInstance: UIRouter, injector: Injector, module: StatesModule) => any'.
      Types of parameters 'router' and 'uiRouterInstance' are incompatible.
        Type 'UIRouter' is not assignable to type 'UIRouter'. Two different types with this name exist, but they are unrelated.
          Types of property 'locationService' are incompatible.
            Type 'LocationServices' is not assignable to type 'LocationServices'. Two different types with this name exist, but they are unrelated.
              Types of property 'dispose' are incompatible.
                Type '(router?: UIRouter) => any' is not assignable to type '(router?: UIRouter) => any'. Two different types with this name exist, but they are unrelated.
                  Types of parameters 'router' and 'router' are incompatible.
                    Type 'UIRouter' is not assignable to type 'UIRouter'. Two different types with this name exist, but they are unrelated.
                      Types of property 'locationService' are incompatible.
                        Type 'LocationServices' is not assignable to type 'LocationServices'. Two different types with this name exist, but they are unrelated.
                          Types of property 'dispose' are incompatible.
                            Type '(router?: UIRouter) => any' is not assignable to type '(router?: UIRouter) => any'. Two different types with this name exist, but they are unrelated.
                              Types of parameters 'router' and 'router' are incompatible.
                                Type 'UIRouter' is not assignable to type 'UIRouter'. Two different types with this name exist, but they are unrelated.

Add unit testers?

What about adding some karma testcases / unit testcases? Also for demo purposes.

Kind regards,
Melroy

GA not working in googleAnalyticsHook

Hi!
I try to debug GA with Google Analytics Debugger and I see than data not send to Google when page changes. ((
Data sends only if page is reload...
image

no tsconfig = errors running

When getting latest and running "npm start", I get this:

ERROR in node_modules/@types/jasmine/index.d.ts(142,47): error TS1005: ';' expected.
node_modules/@types/jasmine/index.d.ts(142,90): error TS1005: '(' expected.
node_modules/@types/jasmine/index.d.ts(142,104): error TS1005: ']' expected.
node_modules/@types/jasmine/index.d.ts(142,112): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,113): error TS1136: Property assignment expected.
node_modules/@types/jasmine/index.d.ts(142,121): error TS1005: ')' expected.
node_modules/@types/jasmine/index.d.ts(142,147): error TS1005: '(' expected.
node_modules/@types/jasmine/index.d.ts(142,162): error TS1005: ']' expected.
node_modules/@types/jasmine/index.d.ts(142,163): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,164): error TS1136: Property assignment expected.
node_modules/@types/jasmine/index.d.ts(142,165): error TS1136: Property assignment expected.
node_modules/@types/jasmine/index.d.ts(142,179): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,183): error TS1005: ':' expected.
node_modules/@types/jasmine/index.d.ts(142,208): error TS1005: '{' expected.
node_modules/@types/jasmine/index.d.ts(142,217): error TS1005: ':' expected.
node_modules/@types/jasmine/index.d.ts(142,222): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,227): error TS1005: ':' expected.
node_modules/@types/jasmine/index.d.ts(142,228): error TS1109: Expression expected.
node_modules/@types/jasmine/index.d.ts(142,230): error TS1005: ')' expected.
node_modules/@types/jasmine/index.d.ts(635,30): error TS1005: ';' expected.
node_modules/@types/jasmine/index.d.ts(720,1): error TS1128: Declaration or statement expected.
node_modules/@types/sinon/index.d.ts(1448,36): error TS1005: ';' expected.
node_modules/preact/dist/preact.d.ts(129,8): error TS1005: ';' expected.
node_modules/preact/dist/preact.d.ts(131,4): error TS1109: Expression expected.
node_modules/preact/dist/preact.d.ts(133,4): error TS1005: '(' expected.
node_modules/preact/dist/preact.d.ts(134,3): error TS1005: '(' expected.
node_modules/preact/dist/preact.d.ts(134,10): error TS1005: ')' expected.
node_modules/preact/dist/preact.d.ts(153,14): error TS1005: ';' expected.
node_modules/preact/dist/preact.d.ts(153,44): error TS1005: ';' expected.
node_modules/preact/dist/preact.d.ts(154,5): error TS1128: Declaration or statement expected.
node_modules/preact/dist/preact.d.ts(155,5): error TS1005: '(' expected.
node_modules/preact/dist/preact.d.ts(155,12): error TS1005: ')' expected.
node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.

I think you need a tsconfig to tell it to ignore the node_modules folder (?)

Errors running ng serve

Here are the errors I am getting:
ERROR in node_modules/@types/jasmine/index.d.ts(142,47): error TS1005: ';' expected.
node_modules/@types/jasmine/index.d.ts(142,90): error TS1005: '(' expected.
node_modules/@types/jasmine/index.d.ts(142,104): error TS1005: ']' expected.
node_modules/@types/jasmine/index.d.ts(142,112): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,113): error TS1136: Property assignment expected.
node_modules/@types/jasmine/index.d.ts(142,121): error TS1005: ')' expected.
node_modules/@types/jasmine/index.d.ts(142,147): error TS1005: '(' expected.
node_modules/@types/jasmine/index.d.ts(142,162): error TS1005: ']' expected.
node_modules/@types/jasmine/index.d.ts(142,163): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,164): error TS1136: Property assignment expected.
node_modules/@types/jasmine/index.d.ts(142,165): error TS1136: Property assignment expected.
node_modules/@types/jasmine/index.d.ts(142,179): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,183): error TS1005: ':' expected.
node_modules/@types/jasmine/index.d.ts(142,208): error TS1005: '{' expected.
node_modules/@types/jasmine/index.d.ts(142,217): error TS1005: ':' expected.
node_modules/@types/jasmine/index.d.ts(142,222): error TS1005: ',' expected.
node_modules/@types/jasmine/index.d.ts(142,227): error TS1005: ':' expected.
node_modules/@types/jasmine/index.d.ts(142,228): error TS1109: Expression expected.
node_modules/@types/jasmine/index.d.ts(142,230): error TS1005: ')' expected.
node_modules/@types/jasmine/index.d.ts(635,30): error TS1005: ';' expected.
node_modules/@types/jasmine/index.d.ts(720,1): error TS1128: Declaration or statement expected.
node_modules/preact/dist/preact.d.ts(129,8): error TS1005: ';' expected.
node_modules/preact/dist/preact.d.ts(131,4): error TS1109: Expression expected.
node_modules/preact/dist/preact.d.ts(133,4): error TS1005: '(' expected.
node_modules/preact/dist/preact.d.ts(134,3): error TS1005: '(' expected.
node_modules/preact/dist/preact.d.ts(134,10): error TS1005: ')' expected.
node_modules/preact/dist/preact.d.ts(153,14): error TS1005: ';' expected.
node_modules/preact/dist/preact.d.ts(153,44): error TS1005: ';' expected.
node_modules/preact/dist/preact.d.ts(154,5): error TS1128: Declaration or statement expected.
node_modules/preact/dist/preact.d.ts(155,5): error TS1005: '(' expected.
node_modules/preact/dist/preact.d.ts(155,12): error TS1005: ')' expected.
node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.

Please hrlp.

webpack: Failed to compile. (in a pure repo clone)

ERROR in /var/www/sample-app-ng2/src/app/app.module.ts (23,28): Argument of type '{ states: ({ name: string; redirectTo: string; component: typeof AppComponent; } | { parent: stri...' is not assignable to parameter of type 'RootModule'.
Types of property 'config' are incompatible.
Type '(router: UIRouter) => void' is not assignable to type '(uiRouterInstance: UIRouter, injector: Injector, module: StatesModule) => any'.
Types of parameters 'router' and 'uiRouterInstance' are incompatible.
Type 'UIRouter' is not assignable to type 'UIRouter'. Two different types with this name exist, but they are unrelated.
Types of property 'locationService' are incompatible.
Type 'LocationServices' is not assignable to type 'LocationServices'. Two different types with this name exist, but they are unrelated.
Types of property 'dispose' are incompatible.
Type '(router?: UIRouter) => any' is not assignable to type '(router?: UIRouter) => any'. Two different types with this name exist, but they are unrelated.
Types of parameters 'router' and 'router' are incompatible.
Type 'UIRouter' is not assignable to type 'UIRouter'. Two different types with this name exist, but they are unrelated.
Types of property 'locationService' are incompatible.
Type 'LocationServices' is not assignable to type 'LocationServices'. Two different types with this name exist, but they are unrelated.
Types of property 'dispose' are incompatible.
Type '(router?: UIRouter) => any' is not assignable to type '(router?: UIRouter) => any'. Two different types with this name exist, but they are unrelated.
Types of parameters 'router' and 'router' are incompatible.
Type 'UIRouter' is not assignable to type 'UIRouter'. Two different types with this name exist, but they are unrelated.

app failed to start with "npm start" command

ERROR in /node_modules/preact/dist/preact.d.ts (52,28): ',' expected.
/node_modules/preact/dist/preact.d.ts (53,28): ',' expected.
/node_modules/preact/dist/preact.d.ts (52,22): Cannot find name 'keyof'.
/node_modules/preact/dist/preact.d.ts (52,45): Cannot find name 'Pick'.
/node_modules/preact/dist/preact.d.ts (53,22): Cannot find name 'keyof'.
/node_modules/preact/dist/preact.d.ts (53,84): Cannot find name 'Pick'.
webpack: Failed to compile.

Error installing Cypress

When I run npm install I am getting this:
Installing Cypress (version: 3.2.0)

× Downloading Cypress
→ Cypress Version: 3.2.0
Unzipping Cypress
Finishing Installation
The Cypress App could not be downloaded.

Please check network connectivity and try again:

URL: https://download.cypress.io/desktop/3.2.0?platform=win32&arch=x64
Error: connect ETIMEDOUT 104.25.215.23:443

Platform: win32 (10.0.16299)
Cypress Version: 3.2.0

TypeError: Cannot read property 'createComponent' of undefined

I am getting this error:

TypeError: Cannot read property 'createComponent' of undefined
at DialogService.confirm (app.js:63117)
at LandingPageComponent.uiCanExit (app.js:63026)
at app.js:43082
at invokeCallback (app.js:42261)
at TransitionHook.invokeHook (app.js:42273)
at app.js:42365
at processQueue (app.js:95791)
at app.js:95835
at Scope.$digest (app.js:96930)
at app.js:37014.

I am not sure if ViewContainerRef is being initialized properly or not.

Lazy loading don't works after updating to Angular 4.2.0

After updating to angular >= 4.2.0 all routes with lazy loading support aren't working. You can reproduce it using such steps:

  1. Clone the repository of the sample app
    git clone https://github.com/ui-router/sample-app-angular.git
  2. Install npm packages
    npm install
  3. Run the AngularApp
    npm run ng serve
  4. Open http://localhost:4200/#/home and try to navigate to such routes as messages, contacts, preferences.
    Actual result:
Transition Rejection($id: 0 type: 6, message: The transition errored, detail: TypeError: Cannot read property 'get' of undefined)
$defaultErrorHandler @ stateService.js:40
(anonymous) @ stateService.js:365
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:365
onInvoke @ core.es5.js:3933
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:364
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:125
(anonymous) @ zone.js:760
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:398
onInvokeTask @ core.es5.js:3924
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:397
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:165
drainMicroTaskQueue @ zone.js:593
stateService.js:42

TypeError: Cannot read property 'get' of undefined
    at multiProviderParentChildDelta (lazyLoadNgModule.js:153)
    at applyNgModule (lazyLoadNgModule.js:113)
    at applyModule (lazyLoadNgModule.js:53)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:365)
    at Object.onInvoke (core.es5.js:3933)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:364)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:125)
    at zone.js:760
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:3924)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:397)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:165)
    at drainMicroTaskQueue (zone.js:593)
    at <anonymous>

NodeJs v6.11
NPM v5.0.3

You can workaround this problem by changing package.config dependencies to use specific version of Angular 4.1.3 instead of ^4.0.0 that will install the latest (4.2.2 at the moment) angular packages.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

No Provider for StateService.

Hi,

  1. cloned sample-app-ng2
  2. ng-serve complained about not finding message or folder types so I extracted them both into separate files
  3. changed any references to include import { Folder } from './folder.interface';
    import { Message} from './message.interface';
  4. app.module.ts. had to do a cast in the imports section. config: routerConfigFn
  5. app compiles and serves with ng serve but fails with ng serve --aot
  6. transitions not working, following is displayed in developer tools

Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: No provider for StateService!)
Error
at injectionError (http://localhost:4200/vendor.bundle.js:2909:5) [angular]
at noProviderError (http://localhost:4200/vendor.bundle.js:2947:5) [angular]
at ReflectiveInjector_.prototype.throwOrNull (http://localhost:4200/vendor.bundle.js:4448:13) [angular]
at ReflectiveInjector
.prototype.getByKeyDefault (http://localhost:4200/vendor.bundle.js:4487:13) [angular]
at ReflectiveInjector
.prototype.getByKey (http://localhost:4200/vendor.bundle.js:4419:13) [angular]
at ReflectiveInjector
.prototype.get (http://localhost:4200/vendor.bundle.js:4288:9) [angular]
at NgModuleInjector.prototype.get (http://localhost:4200/vendor.bundle.js:5256:9) [angular]
at resolveDep (http://localhost:4200/vendor.bundle.js:12717:5) [angular]
at createClass (http://localhost:4200/vendor.bundle.js:12581:17) [angular]
at createDirectiveInstance (http://localhost:4200/vendor.bundle.js:12401:5) [angular]
at createViewNodes (http://localhost:4200/vendor.bundle.js:13764:17) [angular]
at createRoot

This was working 11 days ago.

Thanks
Gary

Sync Parent data and child data

I am trying this UI-router and angular 5 . My issue is this . I want to have a resolved parent data that has to be updated by background job for every 1 minute . Also The parent data that is resolved has to automatically update the child data .

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.