Angular JS (2)-优快云博客

本文介绍了如何使用AngularJS的routeProvider进行路由配置，并展示了如何创建和使用组件来展示不同的视图内容。通过具体的代码示例，包括app.config.js和phone-details.components.js文件，详细解释了路由匹配和组件渲染的过程。

通过Angular JS的官方教学文档，了解 routeProvider 的用法， angular.module('aaa').config(['$locationProvider','$routeProvider', funtion config($locationProvider, $routeProvider){

app.config.js ----

angular.
module('phonecatApp').
config(['$locationProvider' ,'$routeProvider',
    function config($locationProvider, $routeProvider) {
      $locationProvider.hashPrefix('!');

      $routeProvider.
        when('/phones', {
          template: '<phone-list></phone-list>'
        }).
        when('/phones/:phoneId', {
          template: '<phone-detail></phone-detail>'
        }).
        otherwise('/phones');
    }
]);

index.html ---

phone-details.components.js

angular.
module('phoneDetail').
component('phoneDetail', {
    template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
    controller: ['$routeParams',
      function PhoneDetailController($routeParams) {
        this.phoneId = $routeParams.phoneId;  //取得变量
      }
    ]
});

目前能刊出 module能嵌套，然后有component， config.

转载于:https://www.cnblogs.com/hellocz/p/6094299.html