Question

我是TypeScript的新手，我找不到路由的例子。帮我。感谢。

Answer 1

这就是我使用ng-annotate-webpack-plugin：

的方法

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)

希望这有帮助。

Answer 2

以下是使用angular-route（ ng-route ）设置路由器配置的示例，通过SystemJS设置TypeScript和ES模块

<强>配置-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();
  }
}

<强>服务/用户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>

如上所述，它使用TypeScript，ng-route和SystemJS，但我认为值得注意的是，大部分内容并非特定于这些选择，即使它们与AngularJS有关。

只有七（11）个TypeScript特定语法实例，它们对应于（6）类型带注释的参数，（2）参数属性简写通过readonly，（1）类型断言关于http服务调用的结果，以及（2）尚未投入ECMAScript标准的静态属性初始值设定项。删除这些，你有一个100％符合标准的ECMAScript 2017计划。

可见一个SystemJS加载器专用机器，__useDefault导出，实际上是完全可选的，为方便起见而在此处显示。删除它，或忽略它，技术上可以使用另一个装载机。

最后对$routeProvider.when的所有调用都可以替换为$stateProvoder.state（（1）$ inject也需要更新），不更改其参数，应用程序可以使用{ {1}}。

因此，当我读完它时，我并不完全确定我真的回答了问题。我基本上提供了一个固执的AngularJS应用程序组织模式的例子，我发现它在实践中非常有效。

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

2 个答案: