如何使用Angular 1和TypeScript創建路由

我是TypeScript中的新成員，並且找不到路由示例。幫幫我。謝謝。如何使用Angular 1和TypeScript創建路由

2017-03-06 Stoiljković Miloš

這個問題很廣泛，你使用模塊還是使用命名空間。如果您使用的是模塊，您使用的是什麼模塊格式，以及您使用的是什麼加載器或打包器？ –

我問，因爲我對每種不同的方法都有答案。 –

如果這不是問題，則同意。我是TypeScript中的新成員。 –

這裏，打字原稿和ES模塊經由SystemJS

配置-routes.ts

import { ILocationProvider, route } from 'angular'; 

import homeTemplate from 'home/template.html'; 
import HomeController from 'home/controller'; 

import usersTemplate from 'home/template.html'; 
import UsersController from 'home/controller'; 
import UserService from "./services/user-service"; 

configureRoutes.$inject = ['$routeProvider', '$locationProvider']; 
export default function configureRoutes(
    $routeProvider: route.IRouteProvider, 
    $locationProvider: ILocationProvider 
) { 
    $routeProvider 
    .when('/home', { 
     template: homeTemplate, 
     controller: HomeController 
    }) 
    .when('/users', { 
     template: usersTemplate, 
     controller: UsersController, 
     controllerAs: 'usersController', 
     resolve: { 
     users 
     } 
    }) 
    .otherwise('/'); 

    $locationProvider.html5Mode(false); 

    users.$inject = ['UserService']; 
    async function users(userService: UserService) { 
    if (!userService.isAuthenticated) { 
     throw Error('unable to resolve, route not loaded'); 
    } 
    return await userService.get(); 
    } 
}

設置使用角路線（ NG-路線）路由器結構的一個例子

services/user-service.ts

import { IHttpService } from 'angular'; 

export default class UserService { 
    static $inject = ['$http']; 
    constructor(readonly $http: IHttpService) { } 

    async get() { 
    const { data } = await this.$http.get('api/users'); 
    return data as User[]; 
    } 

    get isAuthenticated() { 
    return true; // stub 
    } 
}

用戶/ controller.ts

import { User } from 'models'; 

export default class UsersController { 
    static $inject = ['users']; 
    constructor(readonly users: User[]) { } 
}

用戶/ template.html

<ul> 
    <li ng-repeat="(name, id) in usersController.users">{{name}}: {{id}}</li> 
</ul>

models.ts

export interface User { id: number, name: string }

app.ts

import angular from 'angular'; 
import ngRoute from 'angular-route'; 
import UserService from 'services/user-service'; 
import configureRoutes from "./configure-routes"; 

const app = angular 
    .module('app', [ngRoute]) 
    .service({ 
    UserService 
    }) 
    .config(configureRoutes); 

export default function bootstrap(element: Document | Element) { 
    return angular.bootstrap(element, [app.name], { strictDi: true }) 
} 

export const __useDefault = true;

的index.html

<body> 
    <script src="jspm_packages/system.js"></script> 
    <script src="jspm.config.js"></script> 
    <script> 
    SystemJS.import('app') 
     .then(function (app) { 
     app.bootstrap(document.body); 
     }) 
     .catch(function (error) { 
     console.error(error); 
     }); 
    </script> 
</body>

如前所述這使用打字稿，NG-route和SystemJS，但我認爲這是值得注意的是，大部分是不特定於這些選擇甚至與AngularJS的關係如何。

有打字稿特定語法的只有七個（11）的實例中，必須通過readonly對應於（6）式註釋的參數，（2）參數屬性的簡寫，一個（1）類型斷言上的HTTP的結果服務調用，以及（2）尚未投票到ECMAScript標準中的靜態屬性初始值設定項。刪除這些，你有100％符合標準的ECMAScript 2017程序。

有一個SystemJS裝載機專用機械可見，__useDefault導出，它實際上是完全可選的，並且在這裏爲了方便和說明而示出。刪除它，或忽略它，並且可以在技術上使用另一個裝載器。

最後全部呼叫$routeProvider.when可以用$stateProvoder.state更換（（1）$注射需要被更新），在不改變其參數和應用程序將與ui-router工作。

因此，當我讀完它時，我並不完全確定自己是否回答了所問的問題。我基本上提供了一個有見識的AngularJS應用程序組織模式的例子，我發現它在實踐中非常有效。

來源

2017-03-06 23:45:30

這是我如何與NG-註釋-的WebPack-插件做到這一點：

routes.ts：

export default function Router($urlRouterProvider, $locationProvider, $stateProvider) { 
    'ngInject'; 
    $stateProvider 
     .state('app', { 
      url: '/app', 
      template: require('./modules/mainWindow/app.html'), 
      abstract: false 
     }) 
     .state('app.state', { 
      url: '/state', 
      template: require('./modules/state/index.html') 
     }) 
     .state('app.state.nestedState', { 
      url: '/nestedState', 
      template: require('./modules/state/nestedState/index.html') 
     }) 
    $locationProvider.html5Mode(false); 
    $urlRouterProvider.otherwise('/app'); 
}

app.ts：

//imports 
    import Router from './router'; 
    //other code 
    angular.module(MODULE_NAME, 
    [/*dependencies*/]) 
    .config(Router)

希望這有助於。

來源

2017-03-06 13:08:54 Tomasz

你有沒有在GitHub或其他地方的例子。 –

不幸的是沒有。 – Tomasz

如何使用Angular 1和TypeScript創建路由

回答

相關問題